Android Tab标签的使用基础

Android程序中，Tab标签窗口是一种常用的UI界面元素。它的实现主要是利用了TabHost类。

TabHost说明

TabHost是一个标签窗口的容器。

一个TabHost对象包含两个子元素对象：

一个对象是tab标签集合（TabWidget），用户点击它们来选择一个特定的标签；

另一个是FrameLayout对象，展示当前页的内容。 

子元素通常是通过容器对象来控制，而不是直接设置子元素的值。

下面结合ApiDemos中的例子来说明TabHost的用法。 

第一个Tab例子：使用TabActivity

这个例子使用了 TabActivity。

Java程序代码：

package com.meng.hellotab;

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

@SuppressWarnings("deprecation")
public class HelloTabActivity extends TabActivity
{

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);

    // 得到TabActivity中的TabHost对象
    TabHost tabHost = getTabHost();

    // 内容：采用布局文件中的布局
    LayoutInflater.from(this).inflate(R.layout.activity_hello_tab,
        tabHost.getTabContentView(), true);

    // 加上标签
    // 参数设置：新增的TabSpec的标签，标签中显示的字样
    // setContent设置内容对应的View资源标号
    tabHost.addTab(tabHost.newTabSpec("tab1")
        .setIndicator("tab1 indicator").setContent(R.id.view1));
    tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2")
        .setContent(R.id.view2));
    tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")
        .setContent(R.id.view3));
  }

}

其中布局文件如下：

布局文件1

布局文件1

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

  <TextView
    android:id="@+id/view1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/blue"
    android:text="@string/tab1" />

  <TextView
    android:id="@+id/view2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/red"

    android:text="@string/tab2" />

  <TextView
    android:id="@+id/view3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/green"
    android:text="@string/tab3" />

</FrameLayout>

布局文件中的颜色字符串如下：文本字符串略。

colors.xml

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

  <drawable name="red">#7f00</drawable>
  <drawable name="blue">#770000ff</drawable>
  <drawable name="green">#7700ff00</drawable>
  <drawable name="yellow">#77ffff00</drawable>
  <drawable name="screen_background_black">#ff000000</drawable>
  <drawable name="translucent_background">#e0000000</drawable>
  <drawable name="transparent_background">#00000000</drawable>

  <color name="solid_red">#f00</color>
  <color name="solid_blue">#0000ff</color>
  <color name="solid_green">#f0f0</color>
  <color name="solid_yellow">#ffffff00</color>

</resources>

运行截图：

注意 TabActivity这个类已经被标注为：This class was deprecated in API level 13。

第二个程序：使用TabHost.TabContentFactory

TabHost.TabContentFactory这个接口是用来在tab被选择时自己创建内容，而不是显示一个已经存在的view或者启动一个activity，这两种要用其他的方法。

具体实现见代码：

package com.meng.hellotab;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;
import android.app.TabActivity;

@SuppressWarnings("deprecation")
public class HelloTabActivity extends TabActivity implements
    TabHost.TabContentFactory
{

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);

    TabHost tabHost = getTabHost();

    // 不再需要载入布局文件，如果此句不注释掉会导致content的重叠
    // LayoutInflater.from(this).inflate(R.layout.activity_hello_tab,
    // tabHost.getTabContentView(), true);

    // setContent中传递this
    tabHost.addTab(tabHost.newTabSpec("tab1")
        .setIndicator("tab1 indicator").setContent(this));
    tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2")
        .setContent(this));
    tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")
        .setContent(this));
  }

  // setContent的参数设为this时，从这个方法得到每一个Tab的内容（此次不用布局文件，用的话会重叠）
  @Override
  public View createTabContent(String tag)
  {
    // 参数： 这个方法会接受到被选择的tag的标签

    final TextView tv = new TextView(this);
    tv.setText("Content for tab with tag " + tag);
    return tv;
  }

}

程序运行截图：

另外，Tab的content的内容还可以启动另一个Activity，只要在setContent方法中传入一个Intent即可。

此部分不再介绍，可以参见ApiDemos中的Tabs3.java代码。 

第三个程序：不继承TabActivity

前面两个程序例子中都是继承了TabActivity类，如果不继承它，需要自己写TabHost的布局，其中包含了两个必要的子元素：TabWidget和FrameLayout，其id都是固定值，见代码。

布局文件代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />

  <!-- TabHost必须包含一个 TabWidget和一个FrameLayout -->

  <TabHost
    android:id="@+id/myTabHost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical" >

      <!-- TabWidget的id属性必须为 @android:id/tabs -->

      <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:orientation="horizontal" />

      <!-- FrameLayout的id属性必须为 @android:id/tabcontent -->

      <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0" >

        <TextView
          android:id="@+id/view1"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:text="Tab1 Content" />

        <TextView
          android:id="@+id/view2"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:text="Tab2 Content" />

        <TextView
          android:id="@+id/view3"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:text="Tab3 Content" />
      </FrameLayout>
    </LinearLayout>
  </TabHost>

</LinearLayout>

Activity代码：

package com.meng.hellotabhost;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.TabHost;

public class HelloTabHostActivity extends Activity
{

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_hello_tab_host);

    TabHost tabHost = (TabHost) findViewById(R.id.myTabHost);

    // 如果不是继承TabActivity，则必须在得到tabHost之后，添加标签之前调用tabHost.setup()
    tabHost.setup();

    // 这里content的设置采用了布局文件中的view
    tabHost.addTab(tabHost.newTabSpec("tab1")
        .setIndicator("tab1 indicator").setContent(R.id.view1));
    tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2")
        .setContent(R.id.view2));
    tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")
        .setContent(R.id.view3));
  }

}

