Android 使用 Fragment 建立 Tab 取代 TabActivity

Fragment Tab Demo

註了又註：要建立 Tab 請改用 SlidingTab，容易實作，操作更靈活。(修改於 2015/6/11)
註：TabActivity 已經在 Android 3.2(API Level 13) 被棄用了，請改用 Actionbar。（修改於 2015/3/16）

原由

在很久很久以前(也才不過一、兩年前吧~)使用 TabActivity 來製作 Tab ，當初還不熟 Android ，花了點時間才做出 Tab。某天程式寫著寫著，突然發現 名稱上出現了一條刪除線，還加上黃色的毛毛蟲底線，然後想這是什麼鬼，查了一下才知道，原來是被 Deprecated ，就是被拋棄了 Q.Q，從 API Level 13(Android 3.2) 開始被棄用，官方文件是說，請改用 Fragment 來取代這個功能。

沒時間加上懶，所以一直拖著沒解決這個問題，眼看著 API Level 都已經來到 17 了，還是花點時間來研究看看，如何用 Fragment 來取代原本的 TabActivity 。Fragment 我還沒實際使用過，所以這篇只著重在使用 Fragment 製作 Tab 的方法上。

說明

首先會有一個主要的母體，用來包含其他的 Fragment ，這個母體要去繼承 FragmentActivity，其他被包含在其中的 tab 則要繼承 Fragment，所以現在會有一個主要的 MainActivity 及其子頁籤 AFragment, BFragment, CFragment, ...看你要有幾個子頁籤。

接下來是 Layout 檔，給 MainActivity 用的 layout 是使用 android.support.v4.app.FragmentTabHost 來製作母體，這和之前用 TabActivity 的方式差不多，只是把原本的 TabHost 換成這個 FragmentTabHost 而以。

其他子頁籤的 layout 則和一般 layout 一樣，就看你的頁籤內容是什麼。

動手

1. Layout (main.xml)

<android.support.v4.app.FragmentTabHost
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@android:id/tabhost"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

   <LinearLayout
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

     <TabWidget
     android:id="@android:id/tabs" 
     android:orientation="horizontal"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_weight="0"/>

     <FrameLayout
     android:id="@android:id/tabcontent"
     android:layout_width="0dp"
     android:layout_height="0dp"
     android:layout_weight="0"/>

     <FrameLayout
     android:id="@+id/realtabcontent"
     android:layout_width="match_parent"
     android:layout_height="0dp"
     android:layout_weight="1"/>

   </LinearLayout>
</android.support.v4.app.FragmentTabHost>

其他的子 layout 我只是單純放一個文字框用來顯示假內容，就自行製作吧~

2.程式碼 (MainActivity.java)

package com.tonycube.fragmenttabdemo;
import com.tonycube.demo.R;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
public class MainActivity extends FragmentActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.main);

    FragmentTabHost tabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);

    tabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

    //1
    tabHost.addTab(tabHost.newTabSpec("Apple")
                          .setIndicator("Apple"), 
                   AppleFragment.class, 
                   null);
    //2
    tabHost.addTab(tabHost.newTabSpec("Google")
                          .setIndicator("Google"), 
                   GoogleFragment.class, 
                   null);
    //3
    tabHost.addTab(tabHost.newTabSpec("Facebook")
                          .setIndicator("Facebook"), 
                   FacebookFragment.class, 
                   null);
    //4
    tabHost.addTab(tabHost.newTabSpec("Twitter")
                          .setIndicator("Twitter"), 
                   TwitterFragment.class, 
                   null);
  }

  /**************************
  * 
  * 給子頁籤呼叫用
  * 
  **************************/
  public String getAppleData(){
    return "Apple 123";
  }
  public String getGoogleData(){
    return "Google 456";
  }
  public String getFacebookData(){
    return "Facebook 789";
  }
  public String getTwitterData(){
    return "Twitter abc";
  }
}

這裡要注意的地方是，取得 FragmentTabHost 的方式是 findViewById(android.R.id.tabhost)。接著看你有幾個頁籤就用 addTab 把它加進來。下面"給子頁籤呼叫用"的 4 個方法是用來傳值給子頁籤用的，如果沒有要傳遞資料給子頁籤就可以省略。

以下我建了 4 個頁籤，分別為 AppleFragment、GoogleFragment、FacebookFragment 及 TwitterFragment ，呈現的內容都差不多，所以這邊只列出一個。

AppleFragment.java

package com.tonycube.fragmenttabdemo;
import com.tonycube.demo.R;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class AppleFragment extends Fragment {

  private String value = "";

  @Override
  public void onAttach(Activity activity) {
    super.onAttach(activity);

    MainActivity mainActivity = (MainActivity)activity;
    value = mainActivity.getAppleData();
  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    return inflater.inflate(R.layout.frg_apple, container, false);
  }
  @Override
  public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    TextView txtResult = (TextView) this.getView().findViewById(R.id.textView1);
    txtResult.setText(value);
  }

}

onAttach 只有在頁籤第一次顯示時被呼叫，它會傳入母體 Activity ，所以這時候可以呼叫它的公開方法去取得值。

onCreateView 用來建立 layout 。onActivityCreated 是在母體 Activity onCreate之後呼叫，可以用來取得 layout 中的元件。這兩個方法在每次使用者點選該頁籤時都會被呼叫。

當你把剩下 3 個 Fragment 都做完後，整個就完成了，如下圖。 範例下載：FragmentTabDemo.zip

---

-- (補充 2014/5/29) --

讓 Tab 頁籤顯示在下方

如果要讓 Tab 頁籤顯示在下方，必須稍為調整 layout 中元件的順序，新的 main_bottom.xml 如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" />

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

接著把 MainActivity.java 中的 setContentView(R.layout.main); 換成 R.layout.main_bottom 就可以了。
結果如下：

小建議：

把 Tab 設計在下方的方式對 Android 來說不太適合，為什麼？你可以看上面的結果圖，Tab 和系統的虛擬按鈕的位置非常接近，使用者有一定程度的機會，不小心誤觸虛擬按鈕而做出原本不想做的動作，這對使用者來不是個好用的設計。

---

-- (補充 2014/8/1) --

關於 Fragment 生命週期的補充

先看這篇的圖，

onCreate()

是用來讓你初始化資料，這時候和 View 無關，因為還沒建立，所以還不能存取任何 View 。

onCreateView()

這時候會需要讀取 layout 檔來建立 view ，並且回傳。但是這時候的 View 是指 Fragment 本身，而它的父容器也就是 Activity 這時並還未被建立，當然也就無法存取。

接著看這段

onActivityCreated()

當這個方法被呼叫時，表示整個 Activity 已經被建立了，因此這時候你對任何 View 或父容器 Activity 做動作都是可以的，如同 Activity 的 onCreate()，這兩個方法是相同的作用。

所以在 Activity 的 onCreate() 做的事，現在要在 Fragment 的 onActivityCreated() 做。

---

-- (補充 2015/5/12) --

關於 xml 的錯誤訊息

在 xml 的設計模式下，會出現「exception raised during rendering:no tab know for tag null」的警告訊息，並且畫面中不會出現任何物件，這是 Eclipse 無法描繪 tab 這個元件，並不是 xml 本身有錯誤，純綷是 Eclipse 不會畫 tab 而已，請忽略這個錯誤警告，只在文字模式下編輯 xml。

參考資料

• Android : Tabs. The Fragment Way
• Passing data between a fragment and its container activity
• Creating a Fragment
• FragmentTabHost bottom TabWidget

本文網址：http://blog.tonycube.com/2013/07/android-fragment-tab-tabactivity.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