API Demos 2.3 学习笔记 (17)-- Views->Tabs-阿里云开发者社区

更多精彩内容，请点击阅读：《API Demos 2.3 学习笔记》

Tab与TabHost应用很广泛。打开android手机的默认电话拨号程序，上面就是由“拨号”，“通话记录”，“通讯录”以及“收藏”四个选项卡组成的。
TabHost有两种实现方式，一种是继承TabActivity，另一种是自己定义TabHost，不继承TabActivity。APIDemo中的三个实例都是第一种。想了解TabHost的第二种实现方式，请参考以下内容：
TabHost两种实现方式 http://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:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- 一个TextView对象，背景色为蓝色 -->
    <TextView
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/blue"
        android:text="@string/tabs_1_tab_1" />

    <!-- 一个TextView对象，背景色为红色 -->
    <TextView
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/red"
        android:text="@string/tabs_1_tab_2" />

    <!-- 一个TextView对象，背景色为绿色 -->
    <TextView
        android:id="@+id/view3"
        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讲解》

http://www.eoeandroid.com/thread-1035-1-1.html




下面我们进行实例代码解析：实例一、Content By Idres-layout-tabs1.xml

<?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对象，背景色为蓝色 -->
    <TextView
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/blue"
        android:text="@string/tabs_1_tab_1" />

    <!-- 一个TextView对象，背景色为红色 -->
    <TextView
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/red"
        android:text="@string/tabs_1_tab_2" />

    <!-- 一个TextView对象，背景色为绿色 -->
    <TextView
        android:id="@+id/view3"
        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)));
    }
}


预览效果：

API Demos 2.3 学习笔记 (17)-- Views->Tabs

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

API Demos 2.3 学习笔记 (17)-- Views-&gt;Tabs

热门文章

最新文章

相关电子书

相关实验场景

API Demos 2.3 学习笔记 (17)-- Views->Tabs