前言
加入Adroid開(kāi)發(fā)這個(gè)陣營(yíng)已經(jīng)快兩年了，一直使用Java開(kāi)發(fā)童芹，之前也學(xué)過(guò)Kotlin涮瞻，但并沒(méi)有真正運(yùn)用于項(xiàng)目實(shí)踐，Kotlin在實(shí)際使用中還是有利有弊的假褪，習(xí)慣使用Java開(kāi)發(fā)來(lái)說(shuō)署咽，Java更順手。最近重溫Kotlin嗜价，下面的Demo是利用實(shí)現(xiàn)App的框架艇抠，即所謂底部導(dǎo)航。

效果圖

開(kāi)始
底部導(dǎo)航我們采用ViewPager+Fragment實(shí)現(xiàn)久锥，具體看代碼家淤。

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中瑟由，我們?cè)O(shè)置tabIndicatorColor與背景一樣的顏色絮重，主要是為了在視覺(jué)隱藏底部導(dǎo)航欄的指示器。

接下來(lái)是MainActivity的實(shí)現(xiàn)歹苦，ViewPager容量的大小即Fragment的數(shù)量大家可根據(jù)自己的需求進(jìn)行定義青伤。

MainActivity的實(shí)現(xiàn)

class MainActivity : BaseActivity() {

    var fragments: MutableList<BaseFragment>? = null

    //底部要顯示的標(biāo)題
    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("首頁(yè)", "時(shí)間軸", "發(fā)現(xiàn)", "我的")

        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()

    }
    /**
     * 初始底部的導(dǎo)航欄視圖
     */
    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用于存儲(chǔ)要展示的Fragment，變量titles持有底部導(dǎo)航欄的標(biāo)題殴瘦，而icons主要用于持有底部icon狠角，并分別在函數(shù)preInitData中進(jìn)行初始化。在initViews函數(shù)初始類型為 MainAdapter的適配器adapter蚪腋，并設(shè)置給了ViewPager,同時(shí)將ViewPager與TabLayout相關(guān)聯(lián)丰歌。
接下來(lái)initBottomView函數(shù)，底部導(dǎo)航欄的初始化屉凯，也是本篇文章的重點(diǎn)立帖。
安裝以往的習(xí)慣，我一般會(huì)在網(wǎng)上下載八個(gè)png的icon悠砚，對(duì)應(yīng)四個(gè)模塊的選中狀態(tài)和沒(méi)有選中狀態(tài)晓勇。而這次采用icon-font來(lái)實(shí)現(xiàn)。
第一步灌旧，從網(wǎng)上到icon-font或者UI工程師和對(duì)應(yīng)的ttf文件和字符串绑咱。下面推薦一個(gè):
網(wǎng)站 http://iconfont.cn/
教程 http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code
根據(jù)提示在string文件中添加

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

在代碼for循環(huán)中主要是實(shí)行自定義TabLayout的customView視圖,以達(dá)到我們想要的效果。
tlMain.getTabAt(index)!!.customView = view

layout_main_tab實(shí)現(xiàn)

<?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>

通過(guò)上面的步驟节榜，基本就可以在半小時(shí)內(nèi)快速實(shí)現(xiàn)一個(gè)基本的框架羡玛。

代碼很簡(jiǎn)單，方便新手入門(mén)宗苍。不懂可以提問(wèn)哦~

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

喜歡就Star哦