android TabWidget

1

首先，新建一個android專案叫做TbHostShow，其他引數可以自己設定，之後點選完成，得到結果圖如下：

2

在開發之前，我們要首先了解，TabHost是整個Tab的容器，包括兩部分，TabWidget和FrameLayout。TabWidget就是每個tab的標籤，FrameLayout則是tab內容。接著我們開始初始化main.xml。

首先宣告TabHost，包含TabWidget，FrameLayout元素。

    <TabHost 

    android:id="@android:id/tabhost"  //宣告控制元件ID

    android:layout_width="fill_parent"    //控制元件寬度與父控制元件一致

     android:layout_height="fill_parent">  //控制元件高度與父控制元件一致

宣告TabWidget，tab分頁

            <TabWidget 

            android:layout_width="fill_parent"      //控制元件寬度與父控制元件一致

            android:layout_height="wrap_content"   //控制元件高度與自身適應

            android:id="@android:id/tabs">    //宣告控制元件ID

宣告FrameLayout，tab頁裡的內容資訊

            <FrameLayout 

            android:layout_width="fill_parent"   //控制元件寬度與父控制元件一致

            android:layout_height="wrap_content"  //控制元件高度與自身適應

            android:id="@android:id/tabcontent">   //宣告控制元件ID

注意下：

如果我們使用extends TabAcitivty，如同ListActivity，TabHost必須設定為@android:id/tabhost TabWidget必須設定android:id為@android:id/tabs FrameLayout需要設定android:id為@android:id/tabcontent

3

宣告FrameLayout裡面的內容資訊

第一個介面內容：宣告一個線性布局，宣告一個TextView，展示內容這是TAB 1

 <LinearLayout android:layout_width="fill_parent"

                 android:layout_height="fill_parent" 

                 android:id="@+id/tab1">

                 <TextView android:id="@+id/TextView2"

                  android:layout_width="fill_parent" 

                  android:layout_height="wrap_content"

                  android:text="這是TAB 1">

                  </TextView>

                 </LinearLayout>

4

第二個介面內容，宣告了一個鬧鐘控制元件

  <LinearLayout 

                android:layout_width="fill_parent" 

                android:layout_height="fill_parent" 

                android:id="@+id/tab2">

               <AnalogClock android:id="@+id/analogclock1"

               android:layout_width="fill_parent" android:layout_height="wrap_content"

               ></AnalogClock>

               </LinearLayout>

5

第三個介面，宣告一個展示框，內容顯示這是TAB 3，文字編輯控制元件

   <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" 

                android:id="@+id/tab3">

                                 <TextView android:id="@+id/TextView3"

                  android:layout_width="wrap_content" android:layout_height="wrap_content"

                  android:text="這是TAB 3"></TextView>

                </LinearLayout>

1

新增主體的方法函數，將public class TbHostView extends Activity 修改為public class TbHostView extends TabActivity ，首先是範例化TabHost，然後向TabHost中新增tab頁

2

//新增幾個Tab

        mTabHost.addTab(

        //分頁名稱為Tab_test1

        mTabHost.newTabSpec("Tab_test1").

        //指定圖片來源，

        setIndicator("TAB1",getResources().

        //圖片ID

        getDrawable(android.R.drawable.ic_btn_speak_now)).

        //新增LinearLayout ID為tab1的介面

        setContent(R.id.tab1));

     //新增幾個Tab

        mTabHost.addTab(

        //分頁名稱為Tab_test2

        mTabHost.newTabSpec("tab_text2").

        //指定圖片來源，

        setIndicator("TAB2",getResources().

        //圖片ID

           getDrawable(android.R.drawable.ic_menu_add)).

         //新增LinearLayout ID為tab2的介面

           setContent(R.id.tab2));

        mTabHost.addTab(mTabHost.

        //分頁名稱為Tab_test3

        newTabSpec("tab_test3").

        //指定圖片來源，圖片ID 新增LinearLayout ID為tab2的介面

        setIndicator(

        "TAB3",getResources().getDrawable(android.R.drawable.ic_menu_camera))

        .setContent(R.id.tab3));

3

  //設定背景

        mTabHost.setBackgroundColor(Color.argb(150,22,70,153));

        //預設展示第一個tab頁

        mTabHost.setCurrentTab(0);

        //處理tab頁 切換時觸發的事件，這裡展示一個提示框

        mTabHost.setOnTabChangedListener(new OnTabChangeListener(){

  @Override

  public void onTabChanged(String tabId) {

   // TODO Auto-generated method stub

  Dialog dialog = new AlertDialog.Builder(TbHostView.this)  

                       .setTitle("提示")  

                       .setMessage("當前選中："+tabId+"標籤")  

                       .setPositiveButton("確定",  

                       new DialogInterface.OnClickListener()  

                       {  

                           public void onClick(DialogInterface dialog, int whichButton)  

                           {  

                               dialog.cancel();  

                           }  

                       }).create();//建立按鈕  

                      dialog.show();  

  }

        });

1

程式執行結果展示，