首页 > 代码库 > 从零开始学android<TabHost标签组件.二十九.>

从零开始学android<TabHost标签组件.二十九.>

TabHost主要特点是可以在一个窗口中显示多组标签栏的内容,在Android系统之中每个标签栏就称为一个Tab,而包含这多个标签栏的容器就将其称为TabHost,TabHost类的继承结构如下所示:
java.lang.Object
   ? android.view.View
     ? android.view.ViewGroup
       ? android.widget.FrameLayout
         ? android.widget.TabHost 

常用方法如下所示
1
public TabHost(Context context)
构造
创建TabHost类对象
2
public void addTab(TabHost.TabSpec tabSpec)
普通
增加一个Tab
3
public TabHost.TabSpec newTabSpec(String tag)
普通
创建一个TabHost.TabSpec对象
4
public View getCurrentView()
普通
取得当前的View对象
5
public void setup()
普通
建立TabHost对象
6
public void setCurrentTab(int index)
普通
设置当前显示的Tab编号
7
public void setCurrentTabByTag(String tag)
普通
设置当前显示的Tab名称
8
public FrameLayout getTabContentView()
普通
返回标签容器
9
public void setOnTabChangedListener
(TabHost.OnTabChangeListener l)
普通
设置标签改变时触发

两种方式实现TabHost

方式一:直接让一个Activity程序继承TabActivity类;
方式二:利用findViewById()方法取得TagHost组件,并进行若干配置

第一种方式让一个类继承tabActivity

XMl文件 配置需要在一个xml文件中嵌套使用布局 来达到不同Tab中显示不同的内容

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_marginTop="50dp"
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="账号" />

            <EditText
                android:id="@+id/editText1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="10"
                android:textSize="25sp" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="密码" />

            <EditText
                android:id="@+id/editText2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="10"
                android:textSize="25sp" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="取消" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="登录" />
        </TableRow>
    </LinearLayout>

    <LinearLayout
        android:layout_marginTop="50dp"
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src=http://www.mamicode.com/"@drawable/a2" />>

JAVA文件设置


package com.example.tabhost;

import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivity extends TabActivity {
	private TabHost tabHost;//初始化TabHost组件
	private int reslayout[] = { R.id.login, R.id.image, R.id.timer , R.id.timer1,R.id.timer2};//设置对应的额xml文件
	private int images[]={R.drawable.cart,R.drawable.cloud,R.drawable.comment,R.drawable.gear,R.drawable.joystick};//设置显示的标题文件

	@SuppressWarnings("deprecation")
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.tabHost = super.getTabHost();//实例化TabHost组件
		// 取得LayoutInflater对象
		LayoutInflater.from(this).inflate(R.layout.linearlayout,//制定布局
				this.tabHost.getTabContentView(),//制定标签增加的容器 
				true);
		
		for (int i = 0; i < reslayout.length; i++) {
			TabSpec myTab = tabHost.newTabSpec("tab" + i);// 定义TabSpec
			myTab.setIndicator(null,getResources().getDrawable(images[i])) ;		// 设置标签
			
			myTab.setContent(this.reslayout[i]) ;		// 设置显示的组件
			this.tabHost.addTab(myTab) ;
		}
	}

}

效果图如下






使用配置文件设置。
这种方法较为常见,可以讲TabHost置于底部

但是布局文件较为复杂,大家可以参照例子进行具体的学习

XML文件

<?xml version="1.0" encoding="utf-8"?>
<TabHost 
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/tabhost" 
	android:orientation="vertical"
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent">
	<RelativeLayout 
		android:orientation="vertical"
		android:layout_width="fill_parent" 
		android:layout_height="fill_parent">
	<TabWidget 
		android:id="@android:id/tabs"
		android:layout_width="fill_parent" 
		android:layout_height="wrap_content"
		android:layout_alignParentBottom="true" />
		<FrameLayout 
			android:id="@android:id/tabcontent"
			android:layout_width="fill_parent" 
			android:layout_height="fill_parent"> 
			 <LinearLayout
        
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="账号" />

            <EditText
                android:id="@+id/editText1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="10"
                android:textSize="25sp" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="密码" />

            <EditText
                android:id="@+id/editText2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="10"
                android:textSize="25sp" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="取消" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="登录" />
        </TableRow>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src=http://www.mamicode.com/"@drawable/a2" />>
JAVA文件配置

package com.example.tabhost;

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

public class MainActivity extends Activity {			// 直接继承Activity
	private TabHost myTabHost;							// 定义TabHost
	private int[] layRes = { R.id.login, R.id.image 
			, R.id.timer, R.id.timer1, R.id.timer2 };							// 定义内嵌布局管理器ID
	private int images[]={R.drawable.cart,R.drawable.cloud,R.drawable.comment,R.drawable.gear,R.drawable.joystick};//标题图片数据

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.activity_main) ;			// 调用默认布局管理器
		this.myTabHost = (TabHost) super.findViewById(R.id.tabhost); // 取得TabHost对象
		this.myTabHost.setup() ;						// 建立TabHost对象
		for (int x = 0; x < this.layRes.length; x++) {	// 循环取出所有布局标记
			TabSpec myTab = myTabHost.newTabSpec("tab" + x);	// 定义TabSpec
			myTab.setIndicator(null,getResources().getDrawable(images[x])) ;			// 设置标签文字
			myTab.setContent(this.layRes[x]) ;			// 设置显示的组件
			this.myTabHost.addTab(myTab) ;				// 增加标签
		}
		this.myTabHost.setCurrentTab(0) ;				// 设置开始索引
	}
}






使用TabHost组件设置Tab切换与intent的结合在开发中较常用到,是app开发框架的基础

下节预报:
Menu菜单


从零开始学android<TabHost标签组件.二十九.>