TabHost的几种实现方式

继承TabActivity类，但是布局文件不使用TabHost控件

布局文件mytabactivity.xml：

[html] view plain copy
 
 print?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >   
  6.   
  7.     <LinearLayout  
  8.         android:id="@+id/tab1"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent"  
  11.         android:orientation="vertical" >  
  12.         <Button  
  13.             android:id="@+id/button1"  
  14.             android:layout_width="wrap_content"  
  15.             android:layout_height="wrap_content"  
  16.             android:text="Button1" />  
  17.     </LinearLayout>  
  18.   
  19.     <LinearLayout  
  20.         android:id="@+id/tab2"  
  21.         android:layout_width="match_parent"  
  22.         android:layout_height="match_parent"  
  23.         android:orientation="vertical" >  
  24.         <Button  
  25.             android:id="@+id/button2"  
  26.             android:layout_width="wrap_content"  
  27.             android:layout_height="wrap_content"  
  28.             android:text="Button2" />  
  29.     </LinearLayout>  
  30.   
  31.     <LinearLayout  
  32.         android:id="@+id/tab3"  
  33.         android:layout_width="match_parent"  
  34.         android:layout_height="match_parent"  
  35.         android:orientation="vertical" >  
  36.   
  37.         <Button  
  38.             android:id="@+id/button3"  
  39.             android:layout_width="wrap_content"  
  40.             android:layout_height="wrap_content"  
  41.             android:text="Button3" />  
  42.   
  43.     </LinearLayout>  
  44.      
  45. </LinearLayout>  

activity类：

[java] view plain copy
 
 print?
  1. package com.zzj.ui;  
  2.   
  3. import android.app.TabActivity;  
  4. import android.os.Bundle;  
  5. import android.view.LayoutInflater;  
  6. import android.widget.TabHost;  
  7.   
  8. @SuppressWarnings("deprecation")  
  9. public class MyTabActivity extends TabActivity {  
  10.     @Override  
  11.     protected void onCreate(Bundle savedInstanceState) {  
  12.         super.onCreate(savedInstanceState);  
  13.         init();  
  14.     }  
  15.   
  16.     private void init() {  
  17.         TabHost tabHost = getTabHost();  
  18.         LayoutInflater.from(this).inflate(R.layout.mytabactivity,   
  19.                 tabHost.getTabContentView(), true);//关键代码  
  20.         tabHost.addTab(tabHost.newTabSpec("tag1").setIndicator("tab1").setContent(R.id.tab1));  
  21.         tabHost.addTab(tabHost.newTabSpec("tag2").setIndicator("tab2").setContent(R.id.tab2));  
  22.         tabHost.addTab(tabHost.newTabSpec("tag3").setIndicator("tab3").setContent(R.id.tab3));  
  23.           
  24.           
  25.     }  
  26. }  

效果：

 

不继承TabActivity类，但是布局文件使用TabHost控件

在布局文件中定义TabHost，但是TabWidget的id必须是
@Android:id/tabs，FrameLayout的id必须是@android:id/tabcontent。TabHost的id可以自定义。

布局文件mytabhost.xml：

[html] view plain copy
 
 print?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:baselineAligned="false"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent" >  
  6.   
  7.     <TabHost  
  8.         android:id="@+id/tabhost"  
  9.         android:layout_width="0dip"  
  10.         android:layout_height="match_parent"  
  11.         android:layout_weight="1" >  
  12.   
  13.         <LinearLayout  
  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.             </TabWidget>  
  23.   
  24.             <FrameLayout  
  25.                 android:id="@android:id/tabcontent"  
  26.                 android:layout_width="match_parent"  
  27.                 android:layout_height="match_parent" >  
  28.   
  29.                 <LinearLayout  
  30.                     android:id="@+id/mtab1"  
  31.                     android:layout_width="match_parent"  
  32.                     android:layout_height="match_parent" >  
  33.                      <Button  
  34.                             android:id="@+id/mbutton1"  
  35.                             android:layout_width="wrap_content"  
  36.                             android:layout_height="wrap_content"  
  37.                             android:text="Button1" />  
  38.                 </LinearLayout>  
  39.   
  40.                 <LinearLayout  
  41.                     android:id="@+id/mtab2"  
  42.                     android:layout_width="match_parent"  
  43.                     android:layout_height="match_parent" >  
  44.                      <Button  
  45.                             android:id="@+id/mbutton2"  
  46.                             android:layout_width="wrap_content"  
  47.                             android:layout_height="wrap_content"  
  48.                             android:text="Button2" />  
  49.                 </LinearLayout>  
  50.   
  51.                 <LinearLayout  
  52.                     android:id="@+id/mtab3"  
  53.                     android:layout_width="match_parent"  
  54.                     android:layout_height="match_parent" >  
  55.                      <Button  
  56.                             android:id="@+id/mbutton3"  
  57.                             android:layout_width="wrap_content"  
  58.                             android:layout_height="wrap_content"  
  59.                             android:text="Button3" />  
  60.                 </LinearLayout>  
  61.             </FrameLayout>  
  62.         </LinearLayout>  
  63.     </TabHost>  
  64.   
  65.   
  66. </LinearLayout>  

