Android 常用UI控件之TabHost(5)Tab栏在底部且在最上层也不盖tab页

tab栏在底部

 　　<TabHost
         android:id="@android:id/tabhost"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:clipChildren="true" >
         <FrameLayout
             android:id="@android:id/tabcontent"
             android:layout_width="match_parent"
             android:layout_height="match_parent" >
             <!-- tab1,用include引用tab1的layout -->
             <include
                 android:id="@+id/tab_weixin"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 layout="@layout/tab_weixin_layout" />
             <!-- tab2,用include引用tab2的layout -->
             <include
                 android:id="@+id/tab_contacts"
                 android:layout_width="wrap_content"
                 android:layout_height="match_parent"
                 layout="@layout/tab_contacts_layout" />
             ...
         </FrameLayout>
         <TabWidget
             android:id="@android:id/tabs"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="bottom"
             android:background="#E0E0E0"
             android:showDividers="none" >
         </TabWidget>
     </TabHost>

1，如上代码就可以将tab栏放在屏幕底部，TabHost最外层控件，其中FrameLayout是tab页，TabWidget是tab栏，

2，TabWidget在FrameLayout 下就保证tab栏在最上层。

3，但是如果其中的tab页的内容过高，tab栏就会盖住tab页的底部，在TabHost内嵌入一个RelativeLayout 并指定tab栏在底部，且在tab页下面就可，如下：

Tab栏在底部且在最上层也不盖tab页示例

 　　<TabHost
         android:id="@android:id/tabhost"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:clipChildren="true" >
         <RelativeLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical" >
             <FrameLayout
                 android:id="@android:id/tabcontent"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:layout_above="@android:id/tabs" > <!-- 注意此句，如果没有此句，当tab1,tab2...过高时，底部会被TabWidget盖住 -->
                 <!-- tab1,用include可以引用别处的layout -->
                 <include
                     android:id="@+id/tab_weixin"
                     android:layout_width="match_parent"
                     android:layout_height="match_parent"
                     layout="@layout/tab_weixin_layout" />
                 <!-- tab2,用include可以引用别处的layout -->
                 <include
                     android:id="@+id/tab_contacts"
                     android:layout_width="wrap_content"
                     android:layout_height="match_parent"
                     layout="@layout/tab_contacts_layout" />
                 ...
             </FrameLayout>
             <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>
         </RelativeLayout>
     </TabHost>

其中

　　android:layout_above="@android:id/tabs" 设置tab页在tab栏上，

　　android:layout_alignParentBottom="true" 设置tab栏在底部。

　　TabWidget在FrameLayout下 设置tab栏在最上层。