Android应用开发学习笔记之选项卡

作者：刘昊昱

博客：http://blog.csdn.net/liuhaoyutz



在应用中使用选项卡，可以使复杂的布局变得简洁清晰。本文我们通过一个例子来学习Android选项卡的用法，下图是该例子的运行效果：



我们先来看主布局文件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="fill_parent"  
    android:layout_height="fill_parent">  
    <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">  
        </FrameLayout>  
    </LinearLayout>  
</TabHost>

选项卡主要由TabHost、TabWidget、FrameLayout3个组件组成，三者缺一不可，想象一下选项卡的特点，多个卡重叠在一起，所以用FrameLayout即帧布局是必要的。另外需要注意的是TabHost、TabWidget、FrameLayout三个组件的android:id必须使用系统默认的名称，而不能自己随意定义，否则会出错。
接下来我们要看主Activity文件：

package com.liuhaoyu;

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

public class MainActivity extends Activity {
	private TabHost tabHost;
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        tabHost=(TabHost)findViewById(android.R.id.tabhost);
        tabHost.setup();
        LayoutInflater inflater = LayoutInflater.from(this);
        inflater.inflate(R.layout.tab1, tabHost.getTabContentView());  
        inflater.inflate(R.layout.tab2, tabHost.getTabContentView());
        inflater.inflate(R.layout.tab3, tabHost.getTabContentView());
        tabHost.addTab(tabHost.newTabSpec("FriendTab")
        		.setIndicator("Friend")
        		.setContent(R.id.LinearLayout01));
        tabHost.addTab(tabHost.newTabSpec("StrangerTab")
        		.setIndicator("Stranger")
        		.setContent(R.id.LinearLayout02));
        tabHost.addTab(tabHost.newTabSpec("BlacklistTab")
        		.setIndicator("Blacklist")
        		.setContent(R.id.LinearLayout03));
    }
}

首先找到TabHost，并调用TabHost.setup函数进行初始化。然后先把tab1,tab2,tab3三个布局实例化，因为这三个布局与主布局main.xml是独立的，所以我们必须手动实例化这三个布局。最后调用TabHost.addTab将标签页加入到TabHost中。
res/layout/tab1.xml内容如下：

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01" 
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
	    
	<ListView 
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:entries="@array/friends"/>
	    
</LinearLayout>

res/layout/tab2.xml内容如下：

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout02" 
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

	<ListView 
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:entries="@array/strangers"/>
	    
</LinearLayout>

res/layout/tab3.xml内容如下：

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout03" 
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

	<ListView 
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:entries="@array/blacklist"/>
	    
</LinearLayout>

数组文件res/values/people.xml内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="friends">
    	<item>friend A</item>
    	<item>friend B</item>
    	<item>friend C</item>
    	<item>friend D</item>
    	<item>friend E</item>
    	<item>friend F</item>
    	<item>friend G</item>
    	<item>friend H</item>
    	<item>friend I</item>
    	<item>friend J</item>
    	<item>friend K</item>
    	<item>friend L</item>
    	<item>friend M</item>
    </string-array>
    
    <string-array name="strangers">
    	<item>stranger A</item>
    	<item>stranger B</item>
    	<item>stranger C</item>
    	<item>stranger D</item>
    	<item>stranger E</item>
    	<item>stranger F</item>
    	<item>stranger G</item>
    	<item>stranger H</item>
    	<item>stranger I</item>
    	<item>stranger J</item>
    	<item>stranger K</item>
    	<item>stranger L</item>
    	<item>stranger M</item>
    </string-array>
    
    <string-array name="blacklist">
    	<item>black A</item>
    	<item>black B</item>
    	<item>black C</item>
    	<item>black D</item>
    	<item>black E</item>
    	<item>black F</item>
    	<item>black G</item>
    	<item>black H</item>
    	<item>black I</item>
    	<item>black J</item>
    	<item>black K</item>
    	<item>black L</item>
    	<item>black M</item>
    </string-array>
    
</resources>