`
yanghaoli
  • 浏览: 284622 次
社区版块
存档分类
最新评论

Android Tab标签的使用基础

 
阅读更多

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 
<?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;
    }

}

 

 

参考资料

官方Reference：

TabHost

TabWidget

ApiDemos:

com.example.android.apis.view包下：

Tabs1.java~Tabs6.java

android tabHost布局之一 不继承TabActivity并以布局文件进行布局：

http://blog.csdn.net/chenzheng_java/article/details/6208020

 

1
顶
1
踩
分享到：
| java.lang.IllegalAccessException: access ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Android应用中使用ViewPager和ViewPager指示器来制作Tab标签

    我们先得去Github上面下载这个库，下载地址：https://github.com/JakeWharton/Android-ViewPagerIndicator，下载下来之后你可以运行例子，来看看我们需要什么样的效果，然后在此基础上改成我们自己想要的效果 ...

    Android实现网易严选标签栏滑动效果

    仔细分析下，需要在简单标签栏的基础上实现以下逻辑： 画出下划线。 监听手动滑动页面事件，实时更新下划线位置。 切换标签时，开始下划线滑动的动画，并判断是否要同时滑动标签栏。 我做了一个样例程序，其中...

    疯狂Android讲义源码

    　5.3 使用Intent创建Tab页面 211 　5.4 本章小结 212 　第6章 Android应用的资源 213 　6.1 资源的类型及存储方式 214 　6.1.1 资源的类型以及存储方式 214 　6.1.2 使用资源 216 　6.2 使用字符串、颜色、 　尺寸...

    android开发入门与实战(下)

    7.3.19 标签(Tab)介绍与应用 7.4 友好的菜单——menu介绍与实例 7.4.1 实例操作演示 7.4.2 实例编程实现 7.5 Android应用的灵魂——Intent和Activity介绍与实例 7.5.1 实例操作演示 7.5.2 实例编程实现 7.6 用好列表...

    《Google Android开发入门与实战》.pdf

    　本书内容上涵盖了用android开发的大部分场景，从android基础介绍、环境搭建、sdk介绍、market使用，到应用剖析、组件介绍、实例演示等方面。从技术实现上，讲解了5个android平台下的完整综合实例及源代码分析，...

    android开发入门与实战(上)

    7.3.19 标签(Tab)介绍与应用 7.4 友好的菜单——menu介绍与实例 7.4.1 实例操作演示 7.4.2 实例编程实现 7.5 Android应用的灵魂——Intent和Activity介绍与实例 7.5.1 实例操作演示 7.5.2 实例编程实现 7.6 用好列表...

    android 基础组件

    包含了比较多的组件，例如：选项卡、多选框、时间选择、星星投票、网络视图、进度条、tab标签等

    Google.Android开发入门与实战

    　《Android开发入门与实战》内容上涵盖了用Android开发的大部分场景，从Android基础介绍、环境搭建、SDK介绍、Market使用，到应用剖析、组件介绍、实例演示等方面。从技术实现上，讲解了5个Android平台下的完整综合...

    疯狂Android讲义.part2

    5.3 使用Intent创建Tab页面 211 5.4 本章小结 212 第6章 Android应用的资源 213 6.1 资源的类型及存储方式 214 6.1.1 资源的类型以及存储方式 214 6.1.2 使用资源 216 6.2 使用字符串、颜色、 尺寸资源 217 6.2.1 ...

    疯狂Android讲义.part1

    5.3 使用Intent创建Tab页面 211 5.4 本章小结 212 第6章 Android应用的资源 213 6.1 资源的类型及存储方式 214 6.1.1 资源的类型以及存储方式 214 6.1.2 使用资源 216 6.2 使用字符串、颜色、 尺寸资源 217 6.2.1 ...

    Android提高之自定义Menu(TabMenu)实现方法

    一般使用过UCWEB-Android版的人都应该对其特殊的menu有一定的印象，把menu做成Tab-Menu(支持分页的Menu)，可以容纳比Android传统的menu更丰富的内容(Android的menu超过6项则缩略在[更多]里)，本文参考网上的例子的...

    Google Android开发入门与实战的代码

    7.3.19　标签(Tab)介绍与应用　101 7.4　友好的菜单——menu介绍与实例　102 7.4.1　实例操作演示..　103 7.4.2　实例编程实现　103 7.5　Android应用的灵魂——Intent和Activity介绍与实例　106 7.5.1　实例...

    Tab Layout 之多个Activity实现

    这个是使用多个Activity实现安卓平台的按标签浏览，比较简单基础的例子。

    Android聊天项目D3Xmpp.zip

    使用fragments包住四个TAB页面MapActivity—- 地图页. 从聊天页的位置跳到此页面。必须参数lat，lonMyRoomActivity—- 我的群组页NewFriendActivity—- 我的新好友申请页PicSrcPickerActivity—- 弹出选择选图方式。...

    Telegram Messenger (Pin Tab)-crx插件

    -多数据中心基础架构和加密，Telegram更快，更安全。 -最重要的是，Telegram是免费的，并且将保持免费。 -许多在线彩池，组和频道可免费加入。 固定标签功能：-固定标签很小。 -固定标签没有关闭按钮。 这样就不会...

    筛选菜单库DropDownMenu­_.zip

     * @param tabTexts tab标签字符串集合  * @param contentView 主页面view  * @param viewDatas 为数据源hashmap  * KEY对应TYPE（上文常量）  * VALUE对应数据源(非TYPE_CUSTOM--&gt;string[]或...

    Google Chrome 6.0.451.0 Dev 版(一个由Google公司开发的网页浏览器)

    　“沙盒小组”表示他们“使用了现有的执行程序限制，并让这些限制变成一座监狱”例如在其中一个标签页运作的恶意软件，将无法窃取信用卡号码、干扰鼠标运作，或告诉系统在启动时执行某个程序，并且恶意软件会在标签...

Magicbox
Global site tag (gtag.js) - Google Analytics