API Demos 2.3 學習筆記 (17)-- Views->Tabs

Tab與TabHost應用很廣泛。打開android手機的默認電話撥號程序，上麵就是由“撥號”，“通話記錄”，“通訊錄”以及“收藏”四個選項卡組成的。
TabHost有兩種實現方式，一種是繼承TabActivity，另一種是自己定義TabHost，不繼承TabActivity。APIDemo中的三個實例都是第一種。想了解TabHost的第二種實現方式，請參考以下內容：
TabHost兩種實現方式 https://www.eoeandroid.com/thread-35836-1-1.html
下麵我們逐一介紹APIDemo實例中TabHost的三種實現方法：

方法一、Content By Id
1、在一個FrameLayout內定義幾個控件/布局，每個布局用作一個Tab的內容。

在這個實例中，FrameLayout內定義三個不同背景顏色的TextView對象view1，view2以及view3。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:andro
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- 一個TextView對象，背景色為藍色 -->
    <TextView
        android:
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/blue"
        android:text="@string/tabs_1_tab_1" />

    <!-- 一個TextView對象，背景色為紅色 -->
    <TextView
        android:
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/red"
        android:text="@string/tabs_1_tab_2" />

    <!-- 一個TextView對象，背景色為綠色 -->
    <TextView
        android:
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/green"
        android:text="@string/tabs_1_tab_3" />

</FrameLayout>

2、新建一個 Activity,繼承自 TabActivity

public class Tabs1 extends TabActivity {

3、通過getTabHost()函數，獲得TabActivity內置的TabHost對象。將樣式R.layout.tabs1解壓出來，並應用於TabHost對象。最後根據三個TextView控件創建了三個Tab選項卡。

        //獲取TabActivity內置的TabHost對象
        TabHost tabHost = getTabHost();
        
        //將樣式R.layout.tabs1解壓出來，並應用於TabHost對象
        LayoutInflater.from(this).inflate(R.layout.tabs1, tabHost.getTabContentView(), true);

        //新建選項卡
        //tabHost.newTabSpec("tab1")  新建一個以“tab1”為標記的選項卡
        //setIndicator("tab1")    設置選項卡標簽標題為 tab1
        //setContent(R.id.view1)) 設置選項卡內容為 R.id.view1
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1")
                .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));

方法二、Content By Factory
1、新建一個 Activity,繼承自 TabActivity，並且繼承 TabHost.TabContentFactory接口。

public class Tabs2 extends TabActivity implements TabHost.TabContentFactory {

2、通過getTabHost()函數，獲得TabActivity內置的TabHost對象。和上麵的例子比較，發現這裏創建的三個選項卡使用的代碼是：setContent(this))。這裏的選項卡內容就得通過實現TabHost.TabContentFactory接口來創建了。

        //獲取TabActivity內置的TabHost對象
        final TabHost tabHost = getTabHost();
        
        //新建選項卡
        //tabHost.newTabSpec("tab1")  新建一個以“tab1”為標記的選項卡
        //setIndicator("tab1")    設置選項卡標簽標題為 tab1 ，圖標為 getResources().getDrawable(R.drawable.star_big_on)
        //setContent(this))   由於該TabActivity繼承了 TabHost.TabContentFactory 接口，因此，點擊選項卡標簽時，會調用
        // public View createTabContent(String tag)來創建每個選項卡內容。該函數中的參數tag和newTabSpec中的參數是一樣的。
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1", getResources().getDrawable(R.drawable.star_big_on))
                .setContent(this));
        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator("tab2")
                .setContent(this));
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("tab3")
           .setContent(this));

3、實現TabHost.TabContentFactory接口。這樣，每點擊一個選項卡，該接口就會根據選項卡標記（tabHost.newTabSpec("tab1") 中的參數 "tab1"）來創建對應的View。

//每次點擊選項卡標簽時，根據選項卡tag標記來創建具體內容。
    /** {@inheritDoc} */
    public View createTabContent(String tag) {
        final TextView tv = new TextView(this);
        tv.setText("Content for tab with tag " + tag);
        return tv;
    }

方法三、Content By Intent
1、新建一個 Activity,繼承自 TabActivity。

public class Tabs3 extends TabActivity {

2、通過getTabHost()函數，獲得TabActivity內置的TabHost對象。和以上兩個實例比較，發現這裏創建的三個選項卡使用的代碼是：setContent(Intent))。點擊每個選項卡，便會根據intent，跳轉到對應的Activity界麵。例如：點擊 "tab1" 選項卡，便會跳轉到 List1界麵。

   //獲取TabActivity內置的TabHost對象
        final TabHost tabHost = getTabHost();

        //新建選項卡
        //tabHost.newTabSpec("tab1")  新建一個以“tab1”為標記的選項卡
        //setIndicator("tab1")    設置選項卡標簽標題為 list
        //setContent(new Intent(this, List1.class)))  點擊該選項卡時，通過Intent，跳轉到List1界麵
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("list")
                .setContent(new Intent(this, List1.class)));

        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator("photo list")
                .setContent(new Intent(this, List8.class)));
        
        // 這個選項卡設置 Intent.FLAG_ACTIVITY_CLEAR_TOP 標記，是為了 每次點擊該選項卡時，重新創建選項卡內容。
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("destroy")
                .setContent(new Intent(this, Controls2.class)
          .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));

