使用TabHost实现微博客户端界面，tabhost选项卡

这里模拟微博客户端进行案例开发，由于没有图片资源，所以就做了一个大体结构类似的案例，跟大家分享一下它的实现，这里采用的是使用xml布局结合TabActivity控制。

先看看实现的效果：

工程目录结构：

以下是源代码：

MainActivity.java

[html]  view plain copy print ?

1. package com.tablehost.activity;  
2.   
3. import android.app.Activity;  
4. import android.app.TabActivity;  
5. import android.content.Intent;  
6. import android.os.Bundle;  
7. import android.speech.SpeechRecognizer;  
8. import android.widget.RadioButton;  
9. import android.widget.RadioGroup;  
10. import android.widget.RadioGroup.OnCheckedChangeListener;  
11. import android.widget.TabHost;  
12. import android.widget.TabHost.TabSpec;  
13.   
14. public class MainActivity extends TabActivity implements OnCheckedChangeListener{  
15.     private TabHost tabHost;  
16.     private RadioGroup radioGroup;  
17.     private RadioButton radioButton1;  
18.     private RadioButton radioButton2;  
19.     private RadioButton radioButton3;  
20.     private RadioButton radioButton4;  
21.       
22.     @Override  
23.     public void onCreate(Bundle savedInstanceState) {  
24.         super.onCreate(savedInstanceState);  
25.         setContentView(R.layout.main);  
26.         //获取TabHost组件  
27.         tabHost = getTabHost();  
28.         //新建一个标签页  
29.         TabSpec tabSpec1 = (TabSpec)tabHost.newTabSpec("HOME").setIndicator("HOME");  
30.         //给标签页设置内容  
31.         tabSpec1.setContent(new Intent(MainActivity.this,HomeActivity.class));  
32.         //把标签页添加到TabHost当中去  
33.         tabHost.addTab(tabSpec1);  
34.           
35.         TabSpec tabSpec2 = (TabSpec)tabHost.newTabSpec("COMMENT").setIndicator("COMMENT");  
36.         tabSpec2.setContent(new Intent(MainActivity.this,CommentActivity.class));  
37.         tabHost.addTab(tabSpec2);  
38.           
39.         TabSpec tabSpec3 = (TabSpec)tabHost.newTabSpec("SAVE").setIndicator("SAVE");  
40.         tabSpec3.setContent(new Intent(MainActivity.this,SaveActivity.class));  
41.         tabHost.addTab(tabSpec3);  
42.           
43.         TabSpec tabSpec4 = (TabSpec)tabHost.newTabSpec("MORE").setIndicator("MORE");  
44.         tabSpec4.setContent(new Intent(MainActivity.this,MoreActivity.class));  
45.         tabHost.addTab(tabSpec4);  
46.           
47.         setUpView();  
48.         //关联RadioButton 和 TabHost  
49.         radioGroup.setOnCheckedChangeListener(this);  
50.     }  
51.     //我的一贯作风  
52.     public void setUpView(){  
53.         radioGroup = (RadioGroup)findViewById(R.id.group);  
54.         radioButton1 = (RadioButton)findViewById(R.id.radioButton1);  
55.         radioButton2 = (RadioButton)findViewById(R.id.radioButton2);  
56.         radioButton3 = (RadioButton)findViewById(R.id.radioButton3);  
57.         radioButton4 = (RadioButton)findViewById(R.id.radioButton4);  
58.     }  
59.     @Override  
60.     public void onCheckedChanged(RadioGroup group, int checkedId) {  
61.         switch (checkedId) {  
62.         case R.id.radioButton1:  
63.             tabHost.setCurrentTabByTag("HOME");  
64.             break;  
65.         case R.id.radioButton2:  
66.             tabHost.setCurrentTabByTag("COMMENT");  
67.             break;  
68.         case R.id.radioButton3:  
69.             tabHost.setCurrentTabByTag("SAVE");  
70.             break;  
71.         case R.id.radioButton4:  
72.             tabHost.setCurrentTabByTag("MORE");  
73.             break;  
74.         default:  
75.             break;  
76.         }  
77.     }  
78. }  

CommentActivity.java:

[html]  view plain copy print ?

1. package com.tablehost.activity;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5.   
6. public class CommentActivity extends Activity {  
7.     @Override  
8.     protected void onCreate(Bundle savedInstanceState) {  
9.         super.onCreate(savedInstanceState);  
10.         setContentView(R.layout.comment);  
11.     }  
12. }  

