android Tab页详解 | 易学教程

一、android Tab的实现方式总结

说起Tab页，基本每个做移动端的都会需要。iOS中内置了一个，所以ioser用起来很方便。而android这一块就比较乱。

木器实现Tab效果的方式，主要有4种，下面分别来说一下他们的优缺点：

1.radioGroup-Fragment

这种实现方式代码量巨大，对所有的切换都需要自己来控制，逻辑复杂，效率低下。当然好处也很多，就是非常的灵活，很适合动态的做一些改变。radioGroup可以保证tab标签中只能有一个被选中，选中后就可以用FragmentManager来切换fragment达到tab页的切换效果。在切换时，我们还可以控制fragment的切换动画，达到左右滑入/滑出，或者渐变出现/消失灯效果。

2.Tabhost/TabhostActivity

这种实现方式可以说是android上最古老最正宗的，至今还可以在很多地方见到它的身影。但是它有个重大的缺陷——不支持Fragment，所以在3.0以后被google打入冷宫。

Tabhost相对RadioGroup来说，优点就是不需要写控制逻辑，只需要把子View一个个add进来，它自己就能实现控制。但是它的局限性非常之大，它只支持View而不支持Fragment，所以只能做控件切换，而不能做页面切换。但是用它来做控件切换也只支持点击切换，在动效上完全不及viewFliper和ViewPages，所以还需要把它和viewFliper配合使用，十分麻烦，所以本文暂且不表。

3.FragmentTabHost

继承自TabHost，是google从3.0时代推荐使用的，放在v4包中，专门用来切换fragment的，也是本文的重点。

4.我也忘了叫什么名字了

这个东西我忘了叫什么名字，是google从5.X时代推出的一种新的设计理念中（叫个M....什么的）的用来切换页面的玩意。在android官网看了一下这东东的效果，确实不错，但是可惜的是，貌似5.X以下版本不兼容。。。所以也先略过不表。

二、FragmentTabHost的结构剖析

首先看一下布局文件

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


    <FrameLayout  android:id="@+id/contentLayout"
	     android:layout_width="match_parent"
    	android:layout_height="0dp"
    	android:layout_weight="1">

    </FrameLayout>

 	<android.support.v4.app.FragmentTabHost
 	    android:id="@android:id/tabhost"
 	    android:layout_width="match_parent"
 	    android:layout_height="wrap_content"
 	    android:background="#F6F6F6"
 	    >
      
        <TabWidget
			android:layout_width="match_parent"
			android:layout_height="wrap_content">
			
		</TabWidget>

 	    <FrameLayout android:id="@android:id/tabcontent"
 	        android:layout_height="0dp" android:layout_width="0dp"
 	        />
 	</android.support.v4.app.FragmentTabHost>

</LinearLayout>

主要分为两大部分，一个是android.support.v4.app.FragmentTabHost控件及其内包含的一些子控件；除此之外就是一个我们自定义的Frame布局，随便起个id叫contentLayout。

TabWidget：android.support.v4.app.FragmentTabHost中有个子控件——TabWidget，这个控件就是我们用来盛放标签按钮的容器。

tabcontent：android.support.v4.app.FragmentTabHost中有另外一个子控件——tabcontent，这个控件P用没有，但是必须要摆在这里，至于为什么，忘了，好像是google的一个版本兼容问题导致的。

contentLayout：这才是真正的内容容器。

这两大部分的相对位置决定了tab按钮是在上面还是在下面。如果想再上面显示，就把android.support.v4.app.FragmentTabHost放在contentLayout的上面。

接下来是activity中的代码部分，核心的就这几句：

//获取布局文件中的FragmentTabHost对象
tabHost=(FragmentTabHost)super.findViewById(android.R.id.tabhost);
//初始化，参数依次是：context,FragmentManager,内容容器的id
tabHost.setup(this,super.getSupportFragmentManager(),R.id.contentLayout);
//不显示tab按钮之间的分割线
tabHost.getTabWidget().setDividerDrawable(null);
//设置监听
tabHost.setOnTabChangedListener(this);
//用名称创建一个tab子页，并设置按钮的图标
TabSpec tabSpec=tabHost.newTabSpec(tabs.name).setIndicator(drawable);
//把子页添加进FragmentTabHost控制器，参数依次是 子页，fragment.class,传给这个页面的参数（Bundle类型,可为空)
tabHost.addTab(tabSpec,fragment1.class,null);

最后贴上Demo下载地址，请用AndroidStudio打开