Android 中的标签页式应用程序

引言

有时，我们希望在一个窗口中包含多个视图，并通过选项卡容器进行导航。这在 Android 中可以使用 TabHost 控件来实现。

在 Android 中使用 TabHost 应用程序有两种方法

1. 使用 TabHost 在同一个 Activity 中导航多个视图。
2. 使用 TabHost 通过 Intent 导航到实际的多个 Activity。

我们将通过本教程解释这两种方法。

选项卡应用程序的结构

带有 TabHost 的 Activity 可能如下所示

该 Activity 由以下部分组成：

1. 一个 TabHost：布局的根元素
2. TabHost 包含一个 TabWidget ，它表示选项卡栏。
3. TabHost 包含一个 FrameLayout ，它包含每个选项卡的内容。

在使用选项卡 Activity 时，我们必须遵守一些规则

1. 如果 Activity 的类型是 TabActivity [可选]，则 TabHost 必须具有 ID @android:id/tabhost。
2. TabWidget 必须具有 ID @android:id/tabs。
3. FrameLayout 必须具有 ID @android:id/tabcontent。

现在，让我们看一个带有多个选项卡的 Activity 的示例。

这是布局

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

    <TabHost android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tabHost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <TabWidget
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/tabs"
    />
     <FrameLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabcontent"
     >
     <LinearLayout
     android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/tab1"
    android:orientation="vertical"
    android:paddingTop="60px"
     >
     <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="100px" 
    android:text="This is tab1"
    android:id="@+id/txt1"
    />    
    
     </LinearLayout>
     
     <LinearLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tab2"
    android:orientation="vertical"
    android:paddingTop="60px"
     >
     <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="100px" 
    android:text="This is tab 2"
    android:id="@+id/txt2"
    />
   
     </LinearLayout>
     
      <LinearLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tab3"
    android:orientation="vertical"
    android:paddingTop="60px"
     >
     <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="100px" 
    android:text="This is tab 3"
    android:id="@+id/txt3"
    />
   
     </LinearLayout>
     </FrameLayout>
    
    </TabHost>

然后在我们的 Activity 代码中

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost=(TabHost)findViewById(R.id.tabHost);
tabHost.setup();

TabSpec spec1=tabHost.newTabSpec("Tab 1");
spec1.setContent(R.id.tab1);
spec1.setIndicator("Tab 1");

TabSpec spec2=tabHost.newTabSpec("Tab 2");
spec2.setIndicator("Tab 2");
spec2.setContent(R.id.tab2);

TabSpec spec3=tabHost.newTabSpec("Tab 3");
spec3.setIndicator("Tab 3");
spec3.setContent(R.id.tab3);

tabHost.addTab(spec1);
tabHost.addTab(spec2);
tabHost.addTab(spec3);
}

将如下所示

1. 我们使用 TabSpecs 类创建选项卡。
2. 我们使用 TabSpecs.setIndicator() 方法设置每个选项卡的标题。
3. 我们使用 TabSpecs.setContent() 方法设置每个选项卡的内容。
4. 如果您将 TabActivity 作为 Activity 的基类，则无需调用 TabHost.Setup() 方法。

我们可以像这样将图标添加到选项卡的标题中

TabSpec spec1=tabHost.newTabSpec("Tab 1");
spec1.setContent(R.id.tab1);
spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.flash));

TabSpec spec2=tabHost.newTabSpec("Tab 2");
spec2.setIndicator("Tab 2",getResources().getDrawable(R.drawable.sun));
spec2.setContent(R.id.tab2);

TabSpec spec3=tabHost.newTabSpec("Tab 3");
spec3.setIndicator("Tab 3",getResources().getDrawable(R.drawable.chart));
spec3.setContent(R.id.tab3);

它将如下所示

我们还可以指定指示器为视图

TabSpec spec1=tabHost.newTabSpec("Tab 1");
spec1.setContent(R.id.tab1);
TextView txt=new TextView(this);
txt.setText("Tab 1");
txt.setBackgroundColor(Color.RED);
spec1.setIndicator(txt);

设置选项卡的内容

我们已经了解了如何通过指定要在同一 Activity 中显示的多个布局资源来设置选项卡的内容。

如果我们的应用程序中有多个 Activity，并且我们希望使用选项卡在它们之间导航怎么办？在这种情况下，我们将有一个 Activity 作为应用程序的根 Activity。

该 Activity 将具有 TabHost ，并使用 Intents 导航到其他 Activity。

注意：根 Activity 必须继承自 TabActivity。根 Activity 将具有如下布局文件

<?xml version="1.0" encoding="utf-8"?>
    <TabHost android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabhost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <TabWidget
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/tabs"
    />
     <FrameLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabcontent"
     >
     </FrameLayout>
    </TabHost>

其他 Activity 将具有一个简单的布局，包含一个 TextView。

现在来看根 Activity 的代码

public class TabDemo extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TabHost tabHost=getTabHost();
        // no need to call TabHost.Setup()        
        
        //First Tab
        TabSpec spec1=tabHost.newTabSpec("Tab 1");
        spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.sun));
        Intent in1=new Intent(this, Act1.class);
        spec1.setContent(in1);
        
        TabSpec spec2=tabHost.newTabSpec("Tab 2");
        spec2.setIndicator("Tab 2",getResources().getDrawable(R.drawable.chart));
        Intent in2=new Intent(this,Act2.class);
        spec2.setContent(in2);

        tabHost.addTab(spec2);
        tabHost.addTab(spec3);
    }
}

在运行时添加选项卡

我们可以使用 TabSpec.setContent(TabContentFactory) 方法在运行时将选项卡添加到 TabHost 。

TabContentFactory 是一个接口，需要实现一个回调方法 createTabContent(String tag)，该方法返回要添加到选项卡内容的视图。因此，在最后一个示例中，如果我们更改添加第二个选项卡内容的代码为

TabSpec spec1=tabHost.newTabSpec("Tab 1");
        spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.sun));

        spec1.setContent(new TabContentFactory() {
   
   @Override
   public View createTabContent(String tag) {
    // TODO Auto-generated method stub
    
    return (new AnalogClock(TabDemo.this));
   }
  });

该 Activity 将如下所示

在 http://android-pro.blogspot.com 上查看更多教程。

历史

• 2010 年 9 月 6 日：初始帖子