第四十四讲：用户界面 View（十一）

macgg · 发表于 2013-8-28 16:27

>

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

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

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

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

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

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

<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">

      
      <tabwidget android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@android:id/tabs">
      </tabwidget>
      
      <framelayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@android:id/tabcontent" android:paddingtop="65dp">
            
<linearlayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/linearLayout1">
                     <textview android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/textView1" android:text="标签1中的内容">
                     </textview>
            </linearlayout>
            
<linearlayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/linearLayout2">
                     <textview android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/textView2" android:text="标签2中的内容">
                     </textview>
            </linearlayout>
      </framelayout>
</tabhost>

复制代码

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

package basic.android.lesson44;

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

public class MainActivity extends TabActivity {

      @Override
      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

            // tabHost是一个标签容器
            TabHost tabHost = this.getTabHost();

            // 每一个TabSpec对象就是个标签
            // TabSpec.setIndicator()方法是设置标签显示样式
            // TabSpec.setContent()方法显示标签下方的内容显示

            //定义第一个标签
            tabHost.addTab(tabHost.newTabSpec("OneTab")
                              .setIndicator("OneTab", getResources().getDrawable(android.R.drawable.star_on))
                              .setContent(R.id.linearLayout1));

            //定义第二个标签
            tabHost.addTab(tabHost.newTabSpec("TwoTab")
                              .setIndicator("TwoTab", getResources().getDrawable(android.R.drawable.star_off))
                              .setContent(R.id.linearLayout2));

      }
}

复制代码

4、编译程序，运行代码，查看结果：
点击 TwoTab ，标签切换：

关于注释你最好先看一遍，等代码跑起来后再看一遍。好了，本讲就到这里。
</div

› 智能家居 / NAS / 路由 / 开发 / 音响 › TV应用开发交流

第四十四讲：用户界面 View（十一）

第四十四讲：用户界面 View（十一）

相关帖子

浏览过的版块

站长推荐 /1