Tab Layout 之单个Activity实现

要创建一个 tabbed UI,我们需要一个TabHost和一个TabWidget。并且TabHost一定要是layout的根元素，TabHost要包含用来显示tabs的TabWidget和一个用来显示tab内容的FrameLayout.

我们可以使用两种方法来完成tab的显示内容：一种是在一个Activity中交换几个Views来显示不同的tabs，在本文介绍；另一种是利用多个Activity来显示不痛的tabs，这将在下一篇介绍！两种方式可自行选择，但建议选择多个Activity来实现，这样便于管理UI，可实现较复杂应用！

我们这里用一个Activity实现，实现3个tabs切换，每个tab利用一个TextView来显示不同的内容！

现在布局文件中添加需要的组件，具体如下：

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/FrameLayout01" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TabHost android:id="@+id/TabHost" android:layout_width="wrap_content" android:layout_height="wrap_content" > <TextView android:id="@+id/FirstTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="First Tab"/> <TextView android:id="@+id/SecondTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Second Tab"/> <TextView android:id="@+id/ThirdTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Third Tab"/> </TabHost> </FrameLayout> FrameLayout元素可以设置ID属性，TabHost可以通过这个ID来获取到FrameLayout。

然后，再java文件中添加如下代码：

public class TabhostActivity extends TabActivity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TabHost host = this.getTabHost(); LayoutInflater.from(this).inflate(R.layout.main, host.getTabContentView(), true); host.addTab(host.newTabSpec("First").setIndicator("First Tab").setContent(R.id.FirstTextView)); host.addTab(host.newTabSpec("Second").setIndicator("Second Tab").setContent(R.id.SecondTextView)); host.addTab(host.newTabSpec("Third").setIndicator("Third Tab").setContent(R.id.ThirdTextView)); } }

我们首先通过getTabHost()函数来获取这个context的TabHost，然后通过TabHost的addtab()函数来添加我们的3个tabs，并通过TabSpec()来定义每个tab的属性，我们这里分别设为first、second和third。通过调用setIndicator()来设置每个tab的的显示(可以是文字或者图片),最后是用setContent来设置每个tab的显示内容，我们这里设置为之前定义的的3个TextView.

这样我们便实现了自己的Tab Layout!