Android - TabHost 选项卡功能用法详解

TabHost效果图 :

 

 

 

一. TabHost介绍

 TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计;

 

1. TabHost常用组件

 TabWidget : 该组件就是TabHost标签页中上部 或者 下部的按钮（选项标签），可以点击按钮切换选项卡。

TabSpec : 代表了选项卡界面，添加一个TabSpec即可添加到TabHost中。

-- 创建选项卡 : newTabSpec(String tag)，创建一个选项卡。

-- 添加选项卡 : addTab(tabSpec)。

 

2. TabHost使用步骤

 a. 定义布局 : 在XML文件中使用TabHost组件，并在其中定义一个FrameLayout选项卡内容。

b. 继承TabActivity : 显示选项卡组件的Activity继承TabActivity。

c. 获取组件 : 通过调用getTabHost()方法，获取TabHost对象。

d. 创建添加选项卡 : 通过TabHost创建添加选项卡。

 

3. 将按钮放到下面

 布局文件中TabWidget代表的就是选项卡按钮，Fragement组件代表内容。

设置失败情况 : 如果Fragement组件没有设置 android:layout_weight属性， 那么将TabWidget放到下面，可能不会显示按钮。

设置权重 : 设置了Fragment组件的权重之后，就可以成功显示该选项卡按钮。

 

二. TabHost布局文件

 

1. 根标签及id

 设置Android自带id : XML布局文件中，可以使用 标签设置，其中的id 需要引用 android的自带id: android:id=@android:id/tabhost 。

getHost()获取前提 : 设置了该id之后，在Activity界面可以使用 getHost()，获取这个TabHost 视图对象。

示例 :

<tabhost android:id= "@android:id/tabhost" android:layout_height= "match_parent" android:layout_width= "match_parent" ></tabhost>

2. TabWidget组件

选项卡切换 : 该组件是选项卡切换按钮，通过点击该组件可以切换选项卡。

设置android自带id : 这个组件的id要设置成android的自带id : android:id=@android:id/tabs 。

TabHost必备组件 : 该组件与FrameLayout组件是TabHost组件中必备的两个组件。

切换按钮下方显示 : 如果想要将按钮放到下面， 可以将该组件定义在下面，但是注意，FrameLayout要设置android:layout_widget = 1。

设置TabWidget大小 : 如果想要设置该按钮组件的大小，可以设置该组件与FrameLayout组件的权重。

示例 :

<tabwidget android:id="@android:id/tabs"android:layout_height="wrap_content"android:layout_width="fill_parent"android:orientation="horizontal/"></tabwidget>




 

3. FrameLayout组件

 组件作用 : 该组件中定义的子组件是TabHost中每个页面显示的选项卡, 可以将TabHost选项卡显示的视图定义在其中。

设置android自带id : 这个组件的id要设置成android的自带的id : android:id=@android:id/tabcontent。

示例 :

 

<framelayout android:id= "@android:id/tabcontent" android:layout_height= "fill_parent" android:layout_weight= "1" android:layout_width= "fill_parent" ></framelayout>

 

二. Activity方法

 

1. 获取TabHost

获取方法 : getHost();

前提 : 调用getHost()方法获取TabHost组件的方法的前提是在布局文件中，设置了android自带的id android:id=@android:id/tabhost 才可以。

 

2. 创建选项卡

创建选项卡 : 调用TabHost组件的newTabHost(tag)，其中的tag是字符串， 即在选项卡的唯一标识。

设置选项卡 :

-- 设置按钮名称 : setIndicator(叫兽)。

-- 设置选项卡内容 : setContent()，可以设置视图组件，可以设置Activity，也可以设置Fragement。

添加选项卡 : tabHost.add(tag)，传入的参数是创建选项卡的时候定义的唯一标识。

 

三 代码

 

XML布局文件 :

 

<!--?xml version= 1.0 encoding=utf- 8 ?-->

<tabhostandroid:id= "@android:id/tabhost" android:layout_height= "match_parent" android:layout_width= "match_parent" xmlns:android= "http://schemas.android.com/apk/res/android" >

     

     <linearlayoutandroid:layout_height= "fill_parent" android:layout_width= "fill_parent" android:orientation= "vertical" >

         

         <tabwidget android:id= "@android:id/tabs" android:layout_height= "wrap_content" android:layout_width= "fill_parent" android:orientation= "horizontal/" >

         

         <framelayout android:id= "@android:id/tabcontent" android:layout_height= "fill_parent" android:layout_weight= "1" android:layout_width= "fill_parent" >

             

             <linearlayout android:id= "@+id/alwayswet" android:layout_height= "fill_parent" android:layout_width= "fill_parent" android:orientation= "vertical" >

                 <imageview android:layout_height= "fill_parent" android:layout_width= "fill_parent" android:scaletype= "fitXY" android:src= "@drawable/alwayswet/" >

             </imageview></linearlayout>

             

             <linearlayout android:id= "@+id/isanimal" android:layout_height= "fill_parent" android:layout_width= "fill_parent" android:orientation= "vertical" >

                 <imageview android:layout_height= "fill_parent" android:layout_width= "fill_parent" android:scaletype= "fitXY" android:src= "@drawable/isanimal/" >

             </imageview></linearlayout>

             

             <linearlayout android:id= "@+id/nezha" android:layout_height= "fill_parent" android:layout_width= "fill_parent" android:orientation= "vertical" >

                 <imageview android:layout_height= "fill_parent" android:layout_width= "fill_parent" android:scaletype= "fitXY" android:src= "@drawable/nazha/" >

             </imageview></linearlayout>

                         

         </framelayout>

         

     </tabwidget></linearlayout>

     

</tabhost>

 

Activity主界面代码 :

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

package shuliang.han.tabhost_test;   import android.app.TabActivity; import android.os.Bundle; import android.widget.TabHost; import android.widget.TabHost.TabSpec;   public class MainActivity extends TabActivity {        @Override      protected void onCreate(Bundle savedInstanceState) {          super .onCreate(savedInstanceState);          setContentView(R.layout.tabhost);                    TabHost tabHost =getTabHost();                    TabSpecpage1= tabHost.newTabSpec(tab1)                  .setIndicator(叫兽)                  .setContent(R.id.isanimal);          tabHost.addTab(page1);                    TabSpec page2 = tabHost.newTabSpec(tab2)                  .setIndicator(老湿)                  .setContent(R.id.alwayswet);          tabHost.addTab(page2);                    TabSpec page3 = tabHost.newTabSpec(tab3)                  .setIndicator(哪吒)                  .setContent(R.id.nezha);          tabHost.addTab(page3);      }   }