Activity类：

[java] view plain copy
 
 print?
  1. package com.zzj.ui;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.widget.TabHost;  
  6.   
  7. public class MyTab extends Activity {  
  8.     @Override  
  9.     protected void onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         setContentView(R.layout.mytabhost);  
  12.         init();  
  13.     }  
  14.   
  15.     private void init() {  
  16.         TabHost tabHost = (TabHost) this.findViewById(R.id.tabhost);  
  17.         tabHost.setup();// 关键代码  
  18.         tabHost.addTab(tabHost  
  19.                 .newTabSpec("tag1")  
  20.                 .setIndicator("tab1",  
  21.                         getResources().getDrawable(R.drawable.toolbar_cost))  
  22.                 .setContent(R.id.mtab1));  
  23.         tabHost.addTab(tabHost  
  24.                 .newTabSpec("tag2")  
  25.                 .setIndicator("tab2",  
  26.                         getResources().getDrawable(R.drawable.toolbar_count))  
  27.                 .setContent(R.id.mtab2));  
  28.         tabHost.addTab(tabHost  
  29.                 .newTabSpec("tag3")  
  30.                 .setIndicator("tab3",  
  31.                         getResources().getDrawable(R.drawable.toolbar_discount))  
  32.                 .setContent(R.id.mtab3));  
  33.     }  
  34. }  

效果：

 

将选项卡显示在底部

使用不继承TabActivity的方式，只需要修改xml布局文件。

[html] view plain copy
 
 print?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:baselineAligned="false"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent" >  
  6.   
  7.     <TabHost  
  8.         android:id="@+id/tabhost"  
  9.         android:layout_width="0dip"  
  10.         android:layout_height="match_parent"  
  11.         android:layout_weight="1" >  
  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.             </TabWidget>  
  24.   
  25.             <FrameLayout  
  26.                 android:id="@android:id/tabcontent"  
  27.                 android:layout_width="match_parent"  
  28.                 android:layout_height="match_parent" >  
  29.   
  30.                 <LinearLayout  
  31.                     android:id="@+id/mtab1"  
  32.                     android:layout_width="match_parent"  
  33.                     android:layout_height="match_parent" >  
  34.                      <Button  
  35.                             android:id="@+id/mbutton1"  
  36.                             android:layout_width="wrap_content"  
  37.                             android:layout_height="wrap_content"  
  38.                             android:text="Button1" />  
  39.                 </LinearLayout>  
  40.   
  41.                 <LinearLayout  
  42.                     android:id="@+id/mtab2"  
  43.                     android:layout_width="match_parent"  
  44.                     android:layout_height="match_parent" >  
  45.                      <Button  
  46.                             android:id="@+id/mbutton2"  
  47.                             android:layout_width="wrap_content"  
  48.                             android:layout_height="wrap_content"  
  49.                             android:text="Button2" />  
  50.                 </LinearLayout>  
  51.   
  52.                 <LinearLayout  
  53.                     android:id="@+id/mtab3"  
  54.                     android:layout_width="match_parent"  
  55.                     android:layout_height="match_parent" >  
  56.                      <Button  
  57.                             android:id="@+id/mbutton3"  
  58.                             android:layout_width="wrap_content"  
  59.                             android:layout_height="wrap_content"  
  60.                             android:text="Button3" />  
  61.                 </LinearLayout>  
  62.             </FrameLayout>  
  63.         </RelativeLayout>  
  64.     </TabHost>  
  65.   
  66.   
  67. </LinearLayout>  

 

