Android Tab：面板标签控件

迷南。 2021-12-09 23:23 412阅读 0赞

在有限的手机屏幕空间内，当要浏览的内容较多，无法在一个屏幕空间内全部显示时，可以使用滚动视图来延长屏幕的空间。  
  
当浏览的内容具有很强的类别性质时，更合适的方法是将不同类别的内容集中到各自的面板中，这时就需要使用面板标签（Tab）组件了。  
  
Tab 组件利用面板标签把不同的面板内容切换到屏幕上，以显示不同类别的内容。  
  
下面通过一个实例来了解一下 Tab 组件的使用方法。在工程 WidgetDemo 的布局文件 main.xml 中添加一个名为 TabDemo 的 Button，用以启动 TabActivity。  
  
在 main.xml 中添加代码如下：

1.  <Button
2.  android:id="@+id/button13"
3.  android:layout\_width="wrap\_content"
4.  android:layout\_height="wrap\_content"
5.  android:text="TabDemo"/>

单击 Button 并启动 GridViewActivity 的代码如下：

1.  Button tabbtn = (Button)this.findViewById(R.id.button13);
2.  tabbtn.setOnClickListener(new View.OnClickListener()\{
3.  @Override
4.  public void onClick(View v)\{
5.  Intent intent;
6.  intent = new Intent(MainActivity.this,TabActivity .class);
7.  startActivity(intent);
8.  \}
9.  \});

同时在 [Android][]Manifest.xml 文件中声明该 Activity：

TabActivity 的运行效果如图 1 所示。

![TabActivity运行结果][TabActivity]  
图 1 TabActivity 的运行结果

要使用 Tab 必然涉及它的容器 TabHost，TabHost 包括 TabWigget 和 FrameLayout 两部分。TabWidget 就是每个 Tab 的标签，FrameLayout 是 Tab 的内容。  
  
TabActivity 使用的布局文件是 tab.xml。在 tab.xml 中定义了每个 Tab 中要显示的内容，代码如下：

1.  <?xml version="1.0" encoding="utf-8"?>
2.  <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
3.  android:id="@+id/tabhost"
4.  android:layout\_width="fill\_parent"
5.  android:layout\_height="fill\_parent">
6.  
7.  <LinearLayout
8.  android:layout\_width="fill\_parent"
9.  android:layout\_height="fill\_parent"
10. android:orientation="vertical">
11. 
12. <TabWidget
13. android:id="@android:id/tabs"
14. android:layout\_width="fill\_parent"
15. android:layout\_height="wrap\_content" />
16. 
17. <FrameLayout
18. android:id="@android:id/tabcontent"
19. android:layout\_width="fill\_parent"
20. android:layout\_height="fill\_parent">
21. 
22. <TextView
23. android:id="@+id/tab1"
24. android:layout\_width="wrap\_content"
25. android:layout\_height="wrap\_content"
26. android:text="Tab1页面"
27. android:textSize="40dp" />
28. 
29. <TextView
30. android:id="@+id/tab2"
31. android:layout\_width="wrap\_content"
32. android:layout\_height="wrap\_content"
33. android:text="Tab2页面"
34. android:textSize="40dp" />
35. 
36. <TextView
37. android:id="@+id/tab3"
38. android:layout\_width="wrap\_content"
39. android:layout\_height="wrap\_content"
40. android:text="Tab3页面"
41. android:textSize="40dp" />
42. </FrameLayout>
43. </LinearLayout>
44. </TabHost>

在 FrameLayout 中我们放置了三个 TextView 组件，分别对应三个 Tab 所显示的内容，当切换不同的 Tab 时会自动显示不同的 TextView 内容。  
  
在主程序 TabActivity 的 OnCreate() 方法中，首先获得 TabHost 的对象，并调用 setup() 方法进行初始化，然后通过 TabHost.TabSpec 增加 Tab 页，通过 setContent() 增加当前 Tab 页显示的内容，通过 setIndicator 增加页的标签，最后设定当前要显示的 Tab 页。  
  
TabActivity 的代码如下：

1.  package introduction.android.widgetdemo;
2.  
3.  import android.app.Activity;
4.  import android.os.Bundle;
5.  import android.widget.TabHost;
6.  
7.  public class TabActivity extends Activity \{
8.  
9.  public void onCreate(Bundle savedInstanceState) \{
10. super.onCreate(savedInstanceState);
11. setContentView(R.layout.tab);
12. // 步骤1：获得TabHost的对象，并进行初始化setup()
13. TabHost tabs = (TabHost) findViewById(R.id.tabhost);
14. tabs.setup();
15. //步骤2：获得TabHost.TabSpec增加tab的一页，通过setContent()增加内容，通过setIndicator增加页的标签
16. /\*增加第一个Tab \*/
17. TabHost.TabSpec spec = tabs.newTabSpec("Tag1");
18. //单击Tab要显示的内容
19. spec.setContent(R.id.tab1);
20. /\* 显示Tabl内容\*/
21. spec.setIndicator("Tab1");
22. tabs.addTab(spec);
23. /\* 增加第二个Tab\*/
24. spec = tabs.newTabSpec("Tag2");
25. spec.setContent(R.id.tab2);//单击Tab要显示的内容
26. /\* 显示Tab2内容 \*/
27. spec.setIndicator("Tab2");
28. tabs.addTab(spec);
29. /\*增加第三个Tab \*/
30. spec = tabs.newTabSpec("Tag3");
31. spec.setContent(R.id.tab3);//单击Tab要显示的内容
32. /\* 显示Tab3内容\*/
33. spec.setIndicator("Tab3");
34. tabs.addTab(spec);
35. /\* 步骤3：可通过setCurrentTab(index)指定显示的页，从0开始计算\*/
36. tabs.setCurrentTab(0);
37. \}
38. \}

除了使用上述方法设置 Tab 页面的显示内容外，还可以使用 setContent（Intent）方法启动某个 Activity，并将该 Activity 的视图作为 Tab 页面的内容。  
  
例如：

1.  Intent intent = new Intent().setClass(this,AlbumsActivity .class);
2.  spec = tabHost.newTabSpec("albums")
3.  .setIndicator("Albums",res.getDrawable(R.drawable.ic\_tab\_albums)).setContent(intent);
4.  tabHost.addTab(spec);

[Android]: http://c.biancheng.net/android/
[TabActivity]: /images/20211209/68faba4b125f43cda2f97f0399c40e9b.png