【Android进阶学习】底部Tab的两种实现方式

先写上代码，稍后在写分析的...................

第一种：

下面的tabs.xml布局文件中，整个布局是垂直显示的，分为FrameLayout和TabWidget上下两部分，在FrameLayout 布局里面使用layout_weight=“1” ，而TabWidget没有设置这个属性，那就默认为0。那么在这布局中，FrameLayout 就按比例分得整个屏幕的3/4，而没有设置layout_weight属性的TabWidget只是占用刚好能显示自己空间大小的位置。这样的话，就能达到就Tab置于底部了。

layout_weight具体可以看看http://liangruijun.blog.51cto.com/3061169/632532里面的FrameLayout 布局

tabs.xml

1. <?xml version="1.0" encoding="utf-8"?> 
2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"     
3.    android:id="@android:id/tabhost"   
4.    android:layout_width="fill_parent"     
5.    android:layout_height="fill_parent" 
6.    >     
7.    <LinearLayout   
8.       android:orientation="vertical"     
9.       android:layout_width="fill_parent"   
10.       android:layout_height="fill_parent" 
11.       >     
12.       <FrameLayout   
13.           android:id="@android:id/tabcontent"     
14.           android:layout_width="fill_parent"      
15.           android:layout_height="match_parent"     
16.           android:layout_weight="1"   
17.           >    
18.           <TextView   
19.               android:id="@+id/view1" 
20.               android:layout_width="wrap_content" 
21.               android:layout_height="wrap_content" 
22.               android:text="nihao" 
23.               /> 
24.           <TextView   
25.               android:id="@+id/view2" 
26.               android:layout_width="wrap_content" 
27.               android:layout_height="wrap_content" 
28.               android:text="nihenhao" 
29.               /> 
30.       </FrameLayout>     
31.       <TabWidget   
32.           android:id="@android:id/tabs"     
33.           android:layout_width="fill_parent"      
34.           android:layout_height="wrap_content"   
35.           />     
36.     </LinearLayout>     
37. </TabHost>  

main.xml

1. <?xml version="1.0" encoding="utf-8"?> 
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:orientation="vertical" 
4.     android:layout_width="fill_parent" 
5.     android:layout_height="fill_parent" 
6.     > 
7. <TextView    
8.     android:layout_width="fill_parent"   
9.     android:layout_height="wrap_content"   
10.     android:text="@string/hello" 
11.     /> 
12. </LinearLayout> 

TestHostActivity.java

1. package com.lingdududu.test;  
2.  
3. import android.app.TabActivity;  
4. import android.os.Bundle;  
5. import android.widget.TabHost;  
6.  
7. public class TestHostActivity extends TabActivity {  
8.     /** Called when the activity is first created. */ 
9.     @Override 
10.     public void onCreate(Bundle savedInstanceState) {  
11.         super.onCreate(savedInstanceState);  
12.         setContentView(R.layout.tabs);  
13.         TabHost tabhost =  getTabHost();    
14.         tabhost.addTab(tabhost.newTabSpec("111").setIndicator("view1").setContent(R.id.view1));    
15.         tabhost.addTab(tabhost.newTabSpec("222").setIndicator("view2").setContent(R.id.view2));    
16.     }  
17. } 

效果：

第二种：

在LinerLayout布局里面嵌套FrameLayout和RelativeLayout布局，将TabWidget放置在RelativeLayout里面，之后设置RelativeLayout的android:layout_alignParentBottom="true" 属性，这个属性的功能是将TabWidget置于父元素(也就是LinerLayout)的底部。这样就能将Tab置于底部了。

1. <?xml version="1.0" encoding="utf-8"?> 
2. <LinearLayout 
3.     xmlns:android="http://schemas.android.com/apk/res/android" 
4.     android:orientation="vertical" 
5.     android:layout_width="fill_parent" 
6.     android:layout_height="fill_parent"> 
7.     <TabHost 
8.         android:id="@+id/tabhost" 
9.         android:layout_width="fill_parent" 
10.         android:layout_height="fill_parent"> 
11.         <FrameLayout 
12.             android:id="@android:id/tabcontent" 
13.             android:layout_width="fill_parent" 
14.             android:layout_height="fill_parent" 
15.             android:paddingBottom="62px" 
16.             > 
17.             <TextView 
18.                 android:id="@+id/tab1" 
19.                 android:layout_width="fill_parent" 
20.                 android:layout_height="fill_parent" 
21.                 android:text="这是TabOne" 
22.                 /> 
23.             <TextView 
24.                 android:id="@+id/tab2" 
25.                 android:layout_width="fill_parent" 
26.                 android:layout_height="fill_parent" 
27.                 android:text="这是TabTwo"/> 
28.         </FrameLayout> 
29.         <RelativeLayout 
30.             android:layout_width="fill_parent" 
31.             android:layout_height="fill_parent" 
32.             > 
33.             <TabWidget 
34.                 android:id="@android:id/tabs" 
35.                 android:layout_alignParentBottom="true" 
36.                 android:layout_width="fill_parent" 
37.                 android:layout_height="65.0px"   
38.                 android:background="@drawable/tab_bg"             
39.                 /> 
40.         </RelativeLayout> 
41.     </TabHost> 
42. </LinearLayout> 

main.xml

1. <?xml version="1.0" encoding="utf-8"?> 
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:orientation="vertical" 
4.     android:layout_width="fill_parent" 
5.     android:layout_height="fill_parent" 
6.     > 
7. <TextView    
8.     android:layout_width="fill_parent"   
9.     android:layout_height="wrap_content"   
10.     android:text="@string/hello" 
11.     /> 
12. </LinearLayout> 

TabHostActivity.java

1. package com.lingdududu.test;  
2.  
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TabHost;  
6.  
7. public class TabHostActivity extends Activity {  
8.     public void onCreate(Bundle savedInstanceState) {  
9.         super.onCreate(savedInstanceState);  
10.         setContentView(R.layout.tabs);  
11.         TabHost tabs=(TabHost)findViewById(R.id.tabhost);  
12.           
13.         tabs.setup();  
14.           
15.         TabHost.TabSpec spec=tabs.newTabSpec("tag1");  
16.         spec.setContent(R.id.tab1);  
17.         spec.setIndicator("TabOne");  
18.         tabs.addTab(spec);  
19.           
20.         spec=tabs.newTabSpec("tag2");  
21.         spec.setContent(R.id.tab2);  
22.         spec.setIndicator("TabTwo");  
23.         tabs.addTab(spec);  
24.           
25.         tabs.setCurrentTab(0);  
26.     }  
27. }  
28.  

效果图：

本文转自 lingdududu 51CTO博客，原文链接：