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>