修改TabHost默认样式
TabHost是Android提供的一个容器组件，利用它可以轻松地实现TAB界面，如下图所示：
但很多时候，默认的TAB样式并不符合软件的整体风格，这时候该怎么办呢？其实，我们可以编写XML对其样式进行修改。下面修改后的效果图：
1. TabHost布局文件 main.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后台代码
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
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
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是一白色背景图片
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> |
TabWidget和FrameLayout的ID不能自己定义修改。
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 ) ) ; |
setIndicator方法设置的View其实就对应了TAB中的一个个选项卡，它们都是通过一个叫minitab的布局文件inflate出来的。
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> |
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_default是一白色背景图片