Android UI開發第三十九篇——Tab界面實現彙總及比較

Tab佈局是iOS的經典佈局，Android應用中也有大量應用，前面也寫過Android中TAb的實現，《Android UI開發第十八篇——ActivityGroup實現tab功能》。這篇文章總結幾種Tab的實現。

 

1）繼承自TabActivity，TabActivity已在API Level 13中不建議使用，全部做者不建議在新開發的應用中使用TabActivity，關於Tabactivity的一些分析能夠參考《Android TabActivity之感嘆，英雄暮路，美人辭暮，昔日的英雄再見》。

 

2）繼承自Activity，佈局使用TabHost，這個其實和上面的TabActivity同樣，只不過是這裏使用findViewById( )獲取TabHost對象，而TabActivity使用getTabHost()得到TabHost對象。

 

3)使用ActivityGroup，《Android UI開發第十八篇——ActivityGroup實現tab功能》中有介紹，固然，下面的button佈局會有更多的實現方式，各位也能夠本身擴展。ActivityGroup也在API Level 13中不建議使用。

 

4）使用ActionBar的ActionBar.NAVIGATION_MODE_TABS模式，參考ActionBar的添加導航選項標籤介紹。ActionBar是Android 3.0後出現的，爲了兼容更多的Android版本，能夠參考《Android UI開發第三十五篇——AppCompat實現Action Bar》。

 

5）繼承自FragmentActivity，使用FragmentTabHost。具體實現能夠參考FragmentTabHost。固然也能夠直接繼承自Fragment，使用FragmentTabHost。

 

6）能夠製做更高級的Tab界面，手勢滑動的Tab,參考《Creating Swipe Views With Tabs》. 手勢滑動切換Tab可使用ViewPage單獨實現。

 

7）實現Tab界面的方法有不少，每一個開發者均可能有不一樣的方法，尤爲對付Tab的下面的Button，開發者能夠各類自定義，我見過使用Button實現的也有使用ImageView實現的，也有RadioButton實現的,也有混合佈局實現的，這些能夠充分發揮開發者想象力。

 

    自TabActivity過時，不建議使用，不少開發者試圖把原先的TabActivity修改成FragmentTabHost，使用官方提供的方法不能把Tab的button放到下面。

 

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

理論上，咱們修改一下上面的佈局便可使實現tab的button下面。

 

 

<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">
        <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"/>
  <TabWidget
            android:id="@android:id/tabs"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"/>

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

咱們改變了佈局之後，發現我錯了，顯示沒有變化，最終發現是FragmentTabHost的一個bug。參考  。

 

 

I change TabWidget down, but it will never be used xml in FragmentTabHost.

I search Bug in support.v4 library:
Copy FragmentTabHost.java to your own project and Comment line 153 to 175 or change initFragmentTabHost:

 private void initFragmentTabHost(Context context, AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs,
                new int[] { android.R.attr.inflatedId }, 0, 0);
        mContainerId = a.getResourceId(0, 0);
        a.recycle();

        super.setOnTabChangedListener(this);

        // If owner hasn't made its own view hierarchy, then as a convenience
        // we will construct a standard one here.


/***** HERE COMMENT CODE BECAUSE findViewById(android.R.id.tabs) EVERY TIME IS NULL WE HAVE OWN LAYOUT ******//


//        if (findViewById(android.R.id.tabs) == null) {
//            LinearLayout ll = new LinearLayout(context);
//            ll.setOrientation(LinearLayout.VERTICAL);
//            addView(ll, new FrameLayout.LayoutParams(
//                    ViewGroup.LayoutParams.FILL_PARENT,
//                    ViewGroup.LayoutParams.FILL_PARENT));
//
//            TabWidget tw = new TabWidget(context);
//            tw.setId(android.R.id.tabs);
//            tw.setOrientation(TabWidget.HORIZONTAL);
//            ll.addView(tw, new LinearLayout.LayoutParams(
//                    ViewGroup.LayoutParams.FILL_PARENT,
//                    ViewGroup.LayoutParams.WRAP_CONTENT, 0));
//
//            FrameLayout fl = new FrameLayout(context);
//            fl.setId(android.R.id.tabcontent);
//            ll.addView(fl, new LinearLayout.LayoutParams(0, 0, 0));
//
//            mRealTabContent = fl = new FrameLayout(context);
//            mRealTabContent.setId(mContainerId);
//            ll.addView(fl, new LinearLayout.LayoutParams(
//                    LinearLayout.LayoutParams.FILL_PARENT, 0, 1));
//        }
    }

 

 

 

這樣解決了使用FragmentTabHost實現Tab界面button不能在下面的問題。

 

 

      上面提到的Tab界面的實現方式，歸根結底也就分紅兩大類，前三個爲一類，咱們統稱爲Old Tab；後三個爲一類，咱們統稱New Tab。Old Tab能夠加載Activity，New Tab加載的是Fragment，這時他們的生命週期是不一樣的。Old Tab加載的Activtiy再次回來時是從onResume開始的，而New Tab加載的Fragment（Fragment的生命週期）再次回來時是從 onCreateView開始的。

 

實現Tab界面不止上面介紹的，由於衆多開發者的創造力是無窮的，但願這篇能起到拋磚引玉的功效。

 

 

/**

* @author 張興業

*  http://blog.csdn.net/xyz_lmn

*  iOS入門羣：83702688

*  android開發進階羣：241395671

*  個人新浪微博：@張興業TBOW

*/

 

參考：

http://developer.android.com/reference/android/support/v4/app/FragmentTabHost.html

http://developer.android.com/training/implementing-navigation/lateral.html