Android Tab标签的使用基础

2024-10-13 10:57: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多个TAB选项卡切换效果

在前一期中,我们做了悬浮头部的两个tab切换和下拉刷新效果,后来项目中要求改成三个tab,当时就能估量了一下,如果从之前的改,也不是不可以,但是要互相记住的状态就太多了,很容易出现错误.就决定重新实现一下这个效果,为此先写了一个demo,这期间项目都已经又更新了两个版本了.demo还木有变成文章. 之前的版本中是采用了一个可以下拉刷新的listview,之后在listview中添加了两个头部,并且在该布局上的上面用了一个一模一样的切换tab,如果没有看过前面版本的,可以看看前一个版本,Listv
android TabHost(选项卡)的使用方法

首先,定义TabHost的布局文件: 复制代码代码如下: <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_p
Android中实现可滑动的Tab的3种方式

1. 第一种,使用 TabHost + ViewPager 实现该方法会有一个Bug,当设置tabHost.setCurrentTab()为0时,ViewPager不显示(准确的说是加载),只有点击其他任意一个tab后才会加载. 有解的同学吼一声~~~~~~~ Activity: 复制代码代码如下: package com.swordy.demo.android.fragment; import java.util.Random; import android.os.Bundle;import
Android TabWidget切换卡的实现应用

TabWidget类似于Android 中查看电话薄的界面,通过多个标签切换显示不同内容.要实现这一效果,首先要了解TabHost,它是一个用来存放多个Tab标签的容器.每一个Tab都可以对应自己的布局,比如,电话薄中的Tab布局就是一个List的线性布局了. 要使用TabHost,首先需要通过getTabHost方法来获取TabHost的对象,然后通过addTab方法来向TabHost中添加 Tab.当然每个Tab在切换时都会产生一个事件,要捕捉这个事件需要设置TabActivity的事件监听
Android仿微信底部实现Tab选项卡切换效果

在网上看了比较多的关于Tab的教程,发现都很杂乱.比较多的用法是用TitlePagerTabStrip和ViewPaper.不过TitlePagerTabStrip有个很大的缺陷,Tab里面的内容刚进去是没有的,要滑一次才能加载出来.而且滑动的时候,Tab里面的内容位置不是固定的,滑倒最后会出现一片空白,非常不美观.虽然有其他的补救方法,但是非常的麻烦,所以我就按照自己的方法实现了一个,功能不错而且非常简单. 直接点击或者是滑动界面,都可以转到相应的页面. 效果图: 原理是用了三个按钮和View
Android TabLayout(选项卡布局)简单用法实例分析

本文实例讲述了Android TabLayout(选项卡布局)简单用法.分享给大家供大家参考,具体如下: 我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合.达到很漂亮的效果.但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在2015年的google大会上,google发布了新的Android Support Design库,里面包含了几个新的控件,其中就有一个
Android入门之ActivityGroup+GridView实现Tab分页标签的方法

在Android程序中很多客户端软件和浏览器软件都喜欢用Tab分页标签来搭建界面框架.读者也许会马上想到使用TabHost 与 TabActivity的组合,其实最常用的不是它们,而是由GridView与ActivityGroup的组合.每当用户在GridView选中一项,ActivityGroup就把该项对应的Activity的Window作为View添加到ActivityGroup所指定的容器(LinearLayout)中. 先来贴出本例运行的效果图如下: ImageAdapter是本实例的
Android开发笔记 TableLayout常用的属性介绍

TableLayout经常用到的属性有: android:collapseColumns:以第0行为序,隐藏指定的列: android:collapseColumns该属性为空时,效果如下图: 把android:collapseColumns=0,2-------------->意思是把第0和第2列去掉,如下图: android:shrinkColumns:以第0行为序,自动延伸指定的列填充可用部分: 当LayoutRow里面的控件还没有布满布局时,shrinkColumns不起作用,如下图:
android中TabHost的图标(48×48)和文字叠加解决方法

开发过程中,有时候图标稍微大点,比如48×48的时候,文字就会和图标叠加起来,解决方法如下: 复制代码代码如下: TabWidget tw = tabHost.getTabWidget(); for (int i = 0; i < tw.getChildCount(); i++) { TextView tv=(TextView)tw.getChildAt(i).findViewById(android.R.id.title); ImageView iv=(ImageView)t
Android入门之TableLayout应用解析(一)

本文初步讲述了Android中TableLayout的应用,对Android初学者有一定的学习借鉴价值.具体如下: TableLayout跟TableLayout 是一组搭配使用的布局,TableLayout置底,TableRow在TableLayout的上面,而Button.TextView等控件就在TableRow之上,另外,TableLayout之上也可以单独放控件.TableLayout是一个使用复杂的布局,最简单的用法就仅仅是拖拉控件做出个界面,但实际上,会经常在代码里使用TableL
Android TableLayout数据列表的回显清空实现思路及代码

复制代码代码如下: //数据列表的回显 public void shujuList(){ List<Customer> customerList = dao.findALL(); TableLayout tl = (TableLayout) findViewById(R.id.tlLayout); Log.i(">>>", String.valueOf(tl.getChildCount())); int j = tl.getChildCount(); i
android 选项卡(TabHost)如何放置在屏幕的底部

今天写Tab的时候由于TAB的跳转问题去查资料,倒反而发现更有趣的问题,就是如何将TAB放置在屏幕的底端. 复制代码代码如下: <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" a

Android Tab标签的使用基础

相关推荐

随机推荐