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

 1 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:id="@+id/frgmt_main"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:background="#FFFFFF" >
 7 
 8     <TabHost
 9         android:id="@android:id/tabhost"
10         android:layout_width="match_parent"
11         android:layout_height="match_parent" >
12         <RelativeLayout
13             android:layout_width="match_parent"
14             android:layout_height="match_parent"
15             android:orientation="vertical" >
16             <TabWidget
17                 android:id="@android:id/tabs"
18                 android:layout_width="match_parent"
19                 android:layout_height="wrap_content"
20                 android:layout_alignParentBottom="true"
21                 android:background="#E0E0E0"
22                 android:showDividers="none" >
23             </TabWidget>
24             <FrameLayout
25                 android:id="@android:id/tabcontent"
26                 android:layout_width="match_parent"
27                 android:layout_height="match_parent">
28                 
29                 <!-- tab1,用include可以引用别处的layout -->
30                 <include
31                     android:id="@+id/tab_weixin"
32                     android:layout_width="wrap_content"
33                     android:layout_height="wrap_content"
34                     layout="@layout/tab_weixin_layout" />
35                 
36                 <!-- tab2,用include可以引用别处的layout -->
37                 <include
38                     android:id="@+id/tab_contacts"
39                     android:layout_width="wrap_content"
40                     android:layout_height="wrap_content"
41                     layout="@layout/tab_contacts_layout" />
42                 
43                 <!-- tab3,用include可以引用别处的layout -->
44                 <include
45                     android:id="@+id/tab_discovery"
46                     android:layout_width="wrap_content"
47                     android:layout_height="wrap_content"
48                     layout="@layout/tab_discovery_layout" />
49                 
50                 <!-- tab4,用include可以引用别处的layout -->
51                 <include
52                     android:id="@+id/tab_me"
53                     android:layout_width="wrap_content"
54                     android:layout_height="wrap_content"
55                     layout="@layout/tab_me_layout" />
56             </FrameLayout>
57         </RelativeLayout>
58     </TabHost>
59 
60 </FrameLayout>

 

 

第二种:

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

 1 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:id="@+id/frgmt_main"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:background="#FFFFFF" >
 7 
 8     <TabHost
 9         android:id="@android:id/tabhost"
10         android:layout_width="match_parent"
11         android:layout_height="match_parent" >
12 
13         <RelativeLayout
14             android:layout_width="match_parent"
15             android:layout_height="match_parent"
16             android:orientation="vertical" >
17 
18             <TabWidget
19                 android:id="@android:id/tabs"
20                 android:layout_width="match_parent"
21                 android:layout_height="wrap_content"
22                 android:layout_alignParentBottom="true"
23                 android:background="#FCFCFC"
24                 android:baselineAligned="true"
25                 android:showDividers="none" >
26             </TabWidget>
27 
28             <FrameLayout
29                 android:id="@android:id/tabcontent"
30                 android:layout_width="match_parent"
31                 android:layout_height="match_parent" >
32             </FrameLayout>
33         </RelativeLayout>
34     </TabHost>
35 
36 </FrameLayout>

 

转载于:https://www.cnblogs.com/sjjg/p/4852891.html