作者:刘昊昱
博客: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>