Android应用开发基础篇（4）TabHost（选项卡）

一、概述

       TabHost是一种用来显示标签的组件，不清楚？看一下来电通这个应用就知道了。这个组件用起来与其他组件不太一样，它需要继承TabActivity这个类，还有它的布局文件与我们平时用的也有些不一样。

二、要求

       实现一个具有三个标签的选项卡，每个标签使用不同的布局作为内容，当切换不同的标签时向用户发出提示。

三、实现

     声明：这个应用需要用到前面一篇(基础篇（3）的相关内容)。

     新建工程MyUI（这个名字随便取），修改/res/layout/main.xml文件，添加3个LinearLayout作为3个标签的布局。

完整的main.xml文件如下，注意第2行不再是使用LinearLayout，而是使用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_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:id="@+id/tab1"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <ListView
            android:id="@+id/list1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
17             >

        </ListView>
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >

    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab2"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <TextView
            android:id="@+id/other"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="这是一个选项卡应用"
            android:textSize="20px"
            android:textColor="#FF0000"
            android:gravity="center_horizontal"
            />

    </LinearLayout>

</TabHost>

接着新建一个Adapter1.java文件，编写一个继承BaseAdapter的Adapter1类，比较简单，可以参看基础篇（3）的相关内容，完整的Adapter1.java文件如下：

package com.nan.ui;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;


public class Adapter1 extends BaseAdapter
{
    private Context mContext;
    private int num;

    Adapter1(Context c , int n)
    {
        mContext = c;
        num = n;
    }

    @Override
    public int getCount()
    {
        // TODO Auto-generated method stub
        return num;
    }

    @Override
    public Object getItem(int arg0)
    {
        // TODO Auto-generated method stub
        return arg0;
    }

    @Override
    public long getItemId(int arg0)
    {
        // TODO Auto-generated method stub
        return arg0;
    }

    @Override
    public View getView(int arg0, View arg1, ViewGroup arg2)
    {
        // TODO Auto-generated method stub

        arg1 = LayoutInflater.from(mContext).inflate(R.layout.tab1, null);
        TextView t1 = (TextView)arg1.findViewById(R.id.name);
        t1.setText("李小明");
        t1.setTextColor(Color.BLUE);
        TextView t2 = (TextView)arg1.findViewById(R.id.num);
        t2.setText("13709394939");

        return arg1;
    }

}

我们看到上面的第49行代码中使用了tab1.xml布局文件，因此新建一个tab1.xml文件，在里面添加2个TextView，如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
>

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <TextView
        android:id="@+id/num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>

继续创建一个Activity1.java文件，里面的内容就是我们平时用到的最基本的东西，不解析，内容如下：

package com.nan.ui;

import android.app.Activity;
import android.os.Bundle;


public class Activity1 extends Activity
{

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity1);

    }

}

为上面这个文件创建一个名为activity1.xml布局文件，里面就只有1个TextView，如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
>

    <TextView
        android:id="@+id/mtextview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="这是一个Activity"
        android:textSize="20px"
        android:gravity="center_horizontal"
        android:textColor="#0000FF"
        />

</LinearLayout>

还没完，最后就是这篇文章的重头戏了----MyUIActivity.java文件。该文件里面的MyUIActivity类继承TabActivity类，

首先实例化TabHost对象，接着使用main.xml作为布局文件，为3个标签设置要显示的内容，最后是设置标签切换动作的监听，用DisplayToast()函数来显示当前切换到的是第几个标签。有详细注释，请看如下完整的代码：

package com.nan.ui;


import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.ListView;
import android.widget.TabHost;
import android.widget.Toast;
import android.widget.TabHost.OnTabChangeListener;


public class MyUIActivity extends TabActivity
{
    //声明TabHost对象
    private TabHost mTabHost;

    private Adapter1 ad1;
    private ListView ListView1;
    private Intent mIntent;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main);

        //设置ListView中显示4行内容
        ad1 = new Adapter1(MyUIActivity.this,4);

        mIntent = new Intent();
        //设置要启动的Activity
        mIntent.setClass(MyUIActivity.this, Activity1.class);

        //取得TabHost对象
        mTabHost = getTabHost();
        //使用TabHost布局
        LayoutInflater.from(this).inflate(R.layout.main, mTabHost.getTabContentView(), true);
        //设置第一个标签的内容（使用ListView作为内容）
        mTabHost.addTab(mTabHost.newTabSpec("1").setIndicator("列表", null).setContent(R.id.tab1));
        //设置第二个标签的内容（使用Activity作为内容）
        mTabHost.addTab(mTabHost.newTabSpec("2").setIndicator("页面", null).setContent(mIntent));
        //设置第三个标签的内容（使用简单的线性布局作为内容）
        mTabHost.addTab(mTabHost.newTabSpec("3").setIndicator("其他", null).setContent(R.id.tab2));

        ListView1 = (ListView)mTabHost.findViewById(R.id.list1);
        //设置ListView要显示的内容
        ListView1.setAdapter(ad1);

        //标签切换事件处理
        mTabHost.setOnTabChangedListener(new OnTabChangeListener()
        {
            // TODO Auto-generated method stub
            @Override
            public void onTabChanged(String tabId)
            {
                //自己添加处理事件
                if(tabId=="1")
                {
                    DisplayToast("Tab1");
                }
                else if(tabId=="2")
                {
                    DisplayToast("Tab2");
                }
                else
                {
                    DisplayToast("Tab3");
                }
            }
        });
    }

    private void DisplayToast(String s)
    {
        Toast.makeText(MyUIActivity.this, s, Toast.LENGTH_SHORT).show();
    }

}

最后，在AndroidManifest.xml文件下声明多一个activity，如下：

<activity
android:name=".Activity1"
    >
</activity>

好了，运行该程序，一开始的界面如下：

切换到第二个选项卡，如下：

切换到第三个选项卡，如下：

OK，完成。