android tabhost的使用,FragmentTabHost的使用

FragmentTabHost

前言

现在很多APP的主页面都采用底部页签的样式，点击不同的底部标签能够在当前页面显示不同内容，实现的手段有很多种，今天我们来说一说使用FragmentTabHost+Fragment构建底部页签和页面内容。

思考

开始之前，我们先来思考一下，如果我们不使用FragmentTabHost构建主页面，那么这样的效果该怎么实现呢？

可能会想到不同页签对应的页面可以使用不同的Fragment，也就是需要一个FrameLayout来装这些Fragment，这样，主页面的布局就是上面一大部分是一个大大的FrameLayout，底部因为需要显示不同的页签，页签是横向排列的，而且一般是等分的，这就可以使用LinearLayout来实现了，每个页签里面可能会显示图片和文字，图片和文字可能还会有选中状态，我们可以在点击到哪个页签时，再设置哪个页签的选中状态，然后切换不同的Fragment...

这可能是我们第一时间想到的最简单的实现方案，接下来我们来看一看FragmentTabHost，看看它和我们想的“最简单实现方案”有什么不同？

使用FragmentTabHost

如果你使用androidx，它位于androidx.fragment.app包下，如果不使用androidx，那么它位于android support包中，这标志着你需要引入android support包的依赖，可以是v4包，也可以是v13包...

不过在androidx和support-v13包中，FragmentTabHost类都被标记为了废弃，官方不建议我们使用它了，但是不妨碍我们对它的学习，后续我们可以借鉴它的实现思路或者代码封装我们自己的FragmentTabHost(因为原生的FragmentTabHost可能满足不了我们的需求)。

构建布局文件

开发页面的第一步一般都是构建布局文件，我们来看看使用FragmentTabHost的主页面布局文件是什么样的？

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@android:id/tabcontent"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" />

android:layout_width="match_parent"

android:layout_height="1px"

android:background="@color/colorPrimary" />

android:id="@android:id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

上面的布局文件中，我们使用FragmentTabHost来做根布局，由于FragmentTabHost继承自TabHost，TabHost又继承自FrameLayout，所以我们不能把子View直接放在它里面，这会造成布局的遮挡，这里我们使用了LinearLayout，把它设置成竖直方向排列，里面用FrameLayout来显示Fragment，用TabWidget显示底部页签。需要注意两点：

显示Fragment的FrameLayout的id是@android:id/tabcontent；

显示底部页签的TabWidgetid是@android:id/tabs。

要想使用FragmentTabHost，就必须使用这两个系统定义的id，不然程序会crash，因为在TabHost中会通过findViewById找这两个View，找不到的话会抛出异常。

从布局上看我们发现这跟我们前面想的“最简单实现方案”有些相似，确实，FragmentTabHost就是这种思路的封装实现。

初始化FragmentTabHost

完成布局文件之后，我们就需要在代码中设置FragmentTabHost了：

/* 内容 */

private val fragments = arrayOf(

StarFragment::class.java,

PlazaFragment::class.java,

ChatFragment::class.java,

MeFragment::class.java

)

// container是FragmentTabHost，初始化FragmentTabHost

container.setup(this, supportFragmentManager, android.R.id.tabcontent)

for (index in fragments.indices) {

val tabSpec = container.newTabSpec(index.toString())

// 设置底部标签View

tabSpec.setIndicator(provideTabView(index))

// FragmentTabHost添加Context和TabSpec

container.addTab(tabSpec, fragments[index], null)

}

我们来逐行分析上面这段初始化FragmentTabHost的代码...

container.setup(this, supportFragmentManager, android.R.id.tabcontent)

container就是FragmentTabHost这个根布局容器，调用setup方法，这个方法有三个参数，第一个参数是Context，传入当前activity就可以了，第二个参数是FragmentManager，通过FragmentActivity#getSupportFragmentManager()方法就可获取到，第三个参数需要传入显示Fragment的容器的id，也就是布局文件中设置id为tabcontent的FrameLayout。

for(index in fragments.indices)

对需要显示的Fragment集合进行遍历，以初始化底部页签和对应的内容。

val tabSpec = container.newTabSpec(index.toString())

通过调用newTabSpec方法实例化一个TabSpec，newTabSpec需要传入一个tag参数，我们可以理解这是为每个页签和内容设置一个tag，实际上FragmentTabHost内部也会用它从FragmentManager中获取Fragment，所以它也是每个Fragment的tag，这里我们直接使用数组索引来当tag了。

TabSpec还包含两个策略实例字段IndicatorStrategy mIndicatorStrategy和ContentStrategy mContentStrategy，一个表示底部页签View显示策略，一个表示页签对应的内容显示策略，不过这里的内容显示策略我们用不到，它只在TabHost中用到了，FragmentTabHost中并没有使用这个内容显示策略。

tabSpec.setIndicator(provideTabView(index))

设置底部页签View显示策略，传入我们想要显示的底部页签View，这里我们定义的每个页签样式如下：

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="5dp"

tools:ignore="SpUsage">

android:id="@+id/ivTab"

android:layout_width="25dp"

android:layout_height="25dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/tvTab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="5dp"

android:textColor="@android:color/black"

android:textSize="12dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@id/ivTab" />

包含一个ImageView和一个TextView。

provideTabView()方法实现如下：

/* 底部标签图片，它们是个selector */

private val tabImages = arrayOf(

R.drawable.selector_bottom_tab_star,

R.drawable.selector_bottom_tab_plaza,

R.drawable.selector_bottom_tab_chat,

R.drawable.selector_bottom_tab_me

)

/* 底部标签文本 */

private val tabTexts = arrayOf(

R.string.text_bottom_tab_star,

R.string.text_bottom_tab_plaza,

R.string.text_bottom_tab_chat,

R.string.text_bottom_tab_me

)

private fun provideTabView(index: Int): View =

layoutInflater.inflate(R.layout.view_bottom_tab, null).apply {

ivTab.setImageDrawable(ContextCompat.getDrawable(this@MainActivity, tabImages[index]))

tvTab.text = resources.getString(tabTexts[index])

}

底部页签的图片是selector，selector样式如下：

container.addTab(tabSpec, fragments[index], null)

设置底部页签和内容(即Fragment)，addTab()方法有三个参数，第一个参数是TabSpec，第二个参数是Class类型，也就是Fragment的Class类型，FragmentTabHost内部会通过反射获取Fragment实例，第三个参数是个Bundle，我们可以通过它给Fragment传递参数。

做完上面这些，主页面的构建就算完成了，下面需要做的就是完善每个Fragment的逻辑了。

总结

FragmentTabHost使用还是比较简单的，只需要注意上面提到的几个注意点就没问题，不过FragmentTabHost中的Fragment生命周期可能不是你想要的，它的生命周期是这样的：切换页签的时候，Fragment都会执行onDestroyView和onCreateView，这就意味着每次切换页签，Fragment里面的View都会被销毁，显示的页面View会被重建，如果你不想要Fragment生命周期是这样的该怎么办呢？哈哈，不好意思，FragmentTabHost做不到，只要你用FragmentTabHost，Fragment生命周期就是这样的，但是有了FragmentTabHost源码，我们可以在其基础上改一改实现一个我们自己的FragmentTabHost，这部分我们下回再说。