)Android: 自訂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" mce_style="?android:attr/tabWidgetStyle"  
21     />  

4.接下來就是在TabActivity中使用我們自己編寫的Tab樣式了：

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

然後用類似如下代碼建立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");  
4 mTabHot = mTabHost.newTabSpec("TAB_1")  
5         .setIndicator(tabIndicator1)  
6         .setContent(contentIntent);