Android: 自定义Tab样式,一种简单的方式。 《》

之前看到过论坛里已经有人发过自定义Tab样式的帖子，感觉有些复杂了，这里分享个简单的方法。

1.制作4个9patch的tab样式，可参考android默认的资源
tab_unselected.9.png    tab_selected.9.png    tab_press.9.png    tab_focus.9.png

这4个资源分别代表Tab的4种状态。

2.定义Tab的selector样式（就叫它tab_indicator.xml好了），将其放入drawable文件夹下，代码如下：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
   
3.     <!-- Non focused states -->
   
4.     <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected" />
   
5.     <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected" />
   
6.     <!-- Focused states -->
   
7.     <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
   
8.     <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
   
9.     <!-- Pressed -->
   
10.     <item android:state_pressed="true" android:drawable="@drawable/tab_press" />
    
11. </selector>

复制代码

3.编写indicator的布局文件（不妨也叫tab_indicator.xml），将其放入layout文件夹下，代码如下：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="0dip"
   
4.     android:layout_height="64dip"
   
5.     android:layout_weight="1"
   
6.     android:layout_marginLeft="-3dip"
   
7.     android:layout_marginRight="-3dip"
   
8.     android:orientation="vertical"
   
9.     android:background="@drawable/tab_indicator">
   
10.     <ImageView android:id="@+id/icon"
    
11.         android:layout_width="wrap_content"
    
12.         android:layout_height="wrap_content"
    
13.         android:layout_centerHorizontal="true"
    
14.     />
    
15.     <TextView android:id="@+id/title"
    
16.         android:layout_width="wrap_content"
    
17.         android:layout_height="wrap_content"
    
18.         android:layout_alignParentBottom="true"
    
19.         android:layout_centerHorizontal="true"
    
20.         style="?android:attr/tabWidgetStyle"
    
21.     />

复 制代码

4.接下来就是在TabActivity中使用我们自己编写的Tab样式了：

1. // 首先获取TabWidget
   
2. mTabHost = getTabHost();
   
3. LinearLayout layout = (LinearLayout)mTabHost.getChildAt(0);
   
4. TabWidget tw = (TabWidget)layout.getChildAt(0);

复制代码

这里可能有人会问为什么 LinearLayout layout = (LinearLayout)mTabHost.getChildAt(0)，接着看，Android源代码中是这样定义TabHost的（下面是原文件 tab_content.xml定义），他的第一个也就是索引0的子孩子是一个线性布局，该孩子在里面才是定义了TabWidget视图。

1. <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost"
   
2.         android:layout_width="fill_parent" android:layout_height="fill_parent">
   
3.         <LinearLayout android:orientation="vertical"
   
4.             android:layout_width="fill_parent" android:layout_height="fill_parent">
   
5.         <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent"
   
6.                 android:layout_height="wrap_content" android:layout_weight="0" />
   
7.         <FrameLayout android:id="@android:id/tabcontent"
   
8.                 android:layout_width="fill_parent" android:layout_height="0dip"
   
9.             android:layout_weight="1"/>
   
10.         </LinearLayout>
    
11. </TabHost>

复制代码

文接上文，废话不表。
然后用类似如下代码创建TabSpec，就大功告成了。

1. RelativeLayout tabIndicator1 = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_indicator, tw, false);
   
2. TextView tvTab1 = (TextView)tabIndicator1.getChildAt(1);
   
3. tvTab1.setText("tab1");//你也可以拿到ImageView设置该Tab的图片Icon
   
4. mTabHot = mTabHost.newTabSpec("TAB_1")
   
5.                 .setIndicator(tabIndicator1)
   
6.                 .setContent(contentIntent);

复制代码