Android UI控制元件系列：TabWidget（切換卡）

apkbus發表於2014-12-01
AndroidUI控制元件

Tab選項卡類似與電話本的介面，通過多個標籤切換不同的內容，要實現這個效果，首先要知道TabHost，它是一個用來存放多個Tab標籤的容器，每一個Tab都可以對應自己的佈局，比如，電話本中的Tab佈局就是一個線性佈局

要使用TabHost，首先要通過getTabHost方法獲取TabHost的物件，然後通過addTab方法來向TabHost中新增Tab，當然每個Tab在切換時都會產生一個事件，要捕捉這個事件，需要設定TabActivity的事件監聽setOnTabChangedListener

下面是個小例子：

TabTest.java

package org.hualang.tab;

import android.app.Activity;
import android.app.TabActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.Toast;
import android.widget.TabHost.OnTabChangeListener;

public class TabTest extends TabActivity {
    /** Called when the activity is first created. */
        TabHost tabhost;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //取得TabHost物件
        tabhost = getTabHost();
        //為TabHost新增標籤
        //新建一個newTabSpec(newTabSpec)
        //設定其標籤和圖示（setIndicator）
        //設定內容（setContent）
        tabhost.addTab(tabhost.newTabSpec("tab1")
                        .setIndicator("TAB 1",getResources().getDrawable(R.drawable.img1))
                        .setContent(R.id.text1));
        tabhost.addTab(tabhost.newTabSpec("tab2")
                .setIndicator("TAB 2",getResources().getDrawable(R.drawable.img2))
                .setContent(R.id.text2));
        tabhost.addTab(tabhost.newTabSpec("tab3")
                .setIndicator("TAB 3",getResources().getDrawable(R.drawable.img3))
                .setContent(R.id.text3));
        //設定TabHost的背景顏色
        //tabhost.setBackgroundColor(Color.argb(150,22,70,150));
        //設定TabHost的背景圖片資源
        tabhost.setBackgroundResource(R.drawable.bg0);
        //設定當前顯示哪個標籤
        tabhost.setCurrentTab(0);
        //標籤切換事件處理，setOnTabChangedListener
        tabhost.setOnTabChangedListener(new OnTabChangeListener()
        {
                public void onTabChanged(String tabId)
                {
                        Toast toast=Toast.makeText(getApplicationContext(), "現在是"+tabId+"標籤", Toast.LENGTH_SHORT);
                        toast.show();
                }
        });

    }
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<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" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <TextView
                android:id="@+id/text1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="選項卡1" />
            <TextView
                android:id="@+id/text2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="選項卡2" />
            <TextView
                android:id="@+id/text3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="選項卡3" />
            </FrameLayout>
    </LinearLayout>
</TabHost>

執行效果如下：

相關文章