在我们开发app过程中，免不了使用底部导航栏，所以今天我们就来看看怎么样用kotlin实现底部导航栏。

新建项目

新建一个KotlinBottomNavigationDemo项目。
在gradle中添加依赖

implementation 'com.google.android.material:material:1.0.0'

完成布局工作

首先准备三张图标放到drawable目录下，分别命名为ic_home.png、ic_news.png、ic_user.png。作为轮换图标。
在layout目录下新建三个xml文件，分别表示三个页面下的显示效果。
在三个页面下分别编写内容：

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/home"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:gravity="center"android:textSize="14sp" />

LinearLayout>

fragment_news.xml

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

<TextViewandroid:id="@+id/news"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:gravity="center"android:textSize="14sp" />LinearLayout>

fragment_user.xml

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

<TextViewandroid:id="@+id/user"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:gravity="center"android:textSize="14sp" />

LinearLayout>

activity_main.xml

在此设置主页面显示。

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity">

<FrameLayoutandroid:id="@+id/container"android:layout_width="match_parent"android:layout_height="match_parent">

<com.google.android.material.bottomnavigation.BottomNavigationViewandroid:id="@+id/bottomNavigation"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:background="#fff"app:itemIconTint="@color/itemTint"app:itemTextColor="@color/itemTextColor"app:labelVisibilityMode="labeled"app:menu="@menu/bottom_nav_menu" />

FrameLayout>

androidx.constraintlayout.widget.ConstraintLayout>

res目录下新建一个menu文件夹，在menu文件夹下新建bottom_nav_menu.xml文件。要几个界面就在这里写几个item，写法如下：

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">

<itemandroid:id="@+id/nav_home"android:icon="@drawable/ic_home" android:title="@string/home"/>  

<itemandroid:id="@+id/nav_news"android:icon="@drawable/ic_news"android:title="@string/news"/>

<itemandroid:id="@+id/nav_user"android:icon="@drawable/ic_user"android:title="@string/user"/>

menu>

最后再在color.xml中设置一下颜色。

<?xml version="1.0" encoding="utf-8"?><resources><color name="colorPrimary">#008577color><color name="colorPrimaryDark">#00574Bcolor><color name="colorAccent">#D81B60color><color name="itemTint">#878787color><color name="itemTextColor">#121212color>resources>

编写逻辑代码

按此格式新建三个.kt文件，分别编写对应界面的逻辑显示。

HomeFragment

package com.lkzhang.kotlinbottomnavigation.fragments

import android.annotation.SuppressLintimport android.os.Bundleimport androidx.fragment.app.Fragmentimport android.view.LayoutInflaterimport android.view.Viewimport android.view.ViewGroupimport com.lkzhang.kotlinbottomnavigation.Rimport kotlinx.android.synthetic.main.fragment_home.*

class HomeFragment : Fragment() {

override fun onCreateView(        inflater: LayoutInflater, container: ViewGroup?,        savedInstanceState: Bundle?): View? {return inflater.inflate(R.layout.fragment_home, container, false)}

@SuppressLint("SetTextI18n")override fun onViewCreated(view: View, savedInstanceState: Bundle?) {super.onViewCreated(view, savedInstanceState)        home.text = "This is Home Fragment"}

}

NewsFragment

package com.lkzhang.kotlinbottomnavigation.fragments

import android.annotation.SuppressLintimport android.os.Bundleimport androidx.fragment.app.Fragmentimport android.view.LayoutInflaterimport android.view.Viewimport android.view.ViewGroupimport com.lkzhang.kotlinbottomnavigation.Rimport kotlinx.android.synthetic.main.fragment_home.*import kotlinx.android.synthetic.main.fragment_news.*

class NewsFragment : Fragment() {

override fun onCreateView(        inflater: LayoutInflater, container: ViewGroup?,        savedInstanceState: Bundle?): View? {return inflater.inflate(R.layout.fragment_news, container, false)}

@SuppressLint("SetTextI18n")override fun onViewCreated(view: View, savedInstanceState: Bundle?) {super.onViewCreated(view, savedInstanceState)

        news.text = "This is News Fragment"}

}

UserFragment

package com.lkzhang.kotlinbottomnavigation.fragments

import android.annotation.SuppressLintimport android.os.Bundleimport androidx.fragment.app.Fragmentimport android.view.LayoutInflaterimport android.view.Viewimport android.view.ViewGroupimport com.lkzhang.kotlinbottomnavigation.Rimport kotlinx.android.synthetic.main.fragment_home.*import kotlinx.android.synthetic.main.fragment_user.*

class UserFragment : Fragment() {

override fun onCreateView(        inflater: LayoutInflater, container: ViewGroup?,        savedInstanceState: Bundle?): View? {return inflater.inflate(R.layout.fragment_user, container, false)}

@SuppressLint("SetTextI18n")override fun onViewCreated(view: View, savedInstanceState: Bundle?) {super.onViewCreated(view, savedInstanceState)        user.text = "This is User Fragment"}}

MainActivity

在主活动中编写对应的逻辑，设计点击事件。

package com.lkzhang.kotlinbottomnavigation

import androidx.appcompat.app.AppCompatActivityimport android.os.Bundleimport androidx.fragment.app.Fragmentimport com.lkzhang.kotlinbottomnavigation.fragments.HomeFragmentimport com.lkzhang.kotlinbottomnavigation.fragments.NewsFragmentimport com.lkzhang.kotlinbottomnavigation.fragments.UserFragmentimport kotlinx.android.synthetic.main.activity_main.*import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)        title = resources.getString(R.string.home)loadFragment(HomeFragment())

        bottomNavigation.setOnNavigationItemSelectedListener{when(it.itemId){                R.id.nav_home -> {                    title = resources.getString(R.string.home)loadFragment(HomeFragment())return@setOnNavigationItemSelectedListener true}

                R.id.nav_news -> {                    title = resources.getString(R.string.news)loadFragment(NewsFragment())return@setOnNavigationItemSelectedListener true}

                R.id.nav_user -> {                    title = resources.getString(R.string.user)loadFragment(UserFragment())return@setOnNavigationItemSelectedListener true}

}false}

}

private fun loadFragment(fragment: Fragment) {val transaction = supportFragmentManager.beginTransaction()        transaction.replace(R.id.container, fragment)        transaction.addToBackStack(null)        transaction.commit()}

override fun onBackPressed() {super.onBackPressed()finish()}}

最后效果

参考源码

https://github.com/gunawanasch/BottomNavigationAndroid