Tab标签页控件在很多编程技术中都能见到,它使得窗口显示区能够重复利用。在Android中标签页涉及到TabActivity、TabHost、TabWidget等概念。使用Tab标签页控件,可以在同一个空间里放置更多内容。譬如Android自带的拨号程序及通讯录等,就使用了Tab标签功能,如下图所示:

Android拨号、通讯录Tab标签页

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

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

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

XML/HTML代码
  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 xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent">  
  5.   
  6.     <!-- TabWidget 就是标签选项卡的头部部分,注意ID的写法 -->  
  7.     <TABWIDGET android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content">  
  8.     </TABWIDGET>  
  9.     <!-- FrameLayout 就是标签的内容显示部分,注意ID的写法,还要注意我们做了个上部空白设定 android:paddingTop="65dp",是为了不让内容和标签重叠 -->  
  10.     <FRAMELAYOUT android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingtop="65dp">  
  11.         <!-- LinearLayout 是一个标签里的内容,程序根据你定义的ID来把他们放在不同的标签下面 -->  
  12.     <LINEARLAYOUT android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content">  
  13.             <TEXTVIEW android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="标签1中的内容">  
  14.             </TEXTVIEW>  
  15.     </LINEARLAYOUT>  
  16.         <!-- LinearLayout 是另一个标签里的内容-->  
  17.     <LINEARLAYOUT android:id="@+id/linearLayout2" android:layout_width="wrap_content" android:layout_height="wrap_content">  
  18.             <TEXTVIEW android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="标签2中的内容">  
  19.             </TEXTVIEW>  
  20.     </LINEARLAYOUT>  
  21.     </FRAMELAYOUT>  
  22. </TABHOST>  

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

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

       4、编译程序,运行代码,查看结果:

Android学习指南之四十四:用户界面View之Tab标签页

       点击 TwoTab ,标签切换:

Android学习指南之四十四:用户界面View之Tab标签页

       大家最好先看一遍注释,程序运行起来后再看看理解下,加深印象。本节就讲到这里了。

本文发布:Android开发网
本文地址:http://www.jizhuomi.com/android/course/300.html
2012年12月2日
发布:鸡啄米 分类:Android开发教程 浏览: 评论:0