【Android】利用TabHost实现选项卡效果

最近写的一个App里有两个Activity分别实现不同的功能，但是博主觉得同等重要，都应该放在主界面上。所以，博主打算把主界面做成选项卡的样子，两个Activity分别在一个选项卡上，微信、新浪微博、淘宝、大众点评等App中都用到这样的选项卡。

                    

                    

下面博主就以自己的App为例，说说怎么实现选项卡，先晒博主自己的效果图：

上面已经说到，博主不同选项卡里是不同的Activity，其实不同选项卡也可以来自同一个Activity，博主这里重点介绍前者的实现方法，以下内容部分摘自 Android - TabHost 选项卡功能用法详解。

1. 布局文件

博主的main.xml文件，如下：

在博主的layout文件里，有以下几个组件需要说明：

• TabHost根标签：其id 必须引用 android的自带android:id="@android:id/tabhost"，这样在Activity界面才能使用 getHost()，获取这个TabHost 视图对象。
• TabWidget组件：该组件是选项卡切换按钮，与FrameLayout组件是必不可少的两个组件，通过点击该组件可以切换选项卡，其id 必须引用 android的自带android:id="@android:id/tabs"。
• FrameLayout组件：该组件中定义的子组件是TabHost中每个页面显示的选项卡, 可以将TabHost选项卡显示的视图定义在其中，其id 必须引用 android的自带android:id="@android:id/tabcontent。

如果想像博主一样，把选项卡的按钮放在屏幕下方，TabWidget就得写在FrameLayout后面，且FrameLayout必须设置android:layout_weight="1"。

2. Java代码

不论选项卡里是不同的Activity还是同一个Activity，首先要做的都是获取TabHost

TabHost tabHost = getTabHost();

然后创建选项卡，因为博主在不同选项卡里放的是不同Activity，所以需要用到Intent，比如博主第一个选项卡放SearchSimpleActivity。

TabSpec spec;
Intent intent;
//第一个Tab
intent=new Intent(this,SearchSimpleActivity.class);
spec = tabHost.newTabSpec("1")//新建一个Tab，标识为1（参数是字符串，表示选项卡的位置标识） 
		.setIndicator("作者查询")//设置界面上显示的选项卡名称
		.setContent(intent);//设置显示的intent
tabHost.addTab(spec);//添加进TabHost

至此选项卡的实现就完成了。多说一句，setIndicator()有三种：

• setIndicator(CharSequence label)
  
• setIndicator(CharSequence label, Drawable icon)
  
• setIndicator(View view)
  

博主这里用到的是第一种，在界面上选项卡按钮只用文字，如果想向上面微信等App的选项卡一样有图片或图片和文字结合，就要用后两种，博主还没有实验，这里mark一篇文章以备参考 自定义TabHost，TabWidget样式。

3. 用一个Activity实现多个选项卡

上面博主给的代码都是选项卡里放不同Activity的，如果选项卡中的内容布局都不太复杂，也可以将所有选项卡的布局都放在同一个Activity中，或者说放在同一个xml文件中（即上面的main.xml文件）。博主放不同Activity时xml文件里FrameLayout没有写任何子组件，但是第一部分已经说到，FrameLayout组件中定义的子组件是TabHost中每个页面显示的选项卡，所以如果我们把所有选项卡的布局都放在同一个xml文件中，只要给FrameLayout添加多个组件就可以了。

以 Android - TabHost 选项卡功能用法详解这篇文章中给的代码为例，最后实现效果是每个选项卡展示一张图片，可以看到FrameLayout中有三个LinearLayout，id分别为alwayswet、isanimal、nezha，每个里面放了一张图片。

再看Java代码，注意博主的setContent()参数是制定了Activity的Intent，这里参数是FrameLayout子组件LinearLayout的id。

package shuliang.han.tabhost_test;

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

public class MainActivity extends TabActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tabhost);
		
		TabHost tabHost = getTabHost();
		
		TabSpec page1 = tabHost.newTabSpec("tab1")
				.setIndicator("叫兽")
				.setContent(R.id.isanimal);
		tabHost.addTab(page1);
		
		TabSpec page2 = tabHost.newTabSpec("tab2")
				.setIndicator("老湿")
				.setContent(R.id.alwayswet);
		tabHost.addTab(page2);
		
		TabSpec page3 = tabHost.newTabSpec("tab3")
				.setIndicator("哪吒")
				.setContent(R.id.nezha);
		tabHost.addTab(page3);
	}

}