其他几个Activity类似

在工程的src 目录下新建了一个目录： drawable ,里面新建一个button.xml,用来定义radioButton的选中等不同状态时，显示不同的背景图片：

button.xml:

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <!-- 当单选框可用，且获得焦点还没有按下显示的背景 -->  
4.     <item android:state_enabled="true" android:state_focused="true"   
5.         android:state_pressed="false" android:drawable="@drawable/home_btn_bg_s">  
6.     </item>  
7.       
8.     <!-- 当单选框可用，且被按下时显示的背景 -->  
9.     <item android:state_enabled="true" android:state_pressed="true"  
10.         android:drawable="@drawable/home_btn_bg_s">  
11.     </item>  
12.       
13.     <!-- 当单选框可用，且被选中了时的背景 -->  
14.     <item android:state_enabled="true" android:state_checked="true"  
15.         android:drawable="@drawable/home_btn_bg_d">  
16.     </item>  
17.       
18. </selector>  

main.xml:

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.     <!-- TabHost的id写固定值，在Activity通过getTabHost()方法才能取得到 -->  
7.     <TabHost   
8.         android:id="@android:id/tabhost"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="fill_parent">  
11.         <!-- 放置frame视图和标签页 -->  
12.         <LinearLayout   
13.             android:layout_width="fill_parent"  
14.             android:layout_height="fill_parent"  
15.             android:orientation="vertical">  
16.             <FrameLayout   
17.                 android:id="@android:id/tabcontent"  
18.                 android:layout_width="fill_parent"  
19.                 android:layout_height="wrap_content"  
20.                 android:layout_weight="1.0">  
21.             </FrameLayout>  
22.             <TabWidget   
23.                 android:id="@android:id/tabs"  
24.                 android:layout_width="fill_parent"  
25.                 android:layout_height="wrap_content"  
26.                 android:visibility="gone">  
27.             </TabWidget>  
28.             <RadioGroup   
29.                 android:id="@+id/group"  
30.                 android:layout_width="fill_parent"  
31.                 android:layout_height="50dp"  
32.                 android:background="@drawable/tab_bg"  
33.                 android:gravity="center_vertical"  
34.                 android:orientation="horizontal">  
35.                 <RadioButton   
36.                      android:id="@+id/radioButton1"  
37.                      android:layout_width="fill_parent"  
38.                      android:layout_height="wrap_content"  
39.                      android:button="@null"  
40.                      android:text="@string/home"  
41.                      android:drawableTop="@drawable/icon_1_n"  
42.                      android:gravity="center_horizontal"  
43.                      android:background="@drawable/button"  
44.                      android:layout_weight="1"  
45.                      android:checked="true"/>  
46.                   
47.                 <RadioButton   
48.                      android:id="@+id/radioButton2"  
49.                      android:layout_width="fill_parent"  
50.                      android:layout_height="wrap_content"  
51.                      android:button="@null"  
52.                      android:text="@string/comment"  
53.                      android:drawableTop="@drawable/icon_2_n"  
54.                      android:gravity="center_horizontal"  
55.                      android:background="@drawable/button"  
56.                      android:layout_weight="1"/>  
57.                   
58.                 <RadioButton   
59.                      android:id="@+id/radioButton3"  
60.                      android:layout_width="fill_parent"  
61.                      android:layout_height="wrap_content"  
62.                      android:button="@null"  
63.                      android:text="@string/save"  
64.                      android:drawableTop="@drawable/icon_3_n"  
65.                      android:gravity="center_horizontal"  
66.                      android:background="@drawable/button"  
67.                      android:layout_weight="1"/>  
68.                   
69.                 <RadioButton   
70.                      android:id="@+id/radioButton4"  
71.                      android:layout_width="fill_parent"  
72.                      android:layout_height="wrap_content"  
73.                      android:button="@null"  
74.                      android:text="@string/more"  
75.                      android:drawableTop="@drawable/icon_4_n"  
76.                      android:gravity="center_horizontal"  
77.                      android:background="@drawable/button"  
78.                      android:layout_weight="1"/>  
79.             </RadioGroup>  
80.         </LinearLayout>  
81.     </TabHost>  
82.   
83. </LinearLayout>  

comment.xml：

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical"  
6.     android:background="@drawable/b">  
7.   
8.     <TextView  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="wrap_content"  
11.         android:text="Hello world! CommentActivty" />  
12.   
13. </LinearLayout>  

其他几个布局文件相似。