Android开发教程 --- 布局实战
Hi,大家好!
上篇博文中提到，这次我们会以一个实例来帮助大家完成一个复杂的布局，可能我在做布局时，采用的方式有不合理的地方，希望大家指正，在此谢了。
照例，轻松下：
项目经理: 如果我再给你一个人,那可以什么时候可以完工?
程序员: 3个月吧!
项目经理: 那给两个呢?
程序员: 1个月吧!
项目经理: 那100呢?
程序员: 1年吧!
项目经理: 那10000呢?
程序员: 那我将永远无法完成任务.
好了，废话少说，今天的目标效果如下图：
分析此页面，头部是一个选项卡效果，那么我们也采用TabHost来实现切换不同窗体。头部下边是对应的每一个窗体。
给每一个窗体取一个名字，用以区分不同的窗体，不同的布局。
主窗体（选项卡）页面： caractivity.java
文章窗体页面：tab1activity.java
车型库窗体页面：tab2activity.java
论坛窗体页面：tab3activity.java
收藏窗体页面：tab4activity.java
在此，我将实现caractivity.java和tab1activity.java的布局
首先，当然是实现caractivity.java，对应的布局文件和java文件的代码如下：
caractivity布局文件--------------------------------------------------------------------
1 <?xml version="1.0" encoding="utf-8"?>
2 <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
3 android:id="@android:id/tabhost"
4 android:layout_width="fill_parent"
5 android:layout_height="fill_parent">
6 <LinearLayout
7 android:orientation="vertical"
8 android:layout_width="fill_parent"
9 android:layout_height="fill_parent">
10 <TabWidget
11 android:id="@android:id/tabs"
12 android:layout_width="fill_parent"
13 android:layout_height="wrap_content"
14 />
15 <FrameLayout
16 android:id="@android:id/tabcontent"
17 android:layout_width="fill_parent"
18 android:layout_height="fill_parent">
19 </FrameLayout>
20 </LinearLayout>
21 </TabHost>
caractivity java文件--------------------------------------------------------------------
1 package TSD.Jason.Car;
2
3 import android.app.TabActivity;
4 import android.content.Intent;
5 import android.os.Bundle;
6 import android.view.View;
7 import android.widget.TabHost;
8 import android.widget.TabWidget;
9
10 public class CarActivity extends TabActivity
11 {
12 //声明TabHost对象
13 TabHost mTabHost;
14 TabWidget mTabWidget;
15 View tab;
16 /** Called when the activity is first created. */
17 @Override
18 public void onCreate(Bundle savedInstanceState)
19 {
20 super.onCreate(savedInstanceState);
21 setContentView(R.layout.main);
22 //取得TabHost对象
23 mTabHost = getTabHost();
24 mTabWidget = getTabWidget();
25 mTabWidget.setStripEnabled(false); //设置是否显示每个选项卡下边的分割线
26 //设置TabHost的背景颜色
27 //mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));
28 //设置TabHost的背景图片资源
29 mTabHost.setBackgroundResource(R.drawable.choosecur);
30 SetTabSpec();
31 mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
32 @Override
33 public void onTabChanged(String tabId) {
34 for(int i=0;i<mTabWidget.getChildCount();i++)
35 {
36 tab = mTabWidget.getChildAt(i);
37 if(mTabHost.getCurrentTab()==i)
38 {
39 tab.setBackgroundDrawable(getResources().getDrawable(R.drawable.choosecurpress));
40 }
41 else
42 {
43 tab.setBackgroundDrawable(getResources().getDrawable(R.drawable.choosebak));
44 }
45 }
46 }
47 });
48 }
49 /**
50 * 设置、添加选项卡标签
51 */
52 private void SetTabSpec()
53 {
54 Intent intent = new Intent();
55 /* 为TabHost添加标签 */
56 //新建一个newTabSpec(newTabSpec)
57 //设置其标签和图标(setIndicator)
58 //设置内容或链接setContent(R.id.textview1) 或setContent（intent）
59 intent.setClass(CarActivity.this, Tab1Activity.class);
60 mTabHost.addTab(mTabHost.newTabSpec("font")
61 .setIndicator("",getResources().getDrawable(R.drawable.item1font))
62 .setContent(intent));
63 intent.setClass(CarActivity.this, Tab2Activity.class);
64 mTabHost.addTab(mTabHost.newTabSpec("carType")
65 .setIndicator("",getResources().getDrawable(R.drawable.item2font))
66 .setContent(intent));
67 intent.setClass(CarActivity.this, Tab3Activity.class);
68 mTabHost.addTab(mTabHost.newTabSpec("forum")
69 .setIndicator("",getResources().getDrawable(R.drawable.item3font))
70 .setContent(intent));
71 intent.setClass(CarActivity.this, Tab4Activity.class);
72 mTabHost.addTab(mTabHost.newTabSpec("collection")
73 .setIndicator("",getResources().getDrawable(R.drawable.item4font))
74 .setContent(intent));
75 //设置当前显示哪一个标签
76 mTabHost.setCurrentTab(0);
77 SetTabWidget();
78 }
79 /**
80 * 设置TabWidget样式属性
81 */
82 private void SetTabWidget()
83 {
84 int tabWidth = 60; //定义每个选项卡的宽高
85 int tabHeight = 55;
86 for (int i = 0; i < mTabWidget.getChildCount(); i++) {
87 mTabWidget.getChildAt(i).getLayoutParams().width = tabWidth;
88 mTabWidget.getChildAt(i).getLayoutParams().height = tabHeight;
89
90 if(i==0)
91 {
92 mTabWidget.getChildAt(i).setBackgroundResource(R.drawable.choosecurpress);
93 }
94 else
95 {
96 mTabWidget.getChildAt(i).setBackgroundResource(R.drawable.choosebak); //设置背景图片
97 mTabWidget.getChildAt(i).setClickable(true); //是否允许用户点击切换
98 }
99 }
100 }
101 }
代码中，都有注释，在caractivity java文件中我们需要定义或设置选项卡的外观属性和定义TabWidget的背景切换。运行出的效果如下：
第二步，需要编写文章选项的布局 tab1activity.java
布局文件代码如下
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout
3 xmlns:android="http://schemas.android.com/apk/res/android"
4 android:orientation="vertical"
5 android:layout_width="match_parent"
6 android:layout_height="match_parent">
7 <RelativeLayout
8 android:background="@drawable/logobackground"
9 android:id="@+id/relativeLayout1"
10 android:layout_height="40dip"
11 android:layout_width="fill_parent">
12 <ImageView
13 android:id="@+id/image"
14 android:layout_width="wrap_content"
15 android:layout_height="wrap_content"
16 android:src="@drawable/title"
17 android:layout_centerVertical="true"
18 android:layout_marginLeft="15dip"/>
19 <TextView
20 android:id="@+id/txt"
21 android:textColor="#FFF"
22 android:text="@string/weather"
23 android:layout_width="wrap_content"
24 android:layout_height="wrap_content"
25 android:layout_toRightOf="@id/image"
26 android:layout_centerVertical="true"
27 android:layout_marginLeft="15dip"
28 android:textSize="12sp"/>
29 <Button
30 android:id="@+id/button"
31 android:background="@drawable/choosecity"
32 android:text="@string/submit"
33 android:textColor="#fff"
34 android:layout_width="wrap_content"
35 android:layout_height="25dip"
36 android:layout_toRightOf="@id/txt"
37 android:layout_marginLeft="40dip"
38 android:layout_centerVertical="true"
39 android:textSize="12sp"/>
40 </RelativeLayout>
41
42 <RelativeLayout
43 android:background="@drawable/navigation"
44 android:id="@+id/relativeLayout2"
45 android:layout_height="35dip"
46 android:layout_width="match_parent">
47 <ImageView
48 android:id="@+id/ima"
49 android:layout_width="wrap_content"
50 android:layout_height="wrap_content"
51 android:src="@drawable/newsshapeleft"
52 android:layout_marginLeft="5dip"
53 android:layout_centerVertical="true"/>
54 <ImageView
55 android:id="@+id/ima1"
56 android:layout_width="wrap_content"
57 android:layout_height="wrap_content"
58 android:src="@drawable/newsleft"
59 android:layout_toRightOf="@id/ima"
60 android:layout_marginLeft="5dip"
61 android:layout_centerVertical="true"/>
62 <HorizontalScrollView
63 android:id="@+id/horizontalScrollView1"
64 android:layout_width="250dip"
65 android:layout_height="wrap_content"
66 android:layout_toRightOf="@id/ima1"
67 android:layout_marginLeft="-10dip"
68 android:scrollbars="none" >
69 <LinearLayout
70 android:id="@+id/linearLayout1"
71 android:layout_width="match_parent"
72 android:layout_height="match_parent"
73 android:orientation="horizontal"
74 android:scrollbars="vertical">
75 <TextView
76 android:background="@drawable/newtitleback"
77 android:id="@+id/text1"
78 android:layout_toRightOf="@id/ima1"
79 android:text="@string/t1"
80 android:layout_width="wrap_content"
81 android:layout_height="wrap_content"
82 android:gravity="center_vertical|center_horizontal"
83 android:textSize="12sp"
84 android:layout_marginLeft="2dip"
85 android:textColor="#000"
86 />
87 <TextView
88 android:background="@drawable/newtitlebacknull"
89 android:gravity="center_vertical|center_horizontal"
90 android:layout_toRightOf="@+id/text1"
91 android:id="@+id/text2"
92 android:text="@string/t2"
93 android:layout_width="wrap_content"
94 android:layout_height="wrap_content"
95 android:layout_centerVertical="true"
96 android:textSize="12sp"
97 android:layout_marginLeft="5dip"
98 android:textColor="#fff"/>
99 <TextView
100 android:background="@drawable/newtitlebacknull"
101 android:gravity="center_vertical|center_horizontal"
102 android:layout_toRightOf="@+id/text2"
103 android:id="@+id/text3"
104 android:text="@string/t3"
105 android:layout_centerVertical="true"
106 android:layout_width="wrap_content"
107 android:layout_height="wrap_content"
108 android:textSize="12sp"
109 android:layout_marginLeft="5dip"
110 android:textColor="#fff"/>
111 <TextView
112 android:background="@drawable/newtitlebacknull"
113 android:layout_toRightOf="@+id/text3"
114 android:id="@+id/text4"
115 android:text="@string/t4"
116 android:layout_centerVertical="true"
117 android:layout_width="wrap_content"
118 android:layout_height="wrap_content"
119 android:gravity="center_vertical|center_horizontal"
120 android:textSize="12sp"
121 android:layout_marginLeft="5dip"
122 android:textColor="#fff"/>
123 <TextView
124 android:background="@drawable/newtitlebacknull"
125 android:layout_toRightOf="@+id/text4"
126 android:id="@+id/text5"
127 android:text="@string/t5"
128 android:layout_width="wrap_content"
129 android:layout_height="wrap_content"
130 android:gravity="center_vertical|center_horizontal"
131 android:layout_centerVertical="true"
132 android:textSize="12sp"
133 android:layout_marginLeft="5dip"
134 android:textColor="#fff"/>
135 </LinearLayout>
136 </HorizontalScrollView>
137 <ImageView
138 android:id="@+id/ima2"
139 android:layout_width="wrap_content"
140 android:layout_height="wrap_content"
141 android:src="@drawable/newsright"
142 android:layout_marginLeft="10dip"
143 android:layout_centerVertical="true"
144 android:layout_toRightOf="@+id/horizontalScrollView1"/>
145 <ImageView
146 android:id="@+id/ima3"
147 android:layout_width="wrap_content"
148 android:layout_height="wrap_content"
149 android:src="@drawable/newsshapright"
150 android:layout_toRightOf="@id/ima2"
151 android:layout_marginLeft="5dip"
152 android:layout_centerVertical="true"/>
153 </RelativeLayout>
154 <LinearLayout
155 android:background="@drawable/curtitle"
156 android:layout_width="wrap_content"
157 android:layout_height="wrap_content">
158 <ImageView
159 android:layout_width="wrap_content"
160 android:layout_height="wrap_content"
161 android:src="@drawable/radiobutton"
162 android:layout_gravity="center_vertical"
163 android:layout_marginLeft="15dip"/>
164 <TextView
165 android:id="@+id/text6"
166 android:text="@string/t1"
167 android:layout_width="wrap_content"
168 android:layout_height="wrap_content"
169 android:layout_marginLeft="5dip"
170 android:layout_gravity="center_vertical"
171 android:textSize="12sp"/>
172 </LinearLayout>
173 <LinearLayout
174 android:orientation="vertical"
175 android:layout_width="fill_parent"
176 android:layout_height="fill_parent">
177 <ListView
178 android:id="@+id/listview"
179 android:scrollbars="vertical"
180 android:layout_width="wrap_content"
181 android:layout_height="wrap_content"
182 android:divider="@drawable/linecorlor"
183 android:dividerHeight="1px"
184 />
185 </LinearLayout>
186 </LinearLayout>
tab1activity.java 文件代码如下
1 package TSD.Jason.Car;
2
3 import java.text.SimpleDateFormat;
4 import java.util.ArrayList;
5 import java.util.HashMap;
6
7 import android.R.color;
8 import android.R.string;
9 import android.app.Activity;
10 import android.app.AlertDialog.Builder;
11 import android.content.res.ColorStateList;
12 import android.graphics.Color;
13 import android.os.Bundle;
14 import android.view.LayoutInflater;
15 import android.view.View;
16 import android.view.View.OnClickListener;
17 import android.widget.Button;
18 import android.widget.HorizontalScrollView;
19 import android.widget.ImageView;
20 import android.widget.ListView;
21 import android.widget.Scroller;
22 import android.widget.SimpleAdapter;
23 import android.widget.TextView;
24
25 public class tab1activity extends Activity implements OnClickListener {
26 TextView textView1, textView2, textView3, textView4, textView5, textView6;
27 ListView lView;
28 Button button;
29 ImageView imageView,imageView2;
30 ListView lis;
31 HorizontalScrollView horizontalScrollView;
32 protected void onCreate(Bundle savedInstanceState) {
33
34 super.onCreate(savedInstanceState);
35 setContentView(R.layout.tab1);
36 textView1 = (TextView) findViewById(R.id.text1);
37 textView2 = (TextView) findViewById(R.id.text2);
38 textView3 = (TextView) findViewById(R.id.text3);
39 textView4 = (TextView) findViewById(R.id.text4);
40 textView5 = (TextView) findViewById(R.id.text5);
41 textView6 = (TextView) findViewById(R.id.text6);
42 lView = (ListView) findViewById(R.id.listview);
43 button = (Button) findViewById(R.id.button);
44 // lis=(ListView)findViewById(R.id.listbtn);
45 imageView=(ImageView)findViewById(R.id.ima);
46 imageView2=(ImageView)findViewById(R.id.ima3);
47 horizontalScrollView=(HorizontalScrollView)findViewById(R.id.horizontalScrollView1);
48 textView1.setOnClickListener(this);
49 textView2.setOnClickListener(this);
50 textView3.setOnClickListener(this);
51 textView4.setOnClickListener(this);
52 textView5.setOnClickListener(this);
53 Initlistview();
54 button.setOnClickListener(new city());
55 imageView.setOnClickListener(new imaclick());
56 imageView2.setOnClickListener(new imaclick1());
57 //lis.setOnClickListener(new list());
58 }
59 class imaclick implements OnClickListener{
60
61 public void onClick(View v) {
62 horizontalScrollView.scrollBy(-70, 0);
63 }
64 }
65 class imaclick1 implements OnClickListener{
66
67 public void onClick(View v) {
68 horizontalScrollView.scrollBy(70, 0);
69 }
70 }
71 class city implements OnClickListener{
72
73 public void onClick(View v) {
74 choosecity();
75 }}
76 public void choosecity(){
77 Builder dialog=new Builder(tab1activity.this);
78 dialog.setTitle("请选择城市：");
79 LayoutInflater fInflater=LayoutInflater.from(tab1activity.this);
80 View diaView=fInflater.inflate(R.layout.tabbtn,null);
81 lis=(ListView)diaView.findViewById(R.id.listbtn);
82 dialog.setView(diaView);
83 dialog.show();
84 list1();
85 }
86
87 public void list1() {
88 ArrayList<HashMap<String, Object>> btdata=new ArrayList<HashMap<String, Object>>();
89 HashMap<String, Object> item=new HashMap<String, Object>();
90 item.put("name", "北京");
91 btdata.add(item);
92 item=new HashMap<String, Object>();
93 item.put("name", "上海");
94 btdata.add(item);
95 item=new HashMap<String, Object>();
96 item.put("name", "广州");
97 btdata.add(item);
98 item=new HashMap<String, Object>();
99 item.put("name", "深圳");
100 btdata.add(item);
101 item=new HashMap<String, Object>();
102 item.put("name", "成都");
103 btdata.add(item);
104 item=new HashMap<String, Object>();
105 item.put("name", "郑州");
106 btdata.add(item);
107 // String[] s=new String[1];
108 // s[0]="name";
109 // int[] i=new int[1];
110 // i[0]=android.R.id.text1;
111 SimpleAdapter si=new SimpleAdapter(tab1activity.this, btdata,R.layout.city, new String[]{"name"}, new int[]{R.id.citytext});
112 lis.setAdapter(si);
113 }
114
115 private void Initlistview() {
116 ArrayList<HashMap<String, Object>> listdata = new ArrayList<HashMap<String, Object>>();
117 HashMap<String, Object> map = new HashMap<String, Object>();
118 map.put("firstimage", R.drawable.b);
119 map.put("cartitle", "");
120 map.put("cardate", "");
121 map.put("carinfo", "");
122 listdata.add(map);
123 SimpleDateFormat simple = new SimpleDateFormat("yyyy-MM-dd");
124 map = new HashMap<String, Object>();
125 map.put("firstimage", R.drawable.car2);
126 map.put("cartitle", "锁定宝马6系 雷克萨斯计划推出GS Co...");
127 map.put("cardate", "2011-07-27");
128 map.put("carinfo", "[汽车之家 消息]我们刚刚报道过雷克萨斯新GS将会在8月份发布，近日...");
129 listdata.add(map);
130
131 map = new HashMap<String, Object>();
132 map.put("firstimage", R.drawable.car1);
133 map.put("cartitle", "体验三种驱动形式 金港小试长城哈弗S...");
134 map.put("cardate", "2011-07-27");
135 map.put("carinfo", "[汽车之家 试驾]如果你买的是一台内置梯形车架同时又配备分动箱的硬派...");
136 listdata.add(map);
137
138 map = new HashMap<String, Object>();
139 map.put("firstimage", R.drawable.car2);
140 map.put("cartitle", "运动更加激烈 实拍6挡MT三厢马自...");
141 map.put("cardate", "2011-07-27");
142 map.put("carinfo", "[汽车之家 新车图解]两厢马自达3改款上市已经不短时间了，三厢车型迟...");
143 listdata.add(map);
144
145 map = new HashMap<String, Object>();
146 map.put("firstimage", R.drawable.car3);
147 map.put("cartitle", "烈马传奇！亲临2011法拉利赛道日嘉...");
148 map.put("cardate", "2011-07-27");
149 map.put("carinfo", "[汽车之家 消息]我们刚刚报道过雷克萨斯新GS将会在8月份发布，近日...");
150 listdata.add(map);
151 String[] s = new String[4];
152 s[0] = "firstimage";
153 s[1] = "cartitle";
154 s[2] = "cardate";
155 s[3] = "carinfo";
156 int[] i = new int[4];
157 i[0] = R.id.imacar;
158 i[1] = R.id.tv1;
159 i[2] = R.id.tv2;
160 i[3] = R.id.tv3;
161 SimpleAdapter sim = new SimpleAdapter(this, listdata,
162 R.layout.tabilistview, s, i);
163 lView.setAdapter(sim);
164 }
165
166 public void list() {
167 // TODO Auto-generated method stub
168 }
169
170 public void onClick(View v) {
171 textView1.setBackgroundResource(0);
172 textView2.setBackgroundResource(0);
173 textView3.setBackgroundResource(0);
174 textView4.setBackgroundResource(0);
175 textView5.setBackgroundResource(0);
176 textView1.setTextColor(Color.WHITE);
177 textView2.setTextColor(Color.WHITE);
178 textView3.setTextColor(Color.WHITE);
179 textView4.setTextColor(Color.WHITE);
180 textView5.setTextColor(Color.WHITE);
181 switch (v.getId()) {
182 case R.id.text1:
183 textView1.setBackgroundResource(R.drawable.newtitleback);
184 textView1.setTextColor(Color.BLACK);
185 break;
186
187 case R.id.text2:
188 textView2.setBackgroundResource(R.drawable.newtitleback);
189 textView2.setTextColor(Color.BLACK);
190 break;
191 case R.id.text3:
192 textView3.setBackgroundResource(R.drawable.newtitleback);
193 textView3.setTextColor(Color.BLACK);
194 break;
195 case R.id.text4:
196 textView4.setBackgroundResource(R.drawable.newtitleback);
197 textView4.setTextColor(Color.BLACK);
198 break;
199 case R.id.text5:
200 textView5.setBackgroundResource(R.drawable.newtitleback);
201 textView5.setTextColor(Color.BLACK);
202 break;
203 }
204 }
205
206 }
通过以上代码，我们可以实现目标效果，代码已经上传到天圣达公司网站
