Android TabHost的使用

　　android 实现tab视图有2种方法，一种是在布局页面中定义<tabhost>标签,另一种就是继承tabactivity.但是我比较喜欢第二种方式，应为如果页面比较复杂的话你的XML文件会写得比较庞大，用第二种方式XML页面相对要简洁得多。

Tab标签页的使用

　　首先要设计所有的分页的界面布局

　　在分页设计完成后，使用代码建立 Tab 标签页，并给每个分页添加 标识和标题

　　最后确定每个分页所显示的界面布局

 

建立一个“TabDemo”程序，包含三个XML文件，分别为tab1.xml、tab2.xml和tab3.xml，这3个文件分别使用线性布局、相对布局和绝对布局示例中的main.xml的代码，并将布局的ID分别定义为layout01、layout02和layout03

tab1.xml文件代码   

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

                       <LinearLayout android:id = "@+id/layout01"

                        ……

                        ……

                      </LinearLayout>

 

tab2.xml文件代码

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

　　　　　　　　<AbsoluteLayout android:id="@+id/layout02"

　　　　　　　　  ……

　　　　　　　　  ……

　　　　　　 　</AbsoluteLayout>

 

tab3.xml文件代码                       

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

　　　　　　　　<RelativeLayout android:id="@+id/layout03"

 　　　　　　　　……

 　　　　　　　　 ……

　　　　　　　　</RelativeLayout>

 

import android.app.TabActivity;

import android.os.Bundle;

import android.widget.TabHost;

import android.view.LayoutInflater;

 

public class TabDemo extends TabActivity {

@Override

public void onCreate(Bundle savedInstanceState) {

　　super.onCreate(savedInstanceState);       

　　TabHost tabHost = getTabHost();

　　 LayoutInflater.from(this).inflate(R.layout.tab1, tabHost.getTabContentView(),true);   //将布局文件与TabHost关联在一起

　　 LayoutInflater.from(this).inflate(R.layout.tab2, tabHost.getTabContentView(),true);

　　 LayoutInflater.from(this).inflate(R.layout.tab3, tabHost.getTabContentView(),true);

 

 

 　　tabHost.addTab(tabHost.newTabSpec("TAB1").setIndicator("线性布局").setContent(R.id.layout01));  //setContent()指定每个Tab包含的View

　　 tabHost.addTab(tabHost.newTabSpec("TAB2").setIndicator("绝对布局").setContent(R.id.layout02));

　　 tabHost.addTab(tabHost.newTabSpec("TAB3").setIndicator("相对布局").setContent(R.id.layout03));

            }

 }

 

第 8 行代码的声明 TabDemo 类继承与 TabActivity ，与以往继承 Activity 不同， TabActivity 支持内嵌多个 Activity 或 View

第 12 行代码通过 getTabHost() 函数获得了 Tab 标签页的容器，用以 承载可以点击的 Tab 标签和分页的界面布局。

第 13 行代码通过 LayoutInflater 将 tab1.xml 文件中的布局转换为 Tab 标签页可以使用的 View 对象

第 16 行代码使用 addTab() 函数添加了第 1 个分页， tabHost.newTabSpec("TAB1") 表明在第 12 行代码中建立的 tabHost 上，添加一个标识为 TAB1 的 Tab 分页

第 17 行代码使用 setIndicator() 函数设定分页显示的标题，使用 setContent() 函数设定分页所关联的界面布局

 

 第二种方式，不继承TabActivity，在布局文件中定义TabHost即可，但是TabWidget的id必须是@android:id/tabs，FrameLayout的id必须是@android:id/tabcontent。

<?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 android:id="@+id/tabhost"         //继承自FrameLayout，下面只能显示一个节点，TabWidget 和FrameLayout 放在LinearLayout  下面
         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 android:id="@android:id/tabs"
              android:orientation="horizontal"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content">
            </TabWidget>

             <FrameLayout android:id="@android:id/tabcontent"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content">
  <LinearLayout android:id="@+id/ll01" android:layout_width="fill_parent"
        android:layout_height="fill_parent" android:gravity="center_horizontal"
        android:orientation="vertical">
        <EditText android:id="@+id/widget34" android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:text="EditText"
            android:textSize="18sp">
        </EditText>
        <Button android:id="@+id/widget30" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="Button">
        </Button>
    </LinearLayout>
    <LinearLayout android:id="@+id/ll02" android:layout_width="fill_parent"
        android:layout_height="fill_parent" android:gravity="center_horizontal"
        android:orientation="vertical">
        <AnalogClock android:id="@+id/widget36"
            android:layout_width="wrap_content" android:layout_height="wrap_content">
        </AnalogClock>
    </LinearLayout>
    <LinearLayout android:id="@+id/ll03" android:layout_width="fill_parent"
        android:layout_height="fill_parent" android:gravity="center_horizontal"
        android:orientation="vertical">
        <RadioGroup android:id="@+id/widget43"
            android:layout_width="166px" android:layout_height="98px"
            android:orientation="vertical">
            <RadioButton android:id="@+id/widget44"
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:text="RadioButton">
            </RadioButton>
            <RadioButton android:id="@+id/widget45"
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:text="RadioButton">
            </RadioButton>
        </RadioGroup>
    </LinearLayout>
             </FrameLayout>

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

 

TabHost tabHost = (TabHost) findViewById(R.id.tabhost);
        tabHost.setup();                                     //完成初始化
        TabWidget tabWidget = tabHost.getTabWidget();
        tabHost.addTab(tabHost.newTabSpec("tab1")  .setIndicator("tab1",  getResources().getDrawable(R.drawable.img01))  .setContent(R.id.1101));
        tabHost.addTab(tabHost   .newTabSpec("tab2").setIndicator("tab2",   getResources().getDrawable(R.drawable.img02))
                                  .setContent(R.id.1102));
        tabHost.addTab(tabHost   .newTabSpec("tab3").setIndicator("tab3",   getResources().getDrawable(R.drawable.img03))
                                   .setContent(R.id.1103));