以上隻是TabHost的一些基本用法，如果你想了解更多有關TabHost的知識，請點擊參考以下帖子：《史上最全的Android的Tab與TabHost講解》
https://www.eoeandroid.com/thread-1035-1-1.html

下麵我們進行實例代碼解析：實例一、Content By Idres-layout-tabs1.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:andro
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- 一個TextView對象，背景色為藍色 -->
    <TextView
        android:
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/blue"
        android:text="@string/tabs_1_tab_1" />

    <!-- 一個TextView對象，背景色為紅色 -->
    <TextView
        android:
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/red"
        android:text="@string/tabs_1_tab_2" />

    <!-- 一個TextView對象，背景色為綠色 -->
    <TextView
        android:
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/green"
        android:text="@string/tabs_1_tab_3" />

</FrameLayout>

src-com.example.android.apis.view-Tabs1.java

package com.example.android.apis.view;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.view.LayoutInflater;
import com.example.android.apis.R;

/**
 *  演示如何使用TabHost
 *
 */
public class Tabs1 extends TabActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        //獲取TabActivity內置的TabHost對象
        TabHost tabHost = getTabHost();
        
        //將樣式R.layout.tabs1解壓出來，並應用於TabHost對象
        LayoutInflater.from(this).inflate(R.layout.tabs1, tabHost.getTabContentView(), true);

        //新建選項卡
        //tabHost.newTabSpec("tab1")  新建一個以“tab1”為標記的選項卡
        //setIndicator("tab1")    設置選項卡標簽標題為 tab1
        //setContent(R.id.view1)) 設置選項卡內容為 R.id.view1
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1")
                .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));
    }
}

實例二、Content By Factory
src-com.example.android.apis.view-Tabs2.java

package com.example.android.apis.view;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TextView;
import android.view.View;
import com.example.android.apis.R;

/**
 *  演示如何使用TabHost
 *
 */
public class Tabs2 extends TabActivity implements TabHost.TabContentFactory {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        //獲取TabActivity內置的TabHost對象
        final TabHost tabHost = getTabHost();
        
        //新建選項卡
        //tabHost.newTabSpec("tab1")  新建一個以“tab1”為標記的選項卡
        //setIndicator("tab1")    設置選項卡標簽標題為 tab1 ，圖標為 getResources().getDrawable(R.drawable.star_big_on)
        //setContent(this))   由於該TabActivity繼承了 TabHost.TabContentFactory 接口，因此，點擊選項卡標簽時，會調用
        // public View createTabContent(String tag)來創建每個選項卡內容。該函數中的參數tag和newTabSpec中的參數是一樣的。
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1", getResources().getDrawable(R.drawable.star_big_on))
                .setContent(this));
        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator("tab2")
                .setContent(this));
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("tab3")
                .setContent(this));
    }

    
    //每次點擊選項卡標簽時，根據選項卡tag標記來創建具體內容。
    /** {@inheritDoc} */
    public View createTabContent(String tag) {
        final TextView tv = new TextView(this);
        tv.setText("Content for tab with tag " + tag);
        return tv;
    }
}

實例三、Content By Intent
src-com.example.android.apis.view-Tabs3.java

package com.example.android.apis.view;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.content.Intent;

/**
 *  演示如何使用TabHost
 *
 */
public class Tabs3 extends TabActivity {

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

        //獲取TabActivity內置的TabHost對象
        final TabHost tabHost = getTabHost();

        //新建選項卡
        //tabHost.newTabSpec("tab1")  新建一個以“tab1”為標記的選項卡
        //setIndicator("tab1")    設置選項卡標簽標題為 list
        //setContent(new Intent(this, List1.class)))  點擊該選項卡時，通過Intent，跳轉到List1界麵
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("list")
                .setContent(new Intent(this, List1.class)));

        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator("photo list")
                .setContent(new Intent(this, List8.class)));
        
        // 這個選項卡設置 Intent.FLAG_ACTIVITY_CLEAR_TOP 標記，是為了 每次點擊該選項卡時，重新創建選項卡內容。
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("destroy")
                .setContent(new Intent(this, Controls2.class)
                        .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));
    }
}

預覽效果：

最後更新：2017-04-02 22:16:28

API Demos 2.3 學習筆記 (17)-- Views->Tabs

上一篇：用ActivityGroup解決TabHost中多個Activity跳轉問題

下一篇：將壓縮包轉換為圖片

相關內容

熱門內容

最新內容

API Demos 2.3 學習筆記 (17)-- Views-&gt;Tabs

上一篇： 用ActivityGroup解決TabHost中多個Activity跳轉問題

下一篇： 將壓縮包轉換為圖片

相關內容

熱門內容

最新內容

API Demos 2.3 學習筆記 (17)-- Views->Tabs

上一篇：用ActivityGroup解決TabHost中多個Activity跳轉問題

下一篇：將壓縮包轉換為圖片