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放到下面。

 

[html] view plaincopyprint?  <OL style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(248,248,248); LIST-STYLE-TYPE: none; TEXT-INDENT: 0px; MARGIN: 0px; PADDING-LEFT: 20px; LETTER-SPACING: normal; PADDING-RIGHT: 0px; FONT: 14px/30px 宋体; WHITE-SPACE: normal; COLOR: rgb(0,0,0); BORDER-TOP: 0px; BORDER-RIGHT: 0px; WORD-SPACING: 0px; PADDING-TOP: 0px; -webkit-text-stroke-width: 0px" target="_blank" href="http://www.cxyclub.cn/Tag/class.html" class="dp-xml" start="1">

  • <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下面。

     

     

    [html]  view plaincopyprint?  
    1. <android.support.v4.app.FragmentTabHost  

    2.     xmlns:android="http://schemas.android.com/apk/res/android"  

    3.     android:id="@android :id/tabhost"  

    4.     android:layout_width="match_parent"  

    5.     android:layout_height="match_parent">  

    6.     <LinearLayout  

    7.         android:orientation="vertical"  

    8.         android:layout_width="match_parent"  

    9.         android:layout_height="match_parent">    

    10.         <FrameLayout  

    11.             android:id="@android:id/tabcontent"  

    12.             android:layout_width="0dp"  

    13.             android:layout_height="0dp"  

    14.             android:layout_weight="0"/>  

    15.         <FrameLayout  

    16.             android:id="@+id/realtabcontent"  

    17.             android:layout_width="match_parent"  

    18.             android:layout_height="0dp"  

    19.             android:layout_weight="1"/>  

    20.   <TabWidget  

    21.             android:id="@android:id/tabs"  

    22.             android:orientation="horizontal"  

    23.             android:layout_width="match_parent"  

    24.             android:layout_height="wrap_content"  

    25.             android:layout_weight="0"/>  

    26.   

    27.     </LinearLayout>  

    28. </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

你可能感兴趣的:(Tab界面实现汇总及比较)