TabHost标签页控件

指定标签与自定义标签的示例

布局代码：

 1 <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:id="@+id/tabhost"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <LinearLayout
 8         android:layout_width="match_parent"
 9         android:layout_height="match_parent"
10         android:orientation="vertical" >
11 
12         <TabWidget
13             android:id="@android:id/tabs"
14             android:layout_width="match_parent"
15             android:layout_height="wrap_content" />
16 
17         <FrameLayout
18             android:id="@android:id/tabcontent"
19             android:layout_width="match_parent"
20             android:layout_height="0dp"
21             android:layout_weight="1" >
22 
23             <!-- 首页 -->
24 
25             <LinearLayout
26                 android:id="@+id/line1"
27                 android:layout_width="match_parent"
28                 android:layout_height="match_parent" >
29 
30                 <TextView
31                     android:layout_width="match_parent"
32                     android:layout_height="match_parent"
33                     android:text="首页" />
34             </LinearLayout>
35             <!-- 第二页 -->
36 
37             <LinearLayout
38                 android:id="@+id/line2"
39                 android:layout_width="match_parent"
40                 android:layout_height="match_parent" >
41 
42                 <TextView
43                     android:layout_width="match_parent"
44                     android:layout_height="match_parent"
45                     android:text="第二页" />
46             </LinearLayout>
47             <!-- 第三页 -->
48 
49             <LinearLayout
50                 android:id="@+id/line3"
51                 android:layout_width="match_parent"
52                 android:layout_height="match_parent" >
53 
54                 <TextView
55                     android:layout_width="match_parent"
56                     android:layout_height="match_parent"
57                     android:text="第三页" />
58             </LinearLayout>
59         </FrameLayout>
60     </LinearLayout>
61 
62 </TabHost>

TabWidget和FrameLayout的id都是定死的,从TabHost.setup()中源码中被定死。

自定义的标签布局：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="@drawable/statelist"
 6     android:orientation="vertical" >
 7 
 8     <TextView
 9         android:id="@+id/tv_title"
10         android:layout_width="match_parent"
11         android:layout_height="match_parent"
12         android:text="首页"
13         android:textColor="@android:color/white"
14         android:textSize="22sp" 
15         android:gravity="center"/>
16 
17 </LinearLayout>

选择时的颜色 res/drawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/bg_selected" android:state_selected="true"/> <!-- 选中的颜色 -->
    <item android:drawable="@drawable/bg_normal"/>

</selector>

MainActivity代码

 1 package com.android.hzy.tabhost;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.View;
 6 import android.widget.TabHost;
 7 import android.widget.TabHost.TabSpec;
 8 import android.widget.TextView;
 9 
10 public class MainActivity extends Activity {
11 
12     private TabHost mTabHost;
13     
14     @Override
15     protected void onCreate(Bundle savedInstanceState) {
16         super.onCreate(savedInstanceState);
17         setContentView(R.layout.activity_main);
18         
19         mTabHost = (TabHost) findViewById(R.id.tabhost);
20         mTabHost.setup(); // 找到 tabwidget\FrameLayout 源码里面id定死
21         
22         // 添加标签页
23         TabSpec tab1 = mTabHost.newTabSpec("tab1");
24 //        tab1.setIndicator("首页", getResources().getDrawable(R.drawable.i1));// 指定标签
25         tab1.setIndicator(createView("首页")); // 自定义标签
26         tab1.setContent(R.id.line1);// 指定标签页的内容
27         mTabHost.addTab(tab1);
28         
29         TabSpec tab2 = mTabHost.newTabSpec("tab2");
30 //        tab2.setIndicator("第二页", getResources().getDrawable(R.drawable.i2));// 指定标签
31         tab2.setIndicator(createView("第二页")); // 自定义标签
32         tab2.setContent(R.id.line2);// 指定标签页的内容
33         mTabHost.addTab(tab2);
34         
35         TabSpec tab3 = mTabHost.newTabSpec("tab3");
36 //        tab3.setIndicator("第三页", getResources().getDrawable(R.drawable.i7));// 指定标签
37         tab3.setIndicator(createView("第三页")); // 自定义标签
38         tab3.setContent(R.id.line3);// 指定标签页的内容
39         mTabHost.addTab(tab3);
40     }
41     
42     private View createView(String text){
43         View view = View.inflate(getApplicationContext(), R.layout.tab, null);
44         TextView  tv_title = (TextView) view.findViewById(R.id.tv_title);
45         tv_title.setText(text);
46         return view;
47     }
48 
49 
50 }