Android: 自定義Tab樣式,一種簡單的方式。

以前看到過論壇裏已經有人發過自定義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文件夾下，代碼以下：

<?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" 
    />

 

4.接下來就是在TabActivity中使用咱們本身編寫的Tab樣式了：

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

 

這裏可能有人會問爲何LinearLayout layout = (LinearLayout)mTabHost.getChildAt(0)，接着看，Android源代碼中是這樣定義TabHost的（下面是原文件tab_content.xml定義），他的第一個也就是索引0的子孩子是一個線性佈局，該孩子在裏面纔是定義了TabWidget視圖。

<TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost"
        android:layout_width="fill_parent" android:layout_height="fill_parent">
        <LinearLayout android:orientation="vertical"
            android:layout_width="fill_parent" android:layout_height="fill_parent">
        <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent"
                android:layout_height="wrap_content" android:layout_weight="0" />
        <FrameLayout android:id="@android:id/tabcontent"
                android:layout_width="fill_parent" android:layout_height="0dip"
            android:layout_weight="1"/>
        </LinearLayout>
</TabHost>

 

文接上文，廢話不表。
而後用相似以下代碼建立TabSpec，就大功告成了。

RelativeLayout tabIndicator1 = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_indicator, tw, false);
TextView tvTab1 = (TextView)tabIndicator1.getChildAt(1);
tvTab1.setText("tab1");//你也能夠拿到ImageView設置該Tab的圖片Icon
mTabHot = mTabHost.newTabSpec("TAB_1")
                .setIndicator(tabIndicator1)
                .setContent(contentIntent);

 

原文：http://www.eoeandroid.com/thread-73012-1-1.html