详解Android应用中使用TabHost组件进行布局的基本方法

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>

示例

上图为最终效果图
代码结构图

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/hometabs"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <!-- TabHost必须包含一个 TabWidget和一个FrameLayout-->
 <TabHost android:id="@+id/tabhost"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  >
  <LinearLayout
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
   <!-- TabWidget的id属性必须为 @android:id/tabs-->
   <TabWidget android:id="@android:id/tabs"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
   </TabWidget>
   <!-- FrameLayout的id属性必须为 @android:id/tabcontent-->
    <FrameLayout android:id="@android:id/tabcontent"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent">
     <TextView android:id="@+id/view1"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"/>
     <TextView android:id="@+id/view2"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"/>
     <TextView android:id="@+id/view3"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"/>
    </FrameLayout> 

   </LinearLayout>
 </TabHost>
</LinearLayout>

java代码如下

package cn.com.tagHost.test; 

import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabWidget; 

public class TagHostTest2 extends Activity {
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  // 获取TabHost对象
  TabHost tabHost = (TabHost) findViewById(R.id.tabhost);
  // 如果没有继承TabActivity时，通过该种方法加载启动tabHost
  tabHost.setup();
  tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("第一个标签",
    getResources().getDrawable(R.drawable.icon)).setContent(
    R.id.view1)); 

  tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("第三个标签")
    .setContent(R.id.view3)); 

  tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("第二个标签")
    .setContent(R.id.view2));
 }
}

运行得到正确的结果。
废话连篇：这里需要注意的是
第一：布局文件的格式。以及TabWidget和FrameLayout的id属性值。
第二：TabWidget代表的是标签部分，FrameLayout代表的点击标签后看到的内容部分。FrameLayout里面声明的组件意为具备成为标签内容的资格，具体的还要在代码中具体指定。
你是否也想要这种结果呢。让标签在下部分显示

那么你只需要给main.xml进行下布局修改就可以了。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/hometabs" android:orientation="vertical"
 android:layout_width="fill_parent" android:layout_height="fill_parent">
 <!-- TabHost必须包含一个 TabWidget和一个FrameLayout-->
 <TabHost android:id="@+id/tabhost" android:layout_width="fill_parent"
  android:layout_height="wrap_content">
  <LinearLayout android:orientation="vertical"
   android:layout_width="fill_parent" android:layout_height="fill_parent"> 

   <!-- FrameLayout的id属性必须为 @android:id/tabcontent-->
   <FrameLayout android:id="@android:id/tabcontent"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <TextView android:id="@+id/view1" android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:text="hello baby!"
     />
    <TextView android:id="@+id/view2" android:layout_width="fill_parent"
     android:layout_height="fill_parent" />
    <TextView android:id="@+id/view3" android:layout_width="fill_parent"
     android:layout_height="fill_parent" />
   </FrameLayout>
   <RelativeLayout android:layout_width="fill_parent"
    android:layout_height="fill_parent"> 

    <!-- TabWidget的id属性必须为 @android:id/tabs-->
    <TabWidget android:id="@android:id/tabs"
     android:orientation="horizontal" android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:paddingBottom="0dp"
     >
    </TabWidget>
   </RelativeLayout>
  </LinearLayout>
 </TabHost>
</LinearLayout>

为了让标签和父容器底部持平，我们使用了android:layout_alignParentBottom="true"，该属性只有在RelativeLayout布局中才会存在哦、这也是为什么我们将tabWidget放入一个RelativeLayout中的原因。
此外，在lineaerLayout布局中，TabWidget和FrameLayout的位置可是调换了哦。