修改TabHost默认样式

TabHost是Android提供的一个容器组件，利用它可以轻松地实现TAB界面，如下图所示：

但很多时候，默认的TAB样式并不符合软件的整体风格，这时候该怎么办呢？其实，我们可以编写XML对其样式进行修改。下面修改后的效果图：

1. TabHost布局文件 main.xml

[Copy to clipboard] View Code   XML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<TabHost android:id ="@+id/tabhost" android:layout_width ="fill_parent" android:layout_height ="fill_parent" > <LinearLayout android:orientation ="vertical" android:layout_width ="fill_parent" android:layout_height ="fill_parent" > <TabWidget android:id ="@android:id/tabs" android:layout_width ="fill_parent" android:layout_height ="30dip" android:background ="#a0a0a0" android:layout_weight ="0" /> <FrameLayout android:id ="@android:id/tabcontent" android:layout_width ="fill_parent" android:layout_height ="fill_parent" android:layout_weight ="1" > <ListView android:id ="@+id/user_list" android:layout_width ="fill_parent" android:layout_height ="fill_parent" android:divider ="@drawable/divider_line" android:cacheColorHint ="#00000000" /> <ListView android:id ="@+id/article_list" android:layout_width ="fill_parent" android:layout_height ="fill_parent" android:divider ="@drawable/divider_line" android:cacheColorHint ="#00000000" /> <ListView android:id ="@+id/feed_list" android:layout_width ="fill_parent" android:layout_height ="fill_parent" android:divider ="@drawable/divider_line" android:cacheColorHint ="#00000000" /> <ListView android:id ="@+id/book_list" android:layout_width ="fill_parent" android:layout_height ="fill_parent" android:divider ="@drawable/divider_line" android:cacheColorHint ="#00000000" /> </FrameLayout> </LinearLayout> </TabHost>

FrameLayout里有四个ListView 分别对应用户、文章、频道、图书。
TabWidget和FrameLayout的ID不能自己定义修改。

2. Activity后台代码

[Copy to clipboard] View Code   JAVA

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

RelativeLayout articleTab = ( RelativeLayout) LayoutInflater.from ( this ) .inflate ( R.layout .minitab , null ) ; TextView articleTabLabel = ( TextView) articleTab.findViewById ( R.id .tab_label ) ; articleTabLabel.setText ( "文章" ) ;   RelativeLayout feedTab = ( RelativeLayout) LayoutInflater.from ( this ) .inflate ( R.layout .minitab , null ) ; TextView feedTabLabel = ( TextView) feedTab.findViewById ( R.id .tab_label ) ; feedTabLabel.setText ( "频道" ) ;   RelativeLayout bookTab = ( RelativeLayout) LayoutInflater.from ( this ) .inflate ( R.layout .minitab , null ) ; TextView bookTabLabel = ( TextView) bookTab.findViewById ( R.id .tab_label ) ; bookTabLabel.setText ( "图书" ) ;   TabHost tabHost = ( TabHost) findViewById( R.id .tabhost ) ; tabHost.setup ( ) ;   tabHost.addTab ( tabHost.newTabSpec ( "user" ) .setIndicator ( userTab) .setContent ( R.id .user_list ) ) ; tabHost.addTab ( tabHost.newTabSpec ( "article" ) .setIndicator ( articleTab) .setContent ( R.id .article_list ) ) ; tabHost.addTab ( tabHost.newTabSpec ( "feed" ) .setIndicator ( feedTab) .setContent ( R.id .feed_list ) ) ; tabHost.addTab ( tabHost.newTabSpec ( "book" ) .setIndicator ( bookTab) .setContent ( R.id .book_list ) ) ;

TabHost创建出来以后，必须先setup一下，tabHost.setup();
setIndicator方法设置的View其实就对应了TAB中的一个个选项卡，它们都是通过一个叫minitab的布局文件inflate出来的。

3. 选项卡布局文件minitab.xml

[Copy to clipboard] View Code   XML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?xml version ="1.0" encoding ="utf-8" ?> <RelativeLayout xmlns:android ="http://schemas.android.com/apk/res/android" android:layout_width ="fill_parent" android:layout_height ="fill_parent" android:paddingLeft ="5dip" android:paddingRight ="5dip" >   <TextView android:id ="@+id/tab_label" android:layout_width ="fill_parent" android:layout_height ="fill_parent" android:gravity ="center" android:textColor ="#000000" android:textStyle ="bold" android:background ="@drawable/minitab" /> </RelativeLayout>

drawable/minitab是一个selector，指定了Tab选项卡的背景颜色。

4. selector文件 minitab.xml

[Copy to clipboard] View Code   XML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?xml version ="1.0" encoding ="utf-8" ?> <selector xmlns:android ="http://schemas.android.com/apk/res/android" > <item android:state_selected ="false" android:drawable ="@drawable/minitab_unselected" > </item> <item android:state_selected ="true" android:drawable ="@drawable/minitab_default" > </item> </selector>

minitab_unselected是一浅蓝色背景图片
minitab_default是一白色背景图片