首页 > 代码库 > android学习--TabHost选项卡组件

android学习--TabHost选项卡组件

        TabHost是一种非常实用的组件,TabHost可以很方便地在窗口上放置多个标签页,每个标签页获得了一个与外部容器相同大小的组件摆放区域。在手机系统的应用类似“未接电话”、“已接电话”、“呼出电话”等。

        1 、 TabHost提供了两个方法来创建选项卡、添加选项卡

               newTabSpec(String tag)  : 创建选项卡

              addTab(TabHost.TabSpec  tabSpec) : 添加选项卡


       2、TabHost 切换选项卡触发的监听是TabHost.OnTabChangeListener



下面通过案例来熟悉TabHost

       使用TabHost的一般步骤为:

       (1)在界面布局中为TabHost定义改选项卡的内容

       (2)Activity继承TabActivity

       (3)调用TabActivity的getTabHost()方法获取TabHost对象

       (4)通过TabHost对象的方法来创建选项卡、添加选项卡


 跟着上面步骤来实现TabHost案例


(1)在界面布局中为TabHost定义改选项卡的内容,一般采用FrameLayout作为根布局,每个标签页面对应一个子节点的Layout

<!-- 这是根布局 -->
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent">
      <!-- 这是第一个Tab布局 -->
        <LinearLayout 
            android:id="@+id/widget_layout_Blue"
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:orientation="vertical" >
            <EditText 
                android:id="@+id/widget34"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" 
                android:text="EditText"
                android:textSize="18sp">
            </EditText>
            <Button 
                android:id="@+id/widget30"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:text="Button">
            </Button>
        </LinearLayout>
        
         <!-- 这是第二个Tab布局 -->
        <LinearLayout 
            android:id="@+id/widget_layout_red"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"  >
            <AnalogClock android:id="@+id/widget36"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
            </AnalogClock>
        </LinearLayout>
        
         <!-- 这是第三个Tab布局 -->
        <LinearLayout android:id="@+id/widget_layout_green"
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:orientation="vertical">
            <RadioGroup
                android:id="@+id/widget43"
                android:layout_width="166px"
                 android:layout_height="98px"
                android:orientation="vertical">
                <RadioButton android:id="@+id/widget44"
                    android:layout_width="wrap_content" 
                    android:layout_height="wrap_content"
                    android:text="男">
                </RadioButton>
                <RadioButton android:id="@+id/widget45"
                    android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                    android:text="女">
                </RadioButton>
            </RadioGroup>
        </LinearLayout>
    </FrameLayout>

(2)Activity继承TabActivity

(3)调用TabActivity的getTabHost()方法获取TabHost对象

 (4)通过TabHost对象的方法来创建选项卡、添加选项卡


package com.example.tabhost;

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

@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity
{
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		
		//获取TabHost 对象
		TabHost tabHost = getTabHost();
		//设置使用TabHost布局
		//from(this)从这个TabActivity获取LayoutInflater
		//R.layout.main 存放Tab布局
		//通过TabHost获得存放Tab标签页内容的FrameLayout
		//是否将inflate 拴系到根布局元素上
		LayoutInflater.from(this).inflate(R.layout.activity_main,
				tabHost.getTabContentView(), true);
		
		//添加第一个标签页
		//setIndicator  添加表体,可以是view
		//添加tab内容   布局
		tabHost.addTab(tabHost.newTabSpec("tab1")
			.setIndicator("TAB1")
			.setContent(R.id.widget_layout_Blue)); 
		
		//添加第二个标签页
		tabHost.addTab(tabHost.newTabSpec("tab2")
			//在标签标题上放置图标
			.setIndicator("TAB2")
			.setContent(R.id.widget_layout_red)); 
		
		//添加第三个标签页
		tabHost.addTab(tabHost.newTabSpec("tab3")
			.setIndicator("TAB3")
			.setContent(R.id.widget_layout_green)); 	
		
		//添加监听
		tabHost.setOnTabChangedListener(new OnTabChangeListener() {
			
			@Override
			public void onTabChanged(String tabId) {
			   Log.i("Tab", tabId);
				
			}
		});
	}
}

运行后,效果如下: