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

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

                    

                    

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

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

1. 布局文件

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

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"android:id="@android:id/tabhost"android:layout_width="match_parent"android:layout_height="match_parent" ><LinearLayout  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:paddingLeft="1dip"  android:paddingRight="1dip"/><FrameLayout android:id="@android:id/tabcontent"  android:layout_width="fill_parent"             android:layout_height="1dip"  android:layout_weight="1"/></LinearLayout>  </TabHost>

在博主的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;//第一个Tabintent=new Intent(this,SearchSimpleActivity.class);spec = tabHost.newTabSpec("1")//新建一个Tab，标识为1（参数是字符串，表示选项卡的位置标识） .setIndicator("作者查询")//设置界面上显示的选项卡名称.setContent(intent);//设置显示的intenttabHost.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，每个里面放了一张图片。

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/tabhost"    android:layout_width="match_parent"    android:layout_height="match_parent" >        <LinearLayout         android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:orientation="vertical">                <TabWidget             android:id="@android:id/tabs"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="horizontal"/>                <FrameLayout             android:id="@android:id/tabcontent"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1">                        <LinearLayout                 android:id="@+id/alwayswet"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:orientation="vertical">                <ImageView                     android:scaleType="fitXY"                    android:layout_height="fill_parent"                    android:layout_width="fill_parent"                    android:src="@drawable/alwayswet"/>            </LinearLayout>                        <LinearLayout                 android:id="@+id/isanimal"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:orientation="vertical">                <ImageView                     android:scaleType="fitXY"                    android:layout_height="fill_parent"                    android:layout_width="fill_parent"                    android:src="@drawable/isanimal"/>            </LinearLayout>                        <LinearLayout                 android:id="@+id/nezha"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:orientation="vertical">                <ImageView                     android:scaleType="fitXY"                    android:layout_height="fill_parent"                    android:layout_width="fill_parent"                    android:src="@drawable/nazha"/>            </LinearLayout>                    </FrameLayout>            </LinearLayout>    </TabHost>

再看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 {@Overrideprotected 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);}}