这种方式可以实现比较灵活的布局，可以方便地加入其他组件，还可以改变标签栏和内容栏的相对位置。

第四个程序：scrolling Tab

当标签太多时，需要把标签设置进一个ScrollView中进行滚动。有了上面的程序做基础，这个很好理解。

ApiDemos中给出的仍然是继承TabActivity的方法，在这里给出另一种不用继承TabActivity的方法，两种方法很类似。

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >

  <TabHost
    android:id="@+id/myTabHost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      android:padding="5dp" >

      <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none" >

        <TabWidget

          android:id="@android:id/tabs"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />
      </HorizontalScrollView>

      <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp" />
    </LinearLayout>
  </TabHost>

</LinearLayout>

Java代码：

package com.meng.hellotabscroll;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;

public class HelloTabScrollActivity extends Activity implements
    TabHost.TabContentFactory
{

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_hello_tab_scroll);

    // 从布局中获取TabHost并建立
    TabHost tabHost = (TabHost) findViewById(R.id.myTabHost);
    tabHost.setup();

    // 加上30个标签
    for (int i = 1; i <= 30; i++)
    {
      String name = "Tab " + i;
      tabHost.addTab(tabHost.newTabSpec(name).setIndicator(name)
          .setContent(this));
    }

  }

  @Override
  public View createTabContent(String tag)
  {
    final TextView tv = new TextView(this);
    tv.setText("Content for tab with tag " + tag);
    return tv;
  }

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# android  # tab  # android顶部tab导航栏  # tab切换  # Android中实现可滑动的Tab的3种方式  # Android TabWidget切换卡的实现应用  # android TabHost(选项卡)的使用方法  # Android开发笔记 TableLayout常用的属性介绍  # android 选项卡(TabHost)如何放置在屏幕的底部  # Android TabLayout(选项卡布局)简单用法实例分析  # android中TabHost的图标(48×48)和文字叠加解决方法  # Android仿微信底部实现Tab选项卡切换效果  # Android入门之ActivityGroup+GridView实现Tab分页标签的方法  # Android入门之TableLayout应用解析(一)  # Android TableLayout数据列表的回显清空实现思路及代码  # Android多个TAB选项卡切换效果  # 都是  # 还可以  # 而不是  # 是一个  # 在这里  # 很好  # 是一种  # 第一个  # 两种  # 设为  # 其他的  # 第二个  # 采用了  # 要用  # 如果不是  # 可以实现  # 仍然是  # 第三个  # 这两种  # 大家多多 

相关文章： 建站VPS选购需注意哪些关键参数？  建站之星在线客服如何快速接入解答？  MySQL查询结果复制到新表的方法(更新、插入)  如何通过VPS搭建网站快速盈利？  上海网站制作网站建设公司,建筑电工证网上查询系统入口？  企业网站制作费用多少,企业网站空间一般需要多大，费用是多少？  深圳网站制作的公司有哪些,dido官方网站？  小捣蛋自助建站系统：数据分析与安全设置双核驱动网站优化  如何通过FTP服务器快速搭建网站？  网站app免费制作软件,能免费看各大网站视频的手机app？  已有域名建站全流程解析：网站搭建步骤与建站工具选择  建站之星后台管理如何实现高效配置？  哈尔滨网站建设策划,哈尔滨电工证查询网站？  微信小程序 五星评分(包括半颗星评分)实例代码  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  如何快速搭建高效服务器建站系统？  学校免费自助建站系统：智能生成+拖拽设计+多端适配  创业网站制作流程,创业网站可靠吗？  公司网站制作需要多少钱,找人做公司网站需要多少钱？  网站好制作吗知乎,网站开发好学吗？有什么技巧？  韩国服务器如何优化跨境访问实现高效连接？  如何通过VPS建站无需域名直接访问？  建站之星如何防范黑客攻击与数据泄露？  青岛网站建设如何选择本地服务器？  海南网站制作公司有哪些,海口网是哪家的？  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  网站插件制作软件免费下载,网页视频怎么下到本地插件？  如何批量查询域名的建站时间记录？  如何在橙子建站中快速调整背景颜色？  如何在IIS7中新建站点？详细步骤解析  如何在云虚拟主机上快速搭建个人网站？  ,网站推广常用方法？  建站之星CMS五站合一模板配置与SEO优化指南  如何快速搭建高效香港服务器网站？  c# Task.ConfigureAwait(true) 在什么场景下是必须的  个人摄影网站制作流程,摄影爱好者都去什么网站？  如何选择高效响应式自助建站源码系统？  网站图片在线制作软件,怎么在图片上做链接？  如何在建站主机中优化服务器配置？  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  建站之星如何通过成品分离优化网站效率？  网站制作公司,橙子建站是合法的吗？  专业网站制作企业网站,如何制作一个企业网站，建设网站的基本步骤有哪些？  大学网站设计制作软件有哪些,如何将网站制作成自己app？  网站制作的步骤包括,正确网址格式怎么写？  大连网站设计制作招聘信息,大连投诉网站有哪些？  平台云上自助建站如何快速打造专业网站？  免费网站制作appp,免费制作app哪个平台好？  C++中的Pimpl idiom是什么，有什么好处？（隐藏实现）