Android 常用UI控件之TabHost(1)TabHost的两种布局方式

TabHost是Android中的tab组件.

TabHost布局文件的基本结构

　　TabHost下有个layout,这个layout中有TabWidget与FrameLayout.TabWidget是tab栏,FramentLayout中含每个tab子页面布局.

如用Android Studio创建Tab导航式的工程会自动生成TabHost布局文件.如用Eclipse 要手动拖动一个TabHost组件到Layout中.

TabHost有两种布局方式

　　注意TabHost,TabWidget,Fragment的android:id 值是固定的不能改变,如下.

第一种:

　　每个Tab页面的布局都嵌在TabHost的FrameLayout中.

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/frgmt_main"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="#FFFFFF" >

     <TabHost
         android:id="@android:id/tabhost"
         android:layout_width="match_parent"
         android:layout_height="match_parent" >
         <RelativeLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical" >
             <TabWidget
                 android:id="@android:id/tabs"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_alignParentBottom="true"
                 android:background="#E0E0E0"
                 android:showDividers="none" >
             </TabWidget>
             <FrameLayout
                 android:id="@android:id/tabcontent"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent">

                 <!-- tab1,用include可以引用别处的layout -->
                 <include
                     android:id="@+id/tab_weixin"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     layout="@layout/tab_weixin_layout" />

                 <!-- tab2,用include可以引用别处的layout -->
                 <include
                     android:id="@+id/tab_contacts"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     layout="@layout/tab_contacts_layout" />

                 <!-- tab3,用include可以引用别处的layout -->
                 <include
                     android:id="@+id/tab_discovery"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     layout="@layout/tab_discovery_layout" />

                 <!-- tab4,用include可以引用别处的layout -->
                 <include
                     android:id="@+id/tab_me"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     layout="@layout/tab_me_layout" />
             </FrameLayout>
         </RelativeLayout>
     </TabHost>

 </FrameLayout>

第二种:

　　FrameLayout为空,其中不含Tab页面布局文件，Tab页面以Activity呈现，每个Tab对应的Activity有单独的布局。

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/frgmt_main"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="#FFFFFF" >

     <TabHost
         android:id="@android:id/tabhost"
         android:layout_width="match_parent"
         android:layout_height="match_parent" >

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

             <TabWidget
                 android:id="@android:id/tabs"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_alignParentBottom="true"
                 android:background="#FCFCFC"
                 android:baselineAligned="true"
                 android:showDividers="none" >
             </TabWidget>

             <FrameLayout
                 android:id="@android:id/tabcontent"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent" >
             </FrameLayout>
         </RelativeLayout>
     </TabHost>

 </FrameLayout>