Android: 自定义Tab样式

1.制作4个9patch的tab样式,可参考android默认的资源

tab_unselected.9.png tab_selected.9.pngtab_press.9.pngtab_focus.9.png

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

2.定义Tab的selector样式(就叫它tab_indicator.xml好了),将其放入drawable文件夹下,代码如下:

 

<? 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文件夹下,代码如下:

 

<? 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样式了:

 

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

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

 

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

原文链接

发布了4 篇原创文章 · 获赞 1 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/studycwq/article/details/6658054