自定义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 }