[Android] Custom TabHost Style

2012-04-18

47917
0
Android

Android裡提供了TabHost，讓開發人員可以製做Tab版型；但是預設的樣式一點都不討喜。如果要自己重新設計版面其實也不太難，先來了解一下Tab裡面到底有哪些東西。

API Level 8

在TabHost裡面，最主要的二個物件就是TabWidget以及FrameLayout，TabWidget就是上圖看到的Tab頁籤，而FrameLayout則是頁籤內容放置的地方。如果要調整APP整個畫面底色，就可以從TabHost的background屬性下手；或是想要把TabWidget置底，那就可以把TabWidget和FrameLayout的位置互換；不過今天我要自訂的是TabWidget的樣式。


<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
        </TabWidget>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <LinearLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>

</TabHost>

TabWidget的xml：custom_tab.xml，我放了一個圖和文字，打算用來顯示每個Tab的icon和說明文字；TabWidget基本會有二種狀態：已選、沒選。所以顏色和圖示以及底色也可以依據狀態自動切換，在這裡先設定來源為@drawable物件。


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/background_color"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
	/>

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_gravity="bottom"
        android:textSize="15sp"
        android:textColor="@drawable/text_color"
        android:text="TextView"/>

</LinearLayout>

在res資料夾內新增一個drawable資料夾，然後新增以下幾個xml：

background_color.xml：TabWidget的底色切換，selector中可以設定判斷的條件，這邊用的是state_selected，為了有所區別，我額外幫被選取的tab做個圓角。


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

	<!-- When selected, use grey -->
	<item android:state_selected="true">
		<shape>
			<solid android:color="@drawable/lightsteelblue" />
			<corners 
				android:bottomLeftRadius="10dp" 
				android:bottomRightRadius="10dp" 
				android:topLeftRadius="10dp" 
				android:topRightRadius="10dp" />
		</shape></item>
	<!-- When not selected, use white -->
	<item android:drawable="@drawable/lightgrey"/>

</selector>

text_color.xml：切換文字顏色


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:color="#ffffff"></item>
    <item android:color="#808080"></item>

</selector>

icon_cart.xml：icon當然也可以啦，以下這個是購物車的圖示，如果有幾個tab就要建幾個相對應的icon drawable xml。


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <!-- When selected, use grey -->
    <item android:drawable="@drawable/ic_cart_black"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/ic_cart_white" />
</selector>

另外為了讓顏色統一使用，所以我在res/values新增了color資源檔：


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <drawable name="white">#ffffff</drawable>
    <drawable name="black">#000000</drawable>
    <drawable name="gray">#7F808080</drawable>
    <drawable name="lightsteelblue">#dfb0c4de</drawable>
    <drawable name="lightgrey">#d3d3d3</drawable>
    
</resources>

準備好XML檔，接下來就是程式撰寫：（我是整理成方法了，依照傳入的Activity Class、tab 名稱、tab 標籤文字、圖示的drawable id之後建立TabWidget，之後指定到TabSpec裡。

private void setupTab(Class<?> ccls, String name, String label, Integer iconId) {
    Intent intent = new Intent().setClass(this, ccls);


    View tab = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    ImageView image = (ImageView) tab.findViewById(R.id.icon);
    TextView text = (TextView) tab.findViewById(R.id.text);
    if(iconId != null){
        image.setImageResource(iconId);
    }
    text.setText(label);

    TabSpec spec = tabHost.newTabSpec(name).setIndicator(tab).setContent(intent);
    tabHost.addTab(spec);

}

全部做完就會長這樣，還不錯吧？XD

以上！

Dotblogs 的標籤: Android,TabHost

回首頁