最近在做一个APP，需要在首页实现一个在底部导航切换页面的功能，查了很多资料，在此记录一下实现流程。闲话不多说，我们开始撸代码。
效果图
无图无真相，没有图片，就没有说服力，先让我们先看下实现的效果图。
默认APP选中首页
点击或向左滑动
点击或向右滑动
由于作者缺乏审美能力，请忽略颜色或布局的问题。
0、准备工作
毫无疑问，我们需要Design库的支持，先依赖它吧
implementation 'com.android.support:design:27.0.2'
1、首页布局
在 activity_home.xml 文件中写布局代码
<android.support.v4.view.ViewPager
android:id="@+id/homeViewPagerNav"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<android.support.design.widget.TabLayout
android:id="@+id/aHomeTabLayoutNav"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabIndicatorHeight="0dp"
app:tabTextColor="#777"
app:tabMode="fixed"
app:tabSelectedTextColor="@android:color/holo_blue_bright"
android:background="#dddddd"/>
我们用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<Fragment>
private var mContext : Context = context
private val titles = listOf("消息", "首页", "我")
fun setData(list: List<Fragment>) {
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<Fragment> = listOf(NewFragment(), HomeFragment(), MyFragment())
adapter.setData(list)
homeViewPagerNav.adapter = adapter
aHomeTabLayoutNav.setupWithViewPager(homeViewPagerNav)
4、自定义View
无论是显示文本、图标，亦或者图文，并不能保证可以满足我们的需求或是野心。只有能在Tab上显示任何我们想显示的内容，才能打动我们，从而感叹“好的，就用你来显示Tab了！”。可喜可贺的是，TabLayout中的Tab是支持设置自定义View的。
<TextView
android:id="@+id/customTvHomeNavIconNews"
android:layout_width="match_parent"
android:layout_height="30dp"
android:text=""
android:gravity="center|bottom"
android:visibility="gone"
android:enabled="false"
android:textSize="20dp"
android:textColor="@color/home_tab_nav_text"/>
<TextView
android:id="@+id/customTvHomeNavIconHome"
android:layout_width="match_parent"
android:layout_height="30dp"
android:text=""
android:gravity="center|bottom"
android:visibility="gone"
android:enabled="false"
android:textSize="20dp"
android:textColor="@color/home_tab_nav_text"/>
<TextView
android:id="@+id/customTvHomeNavIconMy"
android:layout_width="match_parent"
android:layout_height="30dp"
android:text=""
android:gravity="center|bottom"
android:visibility="gone"
android:enabled="false"
android:textSize="20dp"
android:textColor="@color/home_tab_nav_text"/>
<TextView
android:id="@+id/customTvHomeNavText"
android:layout_width="match_parent"
android:layout_height="20dp"
android:text="text"
android:textSize="14dp"
android:gravity="center"
android:enabled="false"
android:textColor="@color/home_tab_nav_text"/>
切换文字颜色变化
<item android:state_pressed="true" android:color="@color/colorPrimaryDark"/>
<item android:state_enabled="true" android:color="@color/colorPrimaryDark"/>
<item android:state_selected="true" android:color="@color/colorPrimaryDark"/>
<item android:color="@color/color_777"/>
切换背景变化
<item android:drawable="@android:color/holo_blue_bright" android:state_selected="true"/>
<item android:drawable="@android:color/darker_gray" android:state_selected="true"/>
需要说明的是，你可能会觉得我这个写得有些臃肿，有一个简单写法，但是不能使用字体图标，所以，作者采用了这种。
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<TextView>(icons[position])
icon.visibility = visible
IconFontUtil.injectFont(icon)
val tv = v.findViewById<TextView>(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()
此时，我们的自定义就会被使用了，你可以运行一下，看看效果。
Home
参考文档
2、Google Play Style Tabs using TabLayout
