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);