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

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项目Tab标签

    1. **Viewpager**：`ViewPager`组件是实现Tab标签滑动切换的基础，它可以展示一个可以左右滑动的页面集合。每个页面代表一个Tab的内容，用户可以通过滑动来切换不同页面。 2. **TabLayout**：`TabLayout`是Google...

    android Tab标签的使用

    在Android应用开发中，Tab标签通常用于实现多页面间的切换，提供了一种直观且易于使用的用户界面。Tab标签设计能够帮助用户在多个相关的视图之间快速导航，是移动应用中常见的交互模式。本教程将详细讲解如何在...

    Android应用源码之(Tab分页式菜单)-IT计算机-毕业设计.zip

    5. **TabLayout**：这是Material Design组件之一，用于展示Tab标签。它可以和`ViewPager`配合使用，当用户点击不同的Tab时，`ViewPager`会自动切换到对应的页面。 6. **Fragment**：在Android应用中，`Fragment`是...

    Android底部标签页的代码例子

    在Android应用开发中，底部标签页（Bottom Navigation）是一种常见的用户界面设计，它允许用户在应用的几个主要功能之间快速切换。本示例提供三种不同的方法来实现底部标签页，包括使用`TabActivity`、`...

    Android fleep滑动切换tab（切换带动画）.zip

    总的来说，"Android fleep滑动切换tab（切换带动画）"这个源码实例涵盖了Android中实现滑动Tab的基础和进阶技巧，包括`ViewPager`、`TabLayout`的使用，以及自定义动画效果。通过学习和理解这段代码，开发者可以更好...

    Android-Android下带有排序功能的Tab标签

    在Android应用开发中，Tab标签通常用于展示多个页面或视图，并允许用户通过点击不同的标签在这些页面间切换。在“Android-Android下带有排序功能的Tab标签”这个主题中，我们将探讨如何在Android应用程序中实现一个...

    android Tab选项卡

    `ViewPager`负责页面的滑动切换，而`TabLayout`则用来展示Tab标签。这种组合可以创建可滑动的Tab，提供更流畅的用户体验。`TabLayout`可以设置为固定位置，用标题颜色变化和下划线表示当前页卡，或者让标题跟随滑动...

    Android高级应用源码-android小插件tab标签大合集.zip

    在Android开发中，Tab标签是一种常见的用户界面设计元素，它用于在不同的视图或功能之间进行切换，提供了一种简洁的导航方式。本资源“Android高级应用源码-android小插件tab标签大合集.zip”显然是一个专注于...

    android 使用fragment 实现tab切换

    `TabLayout`通常放在`ViewPager`上方，用于显示Tab标签。 4. **创建FragmentPagerAdapter** `FragmentPagerAdapter`是`PagerAdapter`的一个子类，专门用于管理`Fragment`。我们需要继承`FragmentPagerAdapter`，并...

    android的tab代码

    本文将深入探讨如何在Android中实现Tab功能，包括`TabHost`的使用，以及如何将多个`Activity`绑定到Tab上。 ### 1. Android Tab 基础 在Android中，Tab功能通常通过`TabHost`和`TabWidget`组件来实现。`TabHost`是...

    android小插件tab标签大合集-IT计算机-毕业设计.zip

    在Android应用开发中，"tab标签"是一种常见的用户界面...通过深入研究这个“android小插件tab标签大合集”，不仅能够提升你的Android编程技能，还能锻炼你的项目管理和文档编写能力，为未来的职业生涯打下坚实基础。

    Android 使用TabLayout打造滑动标签栏

    在Android开发中，TabLayout是谷歌提供的一个用于创建滑动标签栏的组件，它与ViewPager配合使用，可以轻松实现多页面间的切换，并且提供了一种优雅的方式来展示内容的多个部分。本文将深入探讨如何利用TabLayout来...

    Android ScrollableTabHost tab控件-IT计算机-毕业设计.zip

    通过这个源码示例，学生不仅可以学习到Android基础UI组件的用法，还能了解到如何进行组件扩展和自定义，这对于进行复杂应用的开发是非常有价值的。同时，这也是实际工作中解决类似问题的一个参考实例。

    Android应用源码之Tab控件使用的最简纯净Demo-IT计算机-毕业设计.zip

    TabHost是一个可以包含多个Tab标签的容器，而TabWidget则用于显示这些标签。在这个Demo中，开发者可能采用了TabHost和TabWidget来创建Tab界面，并配置了各个Tab的显示内容。 2. Fragment的使用： 为了实现每个Tab...

    android 如何在tabactivity中嵌套tab

    首先，我们需要创建一个基础的TabActivity，通过TabHost和TabWidget来定义Tab标签和内容区域。在onCreate()方法中，使用TabHost的setup()方法初始化TabHost，并添加Tab。 - **嵌套TabActivity** 要在某个Tab中...

    Android应用源码之Fragment实现tab实例 代码-IT计算机-毕业设计.zip

    在Android应用开发中，Fragment是Android SDK中的一个重要组件，它被设计用来支持多屏幕适配，使得在不同...通过学习和分析这个源码，你将能够掌握Android开发中的一些核心概念和技术，为你的毕业设计打下坚实的基础。

    Android SwipeView Demo +　Tab滑动的实现

    此外，为了实现Tab功能，我们可以使用`TabLayout`，这是Android Design Support Library的一部分。`TabLayout`可以和`ViewPager`配合，为每个页面创建标签。在布局XML文件中添加`TabLayout`： ```xml &lt;android....

    安卓FragmentTab选项卡相关-Tab控件使用的最简纯净Demo.zip

    综上所述，这个Demo提供了使用`FragmentTabHost`创建选项卡界面的基础教程，可以帮助开发者理解和实践Android中多标签页的实现。通过阅读和分析源码，我们可以深入理解`FragmentTabHost`的工作原理，从而在实际项目...

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