Winner? Loser? No matter

這是一個簡單的功能，android把它做的很好用。

必須要伴隨著一個xml layout檔案。

其中有兩個名稱，有關 TabWidget 以及 content，

已經定義在Android.R.id裡頭，分別是

Android.R.id.tabs

Android.R.id.tabcontent

我們直接把 View 連結，就可以很方便的使用這個功能。

經由我拙劣的圖示之後，大概可以明白這兩個類別代表什麼。 

首先，我們要有一個xml檔，大概會長成這樣： 

（命名為 test_tabhost_template.xml 並放在 res/layout/ 裡頭 ）

code:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+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="wrap_content"
         android:layout_height="wrap_content"> 

               <LinearLayout
                   android:id="@+id/tab1"
                   android:orientation="vertical"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:layout_gravity="center">
                   
                   <TextView 
                       android:layout_width="fill_parent"
                          android:layout_height="fill_parent"
                          android:textSize="50px"
                       android:text="this is tab 1"/>
                   
                   <TextView 
                       android:layout_width="fill_parent"
                          android:layout_height="fill_parent"
                          android:textSize="60px"
                       android:text="this is tab 1"/>
                   
               </LinearLayout>
    
               <LinearLayout
                   android:id="@+id/tab2"
                   android:orientation="vertical"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:layout_gravity="center"> 
                   
                   <TextView 
                       android:layout_width="fill_parent"
                          android:layout_height="fill_parent"
                          android:textSize="50px"
                       android:text="this is tab 2"/>
                   
                   <TextView 
                       android:layout_width="fill_parent"
                          android:layout_height="fill_parent"
                          android:textSize="60px"
                       android:text="this is tab 2"/>
                   
           </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

請注意一下紅框的部份，一定要是這樣的命名，

不可以亂取。還有用來作為 content 的 layout，

一定要是 FrameLayout 喔。

接著再我們的Activity裡頭，就可以用寫 code 的方式來繼續完成。

code:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // 使用LayoutInflater取得tabhost
        View view = (View)LayoutInflater.from(getBaseContext()).inflate(R.layout.test_tabhost_template, null);
        
        TabHost tabhost = (TabHost)view.findViewById(R.id.tabhost);
        tabhost.setup();

        TabHost.TabSpec tabcontent1 = tabhost.newTabSpec("tab01");
        tabcontent1.setIndicator("1 tab Title 1");
        tabcontent1.setContent(R.id.tab1);
        
        
        TabHost.TabSpec tabcontent2 = tabhost.newTabSpec("tab02");
        tabcontent2.setIndicator("2 tab Title 2");
        tabcontent2.setContent(R.id.tab2);
        
        tabhost.addTab(tabcontent1);
        tabhost.addTab(tabcontent2);
        
        FrameLayout baseFL = (FrameLayout)findViewById(R.id.baseLyinearLayout);
        baseFL.addView(tabhost);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

}

注意，這裡用的方式是使用 LayoutIflater 直接從另一個 XML 檔把 View 抓過來。

有關 LayoutInflater 的使用可以參考這篇文章

這樣有助於我們釐清單純 Tabhost 的設計邏輯。  

基本上只要這樣，就可以做出兩個最基本的 Tab 了。

結果如下圖:

而另外一種將整個 Activity 都帶入 Tab 架構的方式，叫做 TabActivity

可以參考這個網址，解說很詳盡。

http://android-ed.blogspot.tw/2011/03/using-tabactivity-in-android.html