自定义TabHost，TabWidget样式

先看效果：

　　　　　　　　京东商城底部菜单栏

　　　　　　新浪微博底部菜单栏

本次学习效果图：

第一，主布局文件（启动页main.xml,位于res/layout目录下）代码

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:id="@+id/tabhost">
 6
 7     <LinearLayout
 8         android:id="@+id/linear1"
 9         android:layout_width="fill_parent"
10         android:layout_height="fill_parent"
11         android:orientation="vertical">
12         <TabWidget
13             android:id="@android:id/tabs"
14             android:layout_width="fill_parent"
15             android:layout_height="wrap_content"></TabWidget>
16         <FrameLayout
17             android:id="@android:id/tabcontent"
18             android:layout_width="fill_parent"
19             android:layout_height="fill_parent">
20             <LinearLayout
21                 android:id="@+id/tab1"
22                 android:layout_width="fill_parent"
23                 android:layout_height="fill_parent"
24                 android:orientation="vertical">
25                 <TextView
26                     android:id="@+id/tab1_txt"
27                     android:layout_width="fill_parent"
28                     android:layout_height="fill_parent"
29                     android:gravity="center"
30                     android:text="你"/>
31             </LinearLayout>
32             <LinearLayout
33                 android:id="@+id/tab2"
34                 android:layout_width="fill_parent"
35                 android:layout_height="fill_parent"
36                 android:orientation="vertical">
37                 <TextView
38                     android:id="@+id/tab2_txt"
39                     android:layout_width="fill_parent"
40                     android:layout_height="fill_parent"
41                     android:gravity="center"
42                     android:text="我"/>
43             </LinearLayout>
44             <LinearLayout
45                 android:id="@+id/tab3"
46                 android:layout_width="fill_parent"
47                 android:layout_height="fill_parent"
48                 android:orientation="vertical">
49                 <TextView
50                     android:id="@+id/tab3_txt"
51                     android:layout_width="fill_parent"
52                     android:layout_height="fill_parent"
53                     android:gravity="center"
54                     android:text="他"/>
55             </LinearLayout>
56             <LinearLayout
57                 android:id="@+id/tab4"
58                 android:layout_width="fill_parent"
59                 android:layout_height="fill_parent"
60                 android:orientation="vertical">
61                 <TextView
62                     android:id="@+id/tab4_txt"
63                     android:layout_width="fill_parent"
64                     android:layout_height="fill_parent"
65                     android:gravity="center"
66                     android:text="我们"/>
67             </LinearLayout>
68         </FrameLayout>
69     </LinearLayout>
70 </TabHost>

第二，创建显示此TabWidget的布局tabmini.xml（位于res/layout目录下）

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="wrap_content"
 5     android:paddingTop="5dp"
 6     android:paddingLeft="5dp"
 7     android:paddingRight="5dp"
 8     android:background="#8C8E8C" >
 9
10     <TextView
11         android:id="@+id/tab_label"
12         android:layout_width="fill_parent"
13         android:layout_height="wrap_content"
14         android:layout_centerInParent="true"
15         android:gravity="center"
16         android:textColor="#000000"
17         android:textStyle="bold"
18         android:background="@drawable/tabmini"/>
19 </RelativeLayout>

第三，在drawable里面创建一个selector，命名tabmini.xml，用来点击TabHost的一个tab时TextView的变化

1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="http://schemas.android.com/apk/res/android" >
3     <item
4         android:state_selected="true"
5         android:drawable="@drawable/add_managebg_down2"/>
6     <item
7         android:state_selected="false"
8         android:drawable="@drawable/add_managebg2"/>
9 </selector>

第四，java代码，在Activity里实现TabHost

 1 package com.example.androidtest_9_5_4_meihuatubiao;
 2
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.LayoutInflater;
 6 import android.view.View;
 7 import android.widget.TabHost;
 8 import android.widget.TextView;
 9
10 public class Main extends Activity {
11     @Override
12     protected void onCreate(Bundle savedInstanceState){
13         super.onCreate(savedInstanceState);
14         setContentView(R.layout.main);
15
16         View niTab=(View)LayoutInflater.from(this).inflate(R.layout.tabmini, null);
17         TextView niTxt=(TextView)niTab.findViewById(R.id.tab_label);
18         niTxt.setText("ni");
19
20         View woTab=(View)LayoutInflater.from(this).inflate(R.layout.tabmini, null);
21         TextView woTxt=(TextView)woTab.findViewById(R.id.tab_label);
22         woTxt.setText("wo");
23
24         View taTab=(View)LayoutInflater.from(this).inflate(R.layout.tabmini, null);
25         TextView taTxt=(TextView)taTab.findViewById(R.id.tab_label);
26         taTxt.setText("ta");
27
28         View weTab=(View)LayoutInflater.from(this).inflate(R.layout.tabmini, null);
29         TextView weTxt=(TextView)weTab.findViewById(R.id.tab_label);
30         weTxt.setText("we");
31
32         TabHost tabs=(TabHost)findViewById(R.id.tabhost);
33         tabs.setup();
34
35         tabs.addTab(tabs.newTabSpec("niTab").setContent(R.id.tab1).setIndicator(niTab));
36         tabs.addTab(tabs.newTabSpec("woTab").setContent(R.id.tab2).setIndicator(woTab));
37         tabs.addTab(tabs.newTabSpec("taTab").setContent(R.id.tab3).setIndicator(taTab));
38         tabs.addTab(tabs.newTabSpec("weTab").setContent(R.id.tab4).setIndicator(weTab));
39     }
40 }