Android Tab標簽的使用基礎

　　Android程序中，Tab標簽窗口是一種常用的UI界面元素。它的實現主要是利用了TabHost類。

 

TabHost說明

　　TabHost是一個標簽窗口的容器。

　　一個TabHost對象包含兩個子元素對象：

　　一個對象是tab標簽集合（TabWidget），用戶點擊它們來選擇一個特定的標簽；

　　另一個是FrameLayout對象，展示當前頁的內容。

 

　　子元素通常是通過容器對象來控制，而不是直接設置子元素的值。

　　下面結合ApiDemos中的例子來說明TabHost的用法。

 

第一個Tab例子：使用TabActivity

　　這個例子使用了 TabActivity。

　　Java程序代碼：

 

package com.meng.hellotab;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;
import android.app.TabActivity;

@SuppressWarnings("deprecation")
public class HelloTabActivity extends TabActivity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        // 得到TabActivity中的TabHost對象
        TabHost tabHost = getTabHost();

        // 內容：采用布局文件中的布局
        LayoutInflater.from(this).inflate(R.layout.activity_hello_tab,
                tabHost.getTabContentView(), true);

        // 加上標簽
        // 參數設置：新增的TabSpec的標簽，標簽中顯示的字樣
        // setContent設置內容對應的View資源標號
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1 indicator").setContent(R.id.view1));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2")
                .setContent(R.id.view2));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")
                .setContent(R.id.view3));
    }

}

 

　　其中布局文件如下：

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

    <TextView
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/blue"
        android:text="@string/tab1" />

    <TextView
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/red"

        android:text="@string/tab2" />

    <TextView
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/green"
        android:text="@string/tab3" />

</FrameLayout>

 

　　布局文件中的顏色字符串如下：文本字符串略。

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <drawable name="red">#7f00</drawable>
    <drawable name="blue">#770000ff</drawable>
    <drawable name="green">#7700ff00</drawable>
    <drawable name="yellow">#77ffff00</drawable>
    <drawable name="screen_background_black">#ff000000</drawable>
    <drawable name="translucent_background">#e0000000</drawable>
    <drawable name="transparent_background">#00000000</drawable>

    <color name="solid_red">#f00</color>
    <color name="solid_blue">#0000ff</color>
    <color name="solid_green">#f0f0</color>
    <color name="solid_yellow">#ffffff00</color>

</resources>

 

　　運行截圖：

 

　　注意 TabActivity這個類已經被標注為：This class was deprecated in API level 13。

 

第二個程序：使用TabHost.TabContentFactory

　　TabHost.TabContentFactory這個接口是用來在tab被選擇時自己創建內容，而不是顯示一個已經存在的view或者啟動一個activity，這兩種要用其他的方法。

　　具體實現見代碼：

 

package com.meng.hellotab;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;
import android.app.TabActivity;

@SuppressWarnings("deprecation")
public class HelloTabActivity extends TabActivity implements
        TabHost.TabContentFactory
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        TabHost tabHost = getTabHost();

        // 不再需要載入布局文件，如果此句不注釋掉會導致content的重疊
        // LayoutInflater.from(this).inflate(R.layout.activity_hello_tab,
        // tabHost.getTabContentView(), true);

        // setContent中傳遞this
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1 indicator").setContent(this));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2")
                .setContent(this));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")
                .setContent(this));
    }

    // setContent的參數設為this時，從這個方法得到每一個Tab的內容（此次不用布局文件，用的話會重疊）
    @Override
    public View createTabContent(String tag)
    {
        // 參數： 這個方法會接受到被選擇的tag的標簽

        final TextView tv = new TextView(this);
        tv.setText("Content for tab with tag " + tag);
        return tv;
    }

}

 

　　程序運行截圖：

 

　　另外，Tab的content的內容還可以啟動另一個Activity，只要在setContent方法中傳入一個Intent即可。

　　此部分不再介紹，可以參見ApiDemos中的Tabs3.java代碼。

 

第三個程序：不繼承TabActivity

　　前面兩個程序例子中都是繼承了TabActivity類，如果不繼承它，需要自己寫TabHost的布局，其中包含了兩個必要的子元素：TabWidget和FrameLayout，其id都是固定值，見代碼。

　　布局文件代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <!-- TabHost必須包含一個 TabWidget和一個FrameLayout -->

    <TabHost
        android:id="@+id/myTabHost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

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

            <!-- TabWidget的id屬性必須為 @android:id/tabs -->

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:orientation="horizontal" />

            <!-- FrameLayout的id屬性必須為 @android:id/tabcontent -->

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

                <TextView
                    android:id="@+id/view1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Tab1 Content" />

                <TextView
                    android:id="@+id/view2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Tab2 Content" />

                <TextView
                    android:id="@+id/view3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Tab3 Content" />
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

 

　　Activity代碼：

package com.meng.hellotabhost;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.TabHost;

public class HelloTabHostActivity extends Activity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hello_tab_host);

        TabHost tabHost = (TabHost) findViewById(R.id.myTabHost);

        // 如果不是繼承TabActivity，則必須在得到tabHost之后，添加標簽之前調用tabHost.setup()
        tabHost.setup();

        // 這里content的設置采用了布局文件中的view
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1 indicator").setContent(R.id.view1));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2")
                .setContent(R.id.view2));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")
                .setContent(R.id.view3));
    }

}

 

　　這種方式可以實現比較靈活的布局，可以方便地加入其他組件，還可以改變標簽欄和內容欄的相對位置。

 

第四個程序：scrolling Tab

　　當標簽太多時，需要把標簽設置進一個ScrollView中進行滾動。有了上面的程序做基礎，這個很好理解。

　　ApiDemos中給出的仍然是繼承TabActivity的方法，在這里給出另一種不用繼承TabActivity的方法，兩種方法很類似。

　　布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TabHost
        android:id="@+id/myTabHost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

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

            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scrollbars="none" >

                <TabWidget

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

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="5dp" />
        </LinearLayout>
    </TabHost>

</LinearLayout>

 

　　Java代碼：

package com.meng.hellotabscroll;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;

public class HelloTabScrollActivity extends Activity implements
        TabHost.TabContentFactory
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hello_tab_scroll);

        // 從布局中獲取TabHost並建立
        TabHost tabHost = (TabHost) findViewById(R.id.myTabHost);
        tabHost.setup();

        // 加上30個標簽
        for (int i = 1; i <= 30; i++)
        {
            String name = "Tab " + i;
            tabHost.addTab(tabHost.newTabSpec(name).setIndicator(name)
                    .setContent(this));
        }

    }

    @Override
    public View createTabContent(String tag)
    {
        final TextView tv = new TextView(this);
        tv.setText("Content for tab with tag " + tag);
        return tv;
    }

}

 

 

參考資料

　　官方Reference：

　　TabHost

　　TabWidget

　　ApiDemos:

　　com.example.android.apis.view包下：

　　Tabs1.java~Tabs6.java

　　android tabHost布局之一 不繼承TabActivity並以布局文件進行布局：

　　http://blog.csdn.net/chenzheng_java/article/details/6208020