Android: 自定义Tab样式

[e-mail] 收录于2010-09-02 阅读数：

公众公开 

原文来源　

 我也要收藏

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文件夹下，代码如下：

 

view plaincopy to clipboardprint?

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>  

<?xmlversion="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><!-- Non focused states --><item android:state_focused="false"android:state_selected="false" android:state_pressed="false"android:drawable="@drawable/tab_unselected" /><item android:state_focused="false" android:state_selected="true"android:state_pressed="false" android:drawable="@drawable/tab_selected"/><!-- Focused states --><item android:state_focused="true" android:state_selected="false"android:state_pressed="false" android:drawable="@drawable/tab_focus"/><item android:state_focused="true" android:state_selected="true"android:state_pressed="false" android:drawable="@drawable/tab_focus"/><!-- Pressed --><item android:state_pressed="true"android:drawable="@drawable/tab_press" /></selector>

 

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

 

view plaincopy to clipboardprint?

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.     />  

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="0dip"android:layout_height="64dip"android:layout_weight="1"android:layout_marginLeft="-3dip"android:layout_marginRight="-3dip"android:orientation="vertical"android:background="@drawable/tab_indicator"><ImageView android:id="@+id/icon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"/><TextView android:id="@+id/title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"style="?android:attr/tabWidgetStyle" mce_style="?android:attr/tabWidgetStyle"/> 

 

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

 

view plaincopy to clipboardprint?

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

// 首先获取<b style="color:black;background-color:#ffff66">TabWidget</b>mTabHost = getTabHost();LinearLayout ll = (LinearLayout)mTabHost.getChildAt(0);<b style="color:black;background-color:#ffff66">TabWidget</b> tw = (<b style="color:black;background-color:#ffff66">TabWidget</b>)ll.getChildAt(0);

 

    然后用类似如下代码创建TabSpec，就大功告成了。

 

view plaincopy to clipboardprint?

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