将TabWidget标签的父标签改为RelativeLayout，将TabWidget标签的属性layout_alignParentBottom设置为true。

效果：

综合以上两种方式

XML布局文件：

[html] view plain copy
 
 print?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:baselineAligned="false"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent" >  
  6.   
  7.     <TabHost  
  8.         android:id="@android:id/tabhost"  
  9.         android:layout_width="0dip"  
  10.         android:layout_height="match_parent"  
  11.         android:layout_weight="1" >  
  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.             </TabWidget>  
  24.   
  25.             <FrameLayout  
  26.                 android:id="@android:id/tabcontent"  
  27.                 android:layout_width="match_parent"  
  28.                 android:layout_height="match_parent" >  
  29.   
  30.                 <LinearLayout  
  31.                     android:id="@+id/mtab1"  
  32.                     android:layout_width="match_parent"  
  33.                     android:layout_height="match_parent" >  
  34.                      <Button  
  35.                             android:id="@+id/mbutton1"  
  36.                             android:layout_width="wrap_content"  
  37.                             android:layout_height="wrap_content"  
  38.                             android:text="Button1" />  
  39.                 </LinearLayout>  
  40.   
  41.                 <LinearLayout  
  42.                     android:id="@+id/mtab2"  
  43.                     android:layout_width="match_parent"  
  44.                     android:layout_height="match_parent" >  
  45.                      <Button  
  46.                             android:id="@+id/mbutton2"  
  47.                             android:layout_width="wrap_content"  
  48.                             android:layout_height="wrap_content"  
  49.                             android:text="Button2" />  
  50.                 </LinearLayout>  
  51.   
  52.                 <LinearLayout  
  53.                     android:id="@+id/mtab3"  
  54.                     android:layout_width="match_parent"  
  55.                     android:layout_height="match_parent" >  
  56.                      <Button  
  57.                             android:id="@+id/mbutton3"  
  58.                             android:layout_width="wrap_content"  
  59.                             android:layout_height="wrap_content"  
  60.                             android:text="Button3" />  
  61.                 </LinearLayout>  
  62.             </FrameLayout>  
  63.         </RelativeLayout>  
  64.     </TabHost>  
  65.   
  66. </LinearLayout>  

注意TabHost的id。

 

Activity类：

[java] view plain copy
 
 print?
  1. package com.zzj.ui;  
  2.   
  3. import android.app.TabActivity;  
  4. import android.os.Bundle;  
  5. import android.widget.TabHost;  
  6.   
  7. @SuppressWarnings("deprecation")  
  8. public class TabActivityHost extends TabActivity {  
  9.     @Override  
  10.     protected void onCreate(Bundle savedInstanceState) {  
  11.         super.onCreate(savedInstanceState);  
  12.         setContentView(R.layout.mytabhost);  
  13.         init();  
  14.     }  
  15.   
  16.     private void init() {  
  17.         TabHost tabHost = getTabHost();  
  18.           
  19.         tabHost.addTab(tabHost  
  20.                 .newTabSpec("tag1")  
  21.                 .setIndicator("tab1",  
  22.                         getResources().getDrawable(R.drawable.toolbar_cost))  
  23.                 .setContent(R.id.mtab1));  
  24.         tabHost.addTab(tabHost  
  25.                 .newTabSpec("tag2")  
  26.                 .setIndicator("tab2",  
  27.                         getResources().getDrawable(R.drawable.toolbar_count))  
  28.                 .setContent(R.id.mtab2));  
  29.         tabHost.addTab(tabHost  
  30.                 .newTabSpec("tag3")  
  31.                 .setIndicator("tab3",  
  32.                         getResources().getDrawable(R.drawable.toolbar_discount))  
  33.                 .setContent(R.id.mtab3));  
  34.     }  
  35. }  

效果：

 

posted @ 2016-11-28 16:44  天涯海角路  阅读(56)  评论(0)    收藏  举报