Android中的切换卡TabWidget布局简介

切换卡由TabHost作为根元素，包含TabWidget和FrameLayout两个子元素，TabWidget表示切换卡中的点击标签，FrameLayout(帧布局)中包含切换卡中需要显示的内容，所有想要显示的不同内容都放在同一个帧布局中。其中TabHost、TabWidget、FrameLayout必须为它们指定Android预设的id：tabhost,tabs,tabcontent(很奇怪的设定)，帧布局中控件也需要自定义id。

布局文件如下

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.briup.tabwidget.MainActivity" >

    <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" >

            <TextView
                android:id="@+id/tv1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="切换卡1" />

            <TextView
                android:id="@+id/tv2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="切换卡2" />

            <TextView
                android:id="@+id/tv3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="切换卡3" />
        </FrameLayout>
    </LinearLayout>

</TabHost>

切换卡的布局写完了，但并不能直接使用，里面有多少个切换卡，是怎样的切换卡需要使用Java代码加入和设定，而且Java类必须继承一个过时的TabActivity。代码如下

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

@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity {
//划横线，过时了，使用者不能说没有，不多
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		TabHost tbHost = getTabHost();//不引用id直接获取切换卡外布局，解释了为何用Android自带的id
		TabSpec tab1 = tbHost.newTabSpec("tab1")//tag，暂不管，内容可随意
				.setIndicator("Tab1")//设定点击标签文字
				.setContent(R.id.tv1);//设定切换卡内容
		TabSpec tab2 = tbHost.newTabSpec("tab2").setIndicator("Tab2").setContent(R.id.tv2);
		TabSpec tab3 = tbHost.newTabSpec("tab3").setIndicator("Tab3").setContent(R.id.tv3);
		tbHost.addTab(tab1);//内容加入切换卡
		tbHost.addTab(tab2);
		tbHost.addTab(tab3);
	}
}

效果如下