当前位置：移动技术网 > 移动技术>移动开发>Android > Android Tab标签的使用基础

Android Tab标签的使用基础

2019年07月24日 | 移动技术网移动技术 | 我要评论

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 OpenCV（三十一）：图像形态学

简介形态学（morphology）一词通常表示生物学的一个分支，它是研究动植物的形态和结构的学科。而我们图像处理... [阅读全文]
Espresso的入门及使用

Espresso的入门及使用什么是Espresso？Espresso API文档使用依赖配置实例展示什么是Esp... [阅读全文]
写给自己的第一篇博客

写给自己的第一篇博客前言写给在本科电气工程及其自动化专业毕业后申请计算机科学与技术第二学士学位的自己！这是我第一... [阅读全文]
Android自定义TextBanner实现自动滚动

本文实例为大家分享了android自定义textbanner实现自动滚动的具体代码，供大家参考，具体内容如下1、textbannerpackage com.ex... [阅读全文]
阿里云原生编程挑战赛--实现一个 Serverless 计算服务调度系统

题目简介一个简化的Faas系统分为APIServer，Scheduler，ResourceManager，Nod... [阅读全文]
Creator | 2.3.0及后续版本Android Studio编译报错：程序包xxx不存在

获取更多笔记和源码公众号:CocosCreator笔记在2.3.0正式版的官方介绍中有这么一项（是不是很眼熟的... [阅读全文]
android文件选择器filePicker

github上搜了一圈，没有找到特别符合的，没办法自己写了一个，现在上传到了github：https://git... [阅读全文]
5+ API，APP更新逻辑部分

let _this = this;let version = this.android.version.spli... [阅读全文]
RecycleView基本使用

1.布局文件.xml <android.support.v7.widget.RecyclerView ... [阅读全文]
Android连接不上服务器com.android.org.bouncycastle.jce.excption.ExtCertPathValidatorExcption

在一台新设备上运行软件，怎么都连不上网，还是远程操作，只能toast出日志发过来看，日志如下：com.andro... [阅读全文]

网友评论


验证码：

Android Tab标签的使用基础

2019年07月24日 | 移动技术网移动技术 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论