Android项目学习—Tabhost用法详解



控件TabHost的功能和web技术中的“选项卡”控件显示的效果一样，都是用最小的空间显示更多的数据。

一.Tabhost的相关介绍

1. TabHost常用组件

TabWidget : 该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡;

TabSpec: 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中;

创建选项卡 : newTabSpec(String tag), 创建一个选项卡;

添加选项卡 : addTab(tabSpec);

2.Tabhost的使用步骤

a. 定义布局 : 在XML文件中使用Tabhost组件, 并在其中定义一个FrameLayout选项卡内容;

b. 继承TabActivity: 显示选项卡组件的Activity继承TabActivity;

3.创建添加选项卡的方法：

 newTabSpec():创建选项卡

 addTab():添加选项卡

二.activity方法

1.获取Tabhost

调用getHost()方法获取TabHost组件的方法的前提是在布局文件中, 但是不许设置了android自带的id android:id="@android:id/tabhost" 才可以。

2.创建选项卡

调用TabHost组件的newTabHost(tag), 其中的tag是字符串。

XML布局文件：

<?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"
    >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            />
    </LinearLayout>
    <TabHost
        android:layout_width="match_parent" android:layout_height="match_parent"
        android:id="@android:id/tabhost"
        android:layout_weight="1"
        ><!--引用android系统已有的id-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"></TabWidget>
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <!--定义第一个标签页的内容-->
                <LinearLayout
                    android:id="@+id/tab01"
                    android:orientation="vertical"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent">
                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:text="消息页面"
                        android:textSize="30sp"
                        />
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/tab02"
                    android:orientation="vertical"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent">
                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:text="班级页面"
                        android:textSize="30sp"
                        />
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/tab03"
                    android:orientation="vertical"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent">
                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:text="我的页面"
                        android:textSize="30sp"
                        />
                </LinearLayout>
            </FrameLayout>

        </LinearLayout>

    </TabHost>

Activity主界面代码 : 

package xiaocool.net.my;

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

/**
 * Created by MRYU on 2015/3/7.
 */
public class XiaoXi extends TabActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.xiaoxi);
        //获取tabhost组件
        TabHost tabHost=getTabHost();
        //创建第一个Tab页
        TabHost.TabSpec tab1=tabHost.newTabSpec("tab1")
                .setIndicator("班级")//设置标题
                .setContent(R.id.tab01);
        //添加第一个tab页
        tabHost.addTab(tab1);
        TabHost.TabSpec tab2=tabHost.newTabSpec("tab2")
                .setIndicator("消息")//设置标题
                .setContent(R.id.tab02);
        //添加第一个tab页
        tabHost.addTab(tab2);

        TabHost.TabSpec tab3=tabHost.newTabSpec("tab3")
                .setIndicator("我")//设置标题
                .setContent(R.id.tab03);
        //添加第一个tab页
        tabHost.addTab(tab3);
    }
}

效果图：