Android: 自定义Tab样式

shaobin0604@163.com 收录于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 plain copy to clipboard print ? <? xml   version = "1.0"   encoding = "utf-8" ?>    < selector   xmlns: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 >    <?xml version="1.0" encoding="utf-8"?> <selector xmlns: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 plain copy to clipboard print ? <? 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"        />    <?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 plain copy to clipboard print ? // 首先获取TabWidget    mTabHost = getTabHost();   LinearLayout ll = (LinearLayout)mTabHost.getChildAt(0 );   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 plain copy to clipboard print ? RelativeLayout tabIndicator1 = (RelativeLayout) LayoutInflater.from( this ).inflate(R.layout.tab_indicator, tw,  false );   TextView tvTab1 = (TextView)tabIndicator1.getChildAt(1 );   tvTab1.setText("tab1" );   mTabHot = mTabHost.newTabSpec("TAB_1" )           .setIndicator(tabIndicator1)           .setContent(contentIntent);