前言
加入Adroid开发这个阵营已经快两年了，一直使用Java开发，之前也学过Kotlin，但并没有真正运用于项目实践，Kotlin在实际使用中还是有利有弊的，习惯使用Java开发来说，Java更顺手。最近重温Kotlin，下面的Demo是利用实现App的框架，即所谓底部导航。

效果图

开始
底部导航我们采用ViewPager+Fragment实现，具体看代码。

MainActivity的布局activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent" android:layout_height="match_parent"

        android:orientation="vertical">

    <android.support.v4.view.ViewPager
            android:layout_weight="1"
            android:id="@+id/vpMain"
            android:layout_width="match_parent"
            android:layout_height="0dp"/>


    <android.support.design.widget.TabLayout
            android:background="@color/colorWhite"
            android:id="@+id/tlMain"
            app:tabIndicatorColor="@color/colorWhite"
            android:layout_width="match_parent"
            android:layout_height="50dp"/>

</LinearLayout>

在布局中我们主要是使用控件ViewPager+TabLayout使用基本框架。所以我们需要在build.gradle添加下面依赖：

    implementation 'com.android.support:design:28.0.0'
    implementation 'com.android.support:appcompat-v4:28.0.0'

我们注意到在TabLayout中，我们设置tabIndicatorColor与背景一样的颜色，主要是为了在视觉隐藏底部导航栏的指示器。

接下来是MainActivity的实现，ViewPager容量的大小即Fragment的数量大家可根据自己的需求进行定义。

MainActivity的实现

class MainActivity : BaseActivity() {

    var fragments: MutableList<BaseFragment>? = null

    //底部要显示的标题
    var titles: MutableList<String>? = null
    
    //底部要显示的icon
    var icons: MutableList<String>? = null

    var adapter: MainAdapter? = null

    override fun setResourceId(): Int = R.layout.activity_main

    override fun preInitData() {
        fragments = mutableListOf(MainFragment(), MainFragment(), MainFragment(), MainFragment())


        titles = mutableListOf("首页", "时间轴", "发现", "我的")

        icons = mutableListOf(
            resources.getString(R.string.home),
            resources.getString(R.string.timeline),
            resources.getString(R.string.found),
            resources.getString(R.string.me)
        )
        adapter = MainAdapter(this, fragments!!, titles!!, supportFragmentManager)

    }

    override fun initViews() {

        vpMain.adapter = adapter

        tlMain.setupWithViewPager(vpMain)

        initBottomView()

    }
    /**
     * 初始底部的导航栏视图
     */
    private fun initBottomView() {

        val iconFont = Typeface.createFromAsset(assets, "tab.ttf")

        for ((index) in fragments!!.withIndex()) {
            val view = LayoutInflater.from(this).inflate(R.layout.layout_main_tab, null, false)

            val tvHome = view.findViewById<TextView>(R.id.tvIcon)

            tvHome.text = icons!![index]

            tvHome.typeface = iconFont

            val tvText = view.findViewById<TextView>(R.id.tvText)

            tvText.text = titles!![index]

            tlMain.getTabAt(index)!!.customView = view
        }
    }

    override fun initListener() {
    }

    override fun initData() {
    }

}

变量fragments用于存储要展示的Fragment，变量titles持有底部导航栏的标题，而icons主要用于持有底部icon，并分别在函数preInitData中进行初始化。在initViews函数初始类型为 MainAdapter的适配器adapter，并设置给了ViewPager,同时将ViewPager与TabLayout相关联。
接下来initBottomView函数，底部导航栏的初始化，也是本篇文章的重点。
安装以往的习惯，我一般会在网上下载八个png的icon，对应四个模块的选中状态和没有选中状态。而这次采用icon-font来实现。
第一步，从网上到icon-font或者UI工程师和对应的ttf文件和字符串。下面推荐一个:
网站 http://iconfont.cn/
教程 http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code
根据提示在string文件中添加

    <string name="home">&#xe6ce;</string>
    <string name="found">&#xe608;</string>
    <string name="me">&#xe605;</string>
    <string name="timeline">&#xe649;</string>

在代码for循环中主要是实行自定义TabLayout的customView视图,以达到我们想要的效果。
tlMain.getTabAt(index)!!.customView = view

layout_main_tab实现

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:gravity="center"
              android:orientation="vertical"
              android:layout_height="match_parent">

    <TextView
            android:paddingTop="2dp"
            android:id="@+id/tvIcon"
            android:gravity="center"
            android:text=""
            android:textColor="@color/tab_text_color"
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    <TextView
            android:layout_marginTop="2dp"
            android:id="@+id/tvText"
            android:gravity="center"
            android:text=""
            android:textSize="8sp"
            android:textColor="@color/tab_text_color"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

</LinearLayout>

通过上面的步骤，基本就可以在半小时内快速实现一个基本的框架。

代码很简单，方便新手入门。不懂可以提问哦~

Demo代码<git@github.com:zhangwenshuan/App.git>

喜欢就Star哦