Android[初级教程]第十一章 TabHost控件

这一章我们学习TabHost控件,唐僧师徙四个人每个人都各有自己的本领,那放在一起显示肯定不好看,这下我们就用TabHost来分开显示,每个都是一个单独的视图,先上图:

大家看到了每一个都是一个个人信息展示,好,我们来看一下main.xml代码:

<?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="match_parent"
	android:layout_height="match_parent">
	<LinearLayout android:layout_width="match_parent"
		android:id="@+id/linearLayout1" android:layout_height="match_parent"
		android:orientation="vertical">
		<TabWidget android:layout_width="match_parent"
			android:layout_height="wrap_content" android:id="@android:id/tabs"></TabWidget>
		<FrameLayout android:layout_width="match_parent"
			android:layout_height="match_parent" android:id="@android:id/tabcontent">
			<LinearLayout android:layout_width="match_parent"
				android:orientation="vertical" android:layout_height="match_parent"
				android:id="@+id/tab1">

				<ImageView android:layout_width="wrap_content" android:id="@+id/imageView1"
					android:layout_height="wrap_content" android:src="@drawable/tangseng"
					android:layout_gravity="center"></ImageView>
				<TextView android:text="唐僧会" android:layout_width="match_parent"
					android:layout_height="wrap_content" android:textSize="24dp" />
				<ListView android:id="@+id/listView1" android:entries="@array/tangseng"
					android:layout_height="wrap_content" android:layout_width="match_parent"></ListView>

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

				<ImageView android:layout_width="wrap_content" android:id="@+id/imageView1"
					android:layout_height="wrap_content" android:src="@drawable/wukong"
					android:layout_gravity="center"></ImageView>
				<TextView android:text="孙悟空会" android:layout_width="match_parent"
					android:layout_height="wrap_content" android:textSize="24dp" />
				<ListView android:id="@+id/listView2" android:entries="@array/wukong"
					android:layout_height="wrap_content" android:layout_width="match_parent"></ListView>

			</LinearLayout>
			<LinearLayout android:layout_width="match_parent"
				android:orientation="vertical" android:layout_height="match_parent"
				android:id="@+id/tab3">

				<ImageView android:layout_width="wrap_content" android:id="@+id/imageView1"
					android:layout_height="wrap_content" android:src="@drawable/bajie"
					android:layout_gravity="center"></ImageView>
				<TextView android:text="猪八戒会" android:layout_width="match_parent"
					android:layout_height="wrap_content" android:textSize="24dp" />
				<ListView android:id="@+id/listView3" android:entries="@array/bajie"
					android:layout_height="wrap_content" android:layout_width="match_parent"></ListView>

			</LinearLayout>

			<LinearLayout android:layout_width="match_parent"
				android:orientation="vertical" android:layout_height="match_parent"
				android:id="@+id/tab4">

				<ImageView android:layout_width="wrap_content" android:id="@+id/imageView1"
					android:layout_height="wrap_content" android:src="@drawable/shaseng"
					android:layout_gravity="center"></ImageView>
				<TextView android:text="沙和尚会" android:layout_width="match_parent"
					android:layout_height="wrap_content" android:textSize="24dp" />
				<ListView android:id="@+id/listView4" android:entries="@array/shaseng"
					android:layout_height="wrap_content" android:layout_width="match_parent"></ListView>

			</LinearLayout>
		</FrameLayout>
	</LinearLayout>
</TabHost>

这里面主要是定义了TabHost控件,这个TabHost控件ID是必须设成android:id="@android:id/tabhost"这个的,不然运行的时候肯定会报错.接下来是TabWidget控件,也必须将ID定义成android:id="@android:id/tabs",最后就是内容了FrameLayout的ID也必须设成android:id="@android:id/tabcontent",三个条件,一个都不能少,不然你肯定是运行不了的.

好,我们接下来看一下java源代码:

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

public class TabHostDemoActivity extends TabActivity
{
	private String[] item = { "唐僧", "孙悟空 ", "猪八戒", "沙和尚" };
	private int[] tab = {R.id.tab1, R.id.tab2, R.id.tab3, R.id.tab4};
	
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main1);

		TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);
		
		int len = item.length;
		for(int i= 0; i < len; i++ ){
			tabHost.addTab(tabHost.newTabSpec(item[i]).setIndicator(item[i]).setContent(tab[i]));
		}
		

	}
}

哇,这么少代码?呵呵,其实我将数据放到values/string底下了,接下来是string.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, ButtonDemoActivity!</string>
    <string name="app_name">ButtonDemo</string>
    <string-array name="tangseng">
        <item>念紧箍咒</item>
        <item>说阿弥陀佛</item>
    </string-array>
    <string-array name="wukong">
        <item>七十二变</item>
        <item>打妖精</item>
        <item>腾云驾雾</item>
    </string-array>
    <string-array name="bajie">
        <item>偷懒</item>
        <item>睡觉</item>
    </string-array>
    <string-array name="shaseng">
        <item>挑担子</item>
    </string-array>
</resources>

我直接将ListView控件通过android:entries="@array/tangseng"将定义的数组显示出来,所以在主java代码中才会用了很少的java代码,但真实应用,数据肯定不会是已知的,肯定需要通过数据库或其他方式来获取的,这一章我们主要学习TabHost怎么运用.看,唐僧师徙四人的能力一览无遗了。