玩轉Android的Tab布局 – 初段

Tab布局是手機應用中常見的布局方式之一。利用tab，將相對窄小的手機螢幕在視覺上擴張出幾倍大，且留下吸引使用者點擊的線索，的確是個經典的設計（比PC上經典！）。Android上，一般的Tab布局像這個樣子——

實現Tab的做法很簡單。Layout代碼如下——

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent" android:layout_height="fill_parent">
 <TabHost android:id="@android: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" />
   </LinearLayout>
   <FrameLayout android:id="@android:id/tabcontent"
    android:layout_width="fill_parent" android:layout_height="wrap_content">
     <TextView android:id="@+id/tv1" android:layout_width="fill_parent"
      android:layout_height="fill_parent"/>
     <TextView android:id="@+id/tv2" android:layout_width="fill_parent"
      android:layout_height="fill_parent"/>
     <TextView android:id="@+id/tv3" android:layout_width="fill_parent"
      android:layout_height="fill_parent"/>
     <TextView android:id="@+id/tv4" android:layout_width="fill_parent"
      android:layout_height="fill_parent"/> 
   </FrameLayout>
 </TabHost>
</LinearLayout>

           
   

灰色字型部分不用太關心，它的作用是在布局裡面放幾個TextView，當點擊tab時，在介面上呈現出對應的一個。TextView的話題留到以後再談。繼續說tab。Java代碼——

package com.ghstudio.samples;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;

public class tabActivity extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        setupTabs();
    }
  
  private void setupTabs(){
        TabHost mTabHost = getTabHost();
        mTabHost.addTab(mTabHost.newTabSpec("tab_1").setIndicator(
                "Tab 1").setContent(R.id.list_1));
        mTabHost.addTab(mTabHost.newTabSpec("tab_2").setIndicator(
                "Tab 2").setContent(R.id.list_2));
        mTabHost.addTab(mTabHost.newTabSpec("tab_3").setIndicator(
                "Tab 3").setContent(
                R.id.list_3));
        mTabHost.addTab(mTabHost.newTabSpec("tab_4").setIndicator(
                "Tab 4").setContent(
                R.id.list_4));
}

}

setupTabs()方法簡單地向TabHost上添加了4個tab，請記住第一個tab上的文字是tab_1。對於初學者，在使用addTab增加tab後，就只能聽之任之，無法在運行時加以修改。不過，那也太死板了。讓我們稍微深入一點，在運行時修改tab的呈現吧！

應用情境：點擊某個tab時，不但切換到相應的tab，而且該被選中tab上的文字變為“Hello !”，字型顏色為紅色，而其他非選中tab上的文字變為“Bye!”，字型顏色為白色。

背景知識：首先你要瞭解布局xml檔案裡面的層次。可以看到TabHost下面，有一個LinearLayout，再下一層是用來呈現4個tab的TabWidget。與這個LinearLayout同級的是一個FrameLayout，下面是四個TextView。囉哩吧嗦這一堆，無非就是想說明，要玩轉TabHost，必須找到這個TabWidget，而布局檔案提供了找到它的層級線索。

背景知識二：TabWidget是一個封裝的widget，裡面還有乾坤。看了後面的代碼，你就知道，TabWidget裡面有個RelativeLayout，然後是兩個同級的View：一個ImageView，用來放表徵圖；一個TextView，用來顯示文字。我們要做的，就是找到這個TextView，然後在代碼中修改它的屬性。

好，代碼來了——

package com.ghstudio.samples;

import android.app.TabActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
import android.widget.TabHost.OnTabChangeListener;

public class tabActivity extends TabActivity {

    TabHost mTabHost;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        setupTabs();
    }

    private void setupTabs(){

        mTabHost = getTabHost();

        mTabHost.addTab(mTabHost.newTabSpec("tab_1").setIndicator(
                "Tab 1").setContent(R.id.tv1));
        mTabHost.addTab(mTabHost.newTabSpec("tab_2").setIndicator(
                "Tab 2").setContent(R.id.tv2));
        mTabHost.addTab(mTabHost.newTabSpec("tab_3").setIndicator(
                "Tab 3").setContent(
                R.id.tv3));
        mTabHost.addTab(mTabHost.newTabSpec("tab_4").setIndicator(
                "Tab 4").setContent(
                R.id.tv4));

        mTabHost.setOnTabChangedListener(new OnTabChangeListener() { 

            @Override
            public void onTabChanged(String tabTag) {   // tab選中狀態變更時

                int tabId = mTabHost.getCurrentTab();
                changeTab(tabId);
            }
        });
    }

    private void changeTab(int tabId){
        LinearLayout ll=(LinearLayout)mTabHost.getChildAt(0);
        TabWidget tw=(TabWidget)ll.getChildAt(0);
       // 以上兩行代碼，找到TabWidget

        int tabCount=tw.getChildCount();

        for (int i=0;i            RelativeLayout rl=(RelativeLayout)tw.getChildAt(i);
            TextView tv=(TextView)rl.getChildAt(1);
            // 以上兩行代碼，找到要修改屬性的TextView

            String tabLabel="Bye!";
            int color=Color.WHITE;

            if (i==tabId){  // 如果是選定tab，則修改之
                tabLabel="Hello!";
                color=Color.RED;
            }

            tv.setText(tabLabel);
            tv.setTextColor(color);
            //以上兩行代碼，修改TextView的屬性 

        }
    }
}

運行——

當然你還可以繼續玩TabHost。瞭解層級關係，並且逐層得到各種view後，要怎麼玩，還不是你說了算。比如，修改每個tab（實際上就是一個RelativeLayout）的背景圖片（用setBackground方法），或者做其它事。關於TabHost，以後我還會繼續給出更深入的玩法，這篇文章，就算個開始吧。