最近在做一个APP，需要在首页实现一个在底部导航切换页面的功能，查了很多资料，在此记录一下实现流程。闲话不多说，我们开始撸代码。
效果图
无图无真相，没有图片，就没有说服力，先让我们先看下实现的效果图。
由于作者缺乏审美能力，请忽略颜色或布局的问题。
0、准备工作
毫无疑问，我们需要Design库的支持，先依赖它吧
implementation 'com.android.support:design:27.0.2'
1、首页布局
在 activity_home.xml 文件中写布局代码
我们用ViewPager来存放Fragment，TabLayout存放导航条。
还有一些的属性，可能是你需要的，如下
app:tabSelectedTextColor // 改变选中字体的颜色
app:tabTextColor // 改变未选中字体的颜色
app:tabIndicatorColor // 改变指示器下标的颜色
app:tabBackground // 改变整个TabLayout的颜色
2、编写Adapter
搜索发现，网上关于它的Adapter有几个，我们姑且参考Google的例子实现吧，会在后面给出链接地址。
class AdapterFragment(fm: FragmentManager, context: Context) : FragmentPagerAdapter(fm) {
private lateinit var list : List
private var mContext : Context = context
private val titles = listOf("消息", "首页", "我")
fun setData(list: List) {
this.list = list
}
override fun getItem(position: Int): Fragment = list[position]
override fun getCount(): Int = list.size
override fun getPageTitle(position: Int): CharSequence? = titles[position]
}
3、使用Adapter
我们在Activity中使用我们编写的Adapter，诚然我们写的Adapter是最简单的，因此Google例子给它取名为：SampleFragmentPagerAdapter 。
val fm : FragmentManager = supportFragmentManager
val adapter = AdapterFragment(fm, this)
val list : List = listOf(NewFragment(), HomeFragment(), MyFragment())
adapter.setData(list)
homeViewPagerNav.adapter = adapter
aHomeTabLayoutNav.setupWithViewPager(homeViewPagerNav)
4、自定义View
无论是显示文本、图标，亦或者图文，并不能保证可以满足我们的需求或是野心。只有能在Tab上显示任何我们想显示的内容，才能打动我们，从而感叹“好的，就用你来显示Tab了！”。可喜可贺的是，TabLayout中的Tab是支持设置自定义View的。
切换文字颜色变化
切换背景变化
需要说明的是，你可能会觉得我这个写得有些臃肿，有一个简单写法，但是不能使用字体图标，所以，作者采用了这种。
5、Adapter支持自定义View
此时，你需要让Adapter支持自定义View，这样才能保证我们的自定义View能被使用。
private val icons = listOf(R.id.customTvHomeNavIconNews,
R.id.customTvHomeNavIconHome,
R.id.customTvHomeNavIconMy)
@SuppressLint("WrongConstant")
fun getTabView(position: Int): View {
val v = LayoutInflater.from(mContext).inflate(R.layout.custom_home_tab_nav, null)
v.isSelected = false
val icon = v.findViewById(icons[position])
icon.visibility = visible
IconFontUtil.injectFont(icon)
val tv = v.findViewById(R.id.customTvHomeNavText)
tv.text = titles[position]
return v
}
6、Activity支持自定义View
for (i in 0 until aHomeTabLayoutNav.tabCount) {
aHomeTabLayoutNav.getTabAt(i)!!.customView = adapter.getTabView(i)
}
aHomeTabLayoutNav.getTabAt(1)!!.select()
此时，我们的自定义就会被使用了，你可以运行一下，看看效果。
参考文档
1、TabLayout使用详解
2、Google Play Style Tabs using TabLayout
3、Design库-TabLayout属性详解
4、ViewPager 全面剖析及使用详解
5、 TabLayout的简单运用和若干问题的解决
6、Android之TabLayout使用和默认选中+移动(解决)
7、Android---Tablayout自定义Tab的背景和字体的颜色变化