Android 之 TabHost

最新推荐文章于 2025-06-22 16:39:43 发布

Sunday_Vssupermadman

最新推荐文章于 2025-06-22 16:39:43 发布

阅读量509

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hsstc/article/details/9014877

Android 之 TabHost

一，概述。

TabHost是继承FrameLayout。是帧布局的一种，其中可以包含多个布局，然后根据用户的选择显示不同的界面。

下面我从几个方面来学习TabHost——选项卡类。

二，TabActivity类。

tabHost的实现通常有两种方法，一种是直接继承TabActivity，另一种是通过自己写xml定义tabHost布局。继承TabActivity类方法比较简单。

首先我们看

继承TabActivity怎么使用。

1.继承TabActivity第一种情况

MainActivity.java

package com.example.testinflate;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;

public class MainActivity extends TabActivity {
	
	private TabHost tabHost;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		//首先要加载含有TabHost的布局文件
		//因为这个activity继承了TabActivity，就隐含了一个TabHost，在布局文件中写入的TabHost就是隐含的那个TabHost.
		setContentView(R.layout.activity_main);
		
		//可以通过getTabHost得到隐含的TabHost，如果没有继承TabActivity，就不能这么使用
		tabHost = getTabHost();
		//setIndicator设置的是tab标签上的内容
		//setContent设置的是tab页的内容，在xml中是在FrameLayout的部分
		tabHost.addTab(tabHost.newTabSpec("hello1").setIndicator("哈罗1").setContent(R.id.tv1));
		tabHost.addTab(tabHost.newTabSpec("hello2").setIndicator("哈罗2").setContent(R.id.tv2));
		tabHost.addTab(tabHost.newTabSpec("hello3").setIndicator("哈罗3").setContent(R.id.tv3));
		
	}  

}

activity_main.xml

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

	<TabWidget
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    android:id="@android:id/tabs"/>
	<FrameLayout
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:id="@android:id/tabcontent">
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:id="@+id/tv1"
	        android:text="I'm tv1"/>
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:id="@+id/tv2"
	        android:text="I'm tv2"/>
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:id="@+id/tv3"
	        android:text="I'm tv3"/>
	</FrameLayout>

	</LinearLayout>
</TabHost>

以上代码，需要注意以下几点：

1.由于是继承TabActivity，则如果xml文件中含有TabHost标签，则必须使用 setContentView(R.layout.activity_main)。

2.由于是继承TabActivity，所以在xml中TabHost的id是android:id="@android:id/tabhost，在TabHost中还必须包含一个FrameLayout和一个TabWidget，TabWidget的id必须android:id="@android:id/tabs"，FrameLayout的id必须是android:id="@android:id/tabcontent。

2.继承TabActivity第二种情况。

MainActivity.java

		tabHost = getTabHost();
		//相当与使用系统默认的TabHost，这样xml中就不能有TabHost的标签
		LayoutInflater.from(this).inflate(R.layout.activity_main, tabHost.getTabContentView(), true);
		tabHost.addTab(tabHost.newTabSpec("hello1").setIndicator("哈罗1").setContent(R.id.tv1));  
		tabHost.addTab(tabHost.newTabSpec("hello2").setIndicator("哈罗2").setContent(R.id.tv2));  
		tabHost.addTab(tabHost.newTabSpec("hello3").setIndicator("哈罗3").setContent(R.id.tv3));

activity_main.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
         android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" >

	<TabWidget
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:id="@android:id/tabs"/>
	<FrameLayout
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    android:id="@android:id/tabcontent">
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:id="@+id/tv1"
	        android:text="I'm tv1"/>
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:id="@+id/tv2"
	        android:text="I'm tv2"/>
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:id="@+id/tv3"
	        android:text="I'm tv3"/>
	</FrameLayout>

</LinearLayout>

此种情况，与第一种情况大致相同，主意区别之处。

如果不继承TabActivity又怎么使用呢？

如果不继承TabActivity，则不能使用getTabHost函数，那么只能new一个新的TabHost。所以xml中必须含有TabHost这种标签。

MainActivity.java

		setContentView(R.layout.activity_main);
		//从xml中得到tabHost，此时的id不是系统的，是自定义的
		tabHost = (TabHost)findViewById(R.id.tabhost);
		//必须含有setup()函数
		tabHost.setup();
		tabHost.addTab(tabHost.newTabSpec("hello1").setIndicator("哈罗1").setContent(R.id.tv1));  
		tabHost.addTab(tabHost.newTabSpec("hello2").setIndicator("哈罗2").setContent(R.id.tv2));  
		tabHost.addTab(tabHost.newTabSpec("hello3").setIndicator("哈罗3").setContent(R.id.tv3));

activity_main.xml

<TabHost xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:id="@+id/tabhost"
 > 
 <LinearLayout
         android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" >

	<TabWidget
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:id="@android:id/tabs"/>
	<FrameLayout
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    android:id="@android:id/tabcontent">
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:id="@+id/tv1"
	        android:text="I'm tv1"/>
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:id="@+id/tv2"
	        android:text="I'm tv2"/>
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:id="@+id/tv3"
	        android:text="I'm tv3"/>
	</FrameLayout>

	</LinearLayout>
</TabHost>

以上代码，需要注意以下几点：

1.在xml中必须有TabHost项。

2.必须含有setup()函数。

3.TabHost的id需自定义，但是其他的照旧用系统给定id.

三，Tab界面可以是Activity。

这个时候，必须指定点击后显示哪一个tab，需要用到tabHost.setCurrentTabByTag("home")，一种办法是需要的activity implementstabHost TabHost.OnTabChangeListen，实现方法setOnTabChangedListener

public class MainActivity extends TabActivity implements OnCheckedChangeListener{  
    /** Called when the activity is first created. */  
    private TabHost mHost;  
    private RadioGroup radioderGroup;  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.maintabs);  
        //实例化TabHost  
        mHost=this.getTabHost();  
          
        //添加选项卡  
        mHost.addTab(mHost.newTabSpec("ONE").setIndicator("ONE")  
                    .setContent(new Intent(this,OneActivity.class)));  
        mHost.addTab(mHost.newTabSpec("TWO").setIndicator("TWO")  
                .setContent(new Intent(this,TwoActivity.class)));  
        mHost.addTab(mHost.newTabSpec("THREE").setIndicator("THREE")  
                .setContent(new Intent(this,ThreeActivity.class)));  
        mHost.addTab(mHost.newTabSpec("FOUR").setIndicator("FOUR")  
                .setContent(new Intent(this,FourActivity.class)));  
        mHost.addTab(mHost.newTabSpec("FIVE").setIndicator("FIVE")  
                .setContent(new Intent(this,FiveActivity.class)));  
          
        radioderGroup = (RadioGroup) findViewById(R.id.main_radio);  
        radioderGroup.setOnCheckedChangeListener(this);  
    }  
    @Override  
    public void onCheckedChanged(RadioGroup group, int checkedId) {  
        switch(checkedId){  
        case R.id.radio_button0:  
            mHost.setCurrentTabByTag("ONE");  
            break;  
        case R.id.radio_button1:  
            mHost.setCurrentTabByTag("TWO");  
            break;  
        case R.id.radio_button2:  
            mHost.setCurrentTabByTag("THREE");  
            break;  
        case R.id.radio_button3:  
            mHost.setCurrentTabByTag("FOUR");  
            break;  
        case R.id.radio_button4:  
            mHost.setCurrentTabByTag("FIVE");  
            break;  
        }         
    }  
}

四，各种样式的TabHost。

1.tab页在下的tabHost

只是在xml上有变化

<TabHost xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:id="@+id/tabhost"
 > 
 <LinearLayout
         android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" >

	<FrameLayout
	    android:layout_width="fill_parent"
	    android:layout_height="0dip"
	    android:layout_weight="1.0"
	    android:id="@android:id/tabcontent">
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:id="@+id/tv1"
	        android:text="I'm tv1"/>
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:id="@+id/tv2"
	        android:text="I'm tv2"/>
	    <TextView 
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:id="@+id/tv3"
	        android:text="I'm tv3"/>
	</FrameLayout>
	<TabWidget
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
		android:layout_weight="0.0"	    
	    android:id="@android:id/tabs"/>
	</LinearLayout>
</TabHost>

注意使用了layout_weight。