Android开发学习笔记：浅谈Tab选项卡

Tab选项卡是一个非常方便的组件。

一.使用Tab组件的步骤：

1.在布局文件中使用FrameLayout列出Tab组件以及Tab中的内容组件

2.Activity要继承TabActivity

3.调用TabActivity的getTabHost( )方法来获得TabHost对象

4.通过TabHost创建Tab选项

二.实现不同Tab里面的内容有两种方式：

1.切换不同的Tab时候，不同Tab里面的内容在同一个Activity显示，主要是通过修改布局文件里面的id来实现的。下面是一个具体的例子：

MainActivity.java

package com.android.tab.activity;

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

public class MainActivity extends TabActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
         //获得TabHost对象
        TabHost tah = getTabHost();

        // from(this)从TabActivity获取LayoutInflater
        // R.layout.main 存放Tab布局
        // 通过TabHost获得存放Tab标签页内容的FrameLayout
        // 是否将inflate 加到根布局元素上
        LayoutInflater.from(this).inflate(R.layout.main, tah.getTabContentView(), true);

        //设置Tab标签的内容和显示内容
        tah.addTab(tah.newTabSpec("tab1").setIndicator("图片1").setContent(R.id.TextView01));
        tah.addTab(tah.newTabSpec("tab2").setIndicator("图片2").setContent(R.id.TextView02));
        tah.addTab(tah.newTabSpec("tab3").setIndicator("图片3").setContent(R.id.TextView03));
    }
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/FrameLayout01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
    <TabHost
        android:id="@+id/TabHost01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <TextView
        android:id="@+id/TextView01"
        android:background="@drawable/pic1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <TextView
        android:id="@+id/TextView02"
        android:background="@drawable/pic2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <TextView
        android:id="@+id/TextView03"
        android:background="@drawable/pic3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</FrameLayout>

效果图：

 1.切换不同的Tab时候，不同Tab里面的内容在不同的Activity显示

 先创建三个类FirstActivity.java，SecondActivity.java，ThirdActivity.java，都是继承Activity

FirstActivity.java

package com.android.tabtest.activity;

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

public class FirstActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       TextView textview = new TextView(this);
       textview.setText("这是Tab1");
       setContentView(textview);
    }
}

SecondActivity.java

package com.android.tabtest.activity;

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

public class SecondActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView textview = new TextView(this);
        textview.setText("这是Tab2");
        setContentView(textview);
    }

}

ThirdActivity.java

package com.android.tabtest.activity;

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

public class ThirdActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           TextView textview = new TextView(this);
           textview.setText("这是Tab3");
           setContentView(textview);
        }

}

在layout文件夹中对main.xml进行修改

<?xml version="1.0" encoding="utf-8"?>
<TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent"
    android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp"
            />
    </LinearLayout>
</TabHost>

新建一个测试Tab的类TabDemo.java，继承于TabActivity类

package com.android.tabtest.activity;

import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class TabDemo extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);//这里使用了上面创建的xml文件（Tab页面的布局）
        Resources res = getResources(); // Resource object to get Drawables
        TabHost tabHost = getTabHost();  // The activity TabHost
        TabSpec spec;
        Intent intent;  // Reusable Intent for each tab

      //第一个Tab
        intent = new Intent(this,FirstActivity.class);//新建一个Intent用作Tab1显示的内容
        spec = tabHost.newTabSpec("tab1")//新建一个 Tab
        .setIndicator("Tab1", res.getDrawable(android.R.drawable.ic_media_play))//设置名称以及图标
        .setContent(intent);//设置显示的intent，这里的参数也可以是R.id.xxx
        tabHost.addTab(spec);//添加进tabHost

        //第二个Tab
        intent = new Intent(this,SecondActivity.class);//第二个Intent用作Tab1显示的内容
        spec = tabHost.newTabSpec("tab2")//新建一个 Tab
        .setIndicator("Tab2", res.getDrawable(android.R.drawable.ic_menu_edit))//设置名称以及图标
        .setContent(intent);//设置显示的intent，这里的参数也可以是R.id.xxx
        tabHost.addTab(spec);//添加进tabHost

       //第三个Tab
        intent = new Intent(this,SecondActivity.class);//第二个Intent用作Tab1显示的内容
        spec = tabHost.newTabSpec("tab2")//新建一个 Tab
        .setIndicator("Tab3", res.getDrawable(android.R.drawable.ic_menu_help))//设置名称以及图标
        .setContent(intent);//设置显示的intent，这里的参数也可以是R.id.xxx
        tabHost.addTab(spec);//添加进tabHost

        tabHost.setCurrentTab(0);//设置当前的选项卡,这里为Tab1
    }
}

在AndroidManifest.xml里加入9~29行的声明代码

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.android.tabtest.activity"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="10" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
    <activity android:name=".TabDemo"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
    </activity>
    <activity android:name=".FirstActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
    </activity>
    <activity android:name=".SecondActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
    </activity>
    </application>
</manifest>

效果图：