Hi,大家好!

       上篇博文中提到,这次我们会以一个实例来帮助大家完成一个复杂的布局,可能我在做布局时,采用的方式有不合理的地方,希望大家指正,在此谢了。

       照例,轻松下:

      项目经理: 如果我再给你一个人,那可以什么时候可以完工?
     程序员: 3个月吧!
     项目经理: 那给两个呢?
     程序员: 1个月吧!
     项目经理: 那100呢?
     程序员: 1年吧!
     项目经理: 那10000呢?
     程序员: 那我将永远无法完成任务.

     好了,废话少说,今天的目标效果如下图:

    Android开发教程 --- 布局实战

     分析此页面,头部是一个选项卡效果,那么我们也采用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:andro>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的背景切换。运行出的效果如下:

Android开发教程 --- 布局实战

  第二步,需要编写文章选项的布局 tab1activity.java

布局文件代码如下

  1 <?xml version="1.0" encoding="utf-8"?> 
2 <LinearLayout
3 xmlns:andro>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 }


通过以上代码,我们可以实现目标效果,代码已经上传到天圣达公司网站

http://www.tsdapp.com/android.html

相关文章:

  • 2022-12-23
  • 2021-08-10
  • 2022-12-23
  • 2022-12-23
  • 2021-11-03
  • 2021-12-09
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-08-06
  • 2021-09-29
  • 2021-10-23
  • 2021-12-18
  • 2021-11-21
  • 2022-02-06
  • 2021-11-17
相关资源
相似解决方案