用户界面 View（十一）（转载）

本讲内容：标签页的实现 TabHost TabWidget TabActivity

使用Tab标签页控件，可以在同一个空间里放置更多内容。譬如Android自带的拨号程序及通讯录等，就使用了Tab标签功能：

2011-4-29 18:07 上传

下载附件 (127.95 KB)

下面我们用实例的方式来学习如何制作上面类似的标签效果，其实还是很简单的。我同样是把解释写到示例的注释里了，注释是我的理解并不准确，方便你记忆而已。

1、新建一个项目 Lesson44_Tab ，Activity起名叫 MainActivity

2、编写 main.xml 内容如下，这次的形式和普通布局文件有所区别，请注意看写法：

1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- 根元素是 TabHost ,我们这个文件要和TabActivity配合使用，在TabActivity的源代码里写死了要找的Id是android.R.id.tabhost，
3.         因此这里的ID也要定死成TabHost 的ID 是定死的 "@android:id/tabhost" 下面的类似，不再解释。 -->
4. <tabhost android:layout_height="fill_parent" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost">
6.         <!-- TabWidget 就是标签选项卡的头部部分,注意ID的写法 -->
7.         <tabwidget android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@android:id/tabs">
8.         </tabwidget>
9.         <!-- FrameLayout 就是标签的内容显示部分，注意ID的写法，还要注意我们做了个上部空白设定 android:paddingTop="65dp",是为了不让内容和标签重叠 -->
10.         <framelayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@android:id/tabcontent" android:paddingtop="65dp">
11.                 <!-- LinearLayout 是一个标签里的内容，程序根据你定义的ID来把他们放在不同的标签下面 -->
12. <linearlayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/linearLayout1">
13.                         <textview android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/textView1" android:text="标签1中的内容">
14.                         </textview>
15.                 </linearlayout>
16.                 <!-- LinearLayout 是另一个标签里的内容-->
17. <linearlayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/linearLayout2">
18.                         <textview android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/textView2" android:text="标签2中的内容">
19.                         </textview>
20.                 </linearlayout>
21.         </framelayout>
22. </tabhost>

复制代码

3、编写 MainActivity，请注意它继承的是 TabActivity 类，解释在代码里：

1. package basic.android.lesson44;
3. import android.app.TabActivity;
4. import android.os.Bundle;
5. import android.widget.TabHost;
7. public class MainActivity extends TabActivity {
9.         @Override
10.         public void onCreate(Bundle savedInstanceState) {
11.                 super.onCreate(savedInstanceState);
12.                 setContentView(R.layout.main);
14.                 // tabHost是一个标签容器
15.                 TabHost tabHost = this.getTabHost();
17.                 // 每一个TabSpec对象就是个标签
18.                 // TabSpec.setIndicator()方法是设置标签显示样式
19.                 // TabSpec.setContent()方法显示标签下方的内容显示
21.                 //定义第一个标签
22.                 tabHost.addTab(tabHost.newTabSpec("OneTab")
23.                                 .setIndicator("OneTab", getResources().getDrawable(android.R.drawable.star_on))
24.                                 .setContent(R.id.linearLayout1));
26.                 //定义第二个标签
27.                 tabHost.addTab(tabHost.newTabSpec("TwoTab")
28.                                 .setIndicator("TwoTab", getResources().getDrawable(android.R.drawable.star_off))
29.                                 .setContent(R.id.linearLayout2));
31.         }
32. }

复制代码

4、编译程序，运行代码，查看结果： 
点击 TwoTab ，标签切换：
 
关于注释你最好先看一遍，等代码跑起来后再看一遍。好了，本讲就到这里。