Android TabHost的使用-白红宇

Android TabHost的使用

阅读量：6296 次

发布时间：2019-06-22

本文共 5079 字，大约阅读时间需要 16 分钟。

　　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));

}

第

行代码的声明

TabDemo

类继承与

TabActivity

，与以往继承

Activity

不同，

TabActivity

支持内嵌多个

Activity

或

View

第

行代码通过

getTabHost()

函数获得了

Tab

标签页的容器，用以

承载可以点击的

Tab

标签和分页的界面布局。

第

行代码通过

LayoutInflater

将

tab1.xml

文件中的布局转换为

Tab

标签页可以使用的

View

对象

第

行代码使用

addTab()

函数添加了第

个分页，

tabHost.newTabSpec("TAB1")

表明在第

行代码中建立的

tabHost

上，添加一个标识为

TAB1

的

Tab

分页

第

行代码使用

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">

1. <LinearLayout android:id="@+id/ll01" android:layout_width="fill_parent"
2. android:layout_height="fill_parent" android:gravity="center_horizontal"
3. android:orientation="vertical">
4. <EditText android:id="@+id/widget34" android:layout_width="fill_parent"
5. android:layout_height="wrap_content" android:text="EditText"
6. android:textSize="18sp">
7. </EditText>
8. <Button android:id="@+id/widget30" android:layout_width="wrap_content"
9. android:layout_height="wrap_content" android:text="Button">
10. </Button>
11. </LinearLayout>
12. <LinearLayout android:id="@+id/ll02" android:layout_width="fill_parent"
13. android:layout_height="fill_parent" android:gravity="center_horizontal"
14. android:orientation="vertical">
15. <AnalogClock android:id="@+id/widget36"
16. android:layout_width="wrap_content" android:layout_height="wrap_content">
17. </AnalogClock>
18. </LinearLayout>
19. <LinearLayout android:id="@+id/ll03" android:layout_width="fill_parent"
20. android:layout_height="fill_parent" android:gravity="center_horizontal"
21. android:orientation="vertical">
22. <RadioGroup android:id="@+id/widget43"
23. android:layout_width="166px" android:layout_height="98px"
24. android:orientation="vertical">
25. <RadioButton android:id="@+id/widget44"
26. android:layout_width="wrap_content" android:layout_height="wrap_content"
27. android:text="RadioButton">
28. </RadioButton>
29. <RadioButton android:id="@+id/widget45"
30. android:layout_width="wrap_content" android:layout_height="wrap_content"
31. android:text="RadioButton">
32. </RadioButton>
33. </RadioGroup>
34. </LinearLayout>