自定義TabHost，TabWidget樣式，tabhosttabwidget

自定義TabHost，TabWidget樣式，tabhosttabwidget

先看效果：

　　　　　　　　京東商城底部菜單欄

   　　　　　　新浪微博底部菜單欄

本次學習效果圖：

第一，主布局文件（啟動頁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:text
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 }