Android UI之Tab(TabActivity+TabHost实现)

Tab标签页是UI设计时经常使用的UI控件，可以实现多个分页之间的快速切换，每个分页可以显示不同的内容。

TabHost相当于浏览器中标签页分布的集合，而Tabspec则相当于浏览器中的每一个分页面。在Android中，每一个TabSpec分布可以是一个组件，也可以是一个布局，然后将每一个分页装入TabHost中，TabHost即可将其中的每一个分页一并显示出来。

使用Tab标签页的一般步骤：

首先要设计所有的分页的界面布局

Activity继承TabActivity

调用TabActivity的getTabHost()方法获得TabHost对象

通过TabHost创建并添加Tab

实例：TabDemo

运行效果：



代码清单：

布局文件：tab.xml

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

    <TextView android:id="@+id/view1"
        android:background="@drawable/blue"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="这里是Tab1里的内容。"/>

    <TextView android:id="@+id/view2"
        android:background="@drawable/red"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="这里是Tab2"/>

    <TextView android:id="@+id/view3"
        android:background="@drawable/green"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="Tab3"/>

</FrameLayout>

Java源代码文件：MainActivity.java

package com.rainsong.tabdemo;

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

public class MainActivity extends TabActivity
{
    TabHost mTabHost;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        mTabHost = getTabHost();
        LayoutInflater.from(this).inflate(R.layout.tab,
                mTabHost.getTabContentView(), true);
        mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator("Tab1")
                .setContent(R.id.view1));
        mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("Tab2")
                .setContent(R.id.view2));
        mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("Tab3")
                .setContent(R.id.view3));
    }
}

API知识点

public class

TabActivity

extends ActivityGroup

TabHost getTabHost()

Returns the TabHost the activity is using to host its tabs.

public abstract class

LayoutInflater

extends Object

Class Overview

Instantiates a layout XML file into its corresponding View objects.

static LayoutInflater from(Context context)

Obtains the LayoutInflater from the given context.

View inflate(int resource, ViewGroup root, boolean attachToRoot)

Inflate a new view hierarchy from the specified xml resource.

public class

TabHost

extends FrameLayout

implements ViewTreeObserver.OnTouchModeChangeListener

Known Direct Subclasses

FragmentTabHost
Class Overview

Container for a tabbed window view. This object holds two children: a set of tab labels that the user clicks to select a specific tab, and a FrameLayout object that displays the contents of that page.

FrameLayout getTabContentView()

Get the FrameLayout which holds tab content

void addTab(TabHost.TabSpec tabSpec)

Add a tab.

TabHost.TabSpec newTabSpec(String tag)

Get a new TabHost.TabSpec associated with this tab host.

public class

TabHost.TabSpec

extends Object

Class Overview

A tab has a tab indicator, content, and a tag that is used to keep track of it.

This builder helps choose among these options.

For the tab indicator, your choices are:

1) set a label

2) set a label and an icon

For the tab content, your choices are:

1) the id of a View

2) a TabHost.TabContentFactory that creates the View content.

3) an Intent that launches an Activity.

TabHost.TabSpec setIndicator(CharSequence label)

Specify a label as the tab indicator.

TabHost.TabSpec setContent(int viewId)

Specify the id of the view that should be used as the content of the tab.