[Android Development] tabhost -- view的圓桌會議 @ Winner? Loser? No matter

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

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

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

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

Android.R.id.tabs

Android.R.id.tabcontent

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

tabview001

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

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

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

tabhost_01

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;
    }

}