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!