[移动开发]Android 底部导航栏（一、BottomNavigationView+Menu+Fragment）

现在常用的App主页都会有一个底部导航栏，根据需求也使用过好几种方法进行实现，于是想着还是总结一下，今天还写一个简单的BottomNavigationView方法来实现这个功能

一、什么是BottomNavigationView？

它是android原生的一个底部导航框架，一般和Fragment一起使用。

二、实际操作

xml布局：最外层的layout不用管，那是databinding框架的根布局，主要的布局FrameLayout来装载fragment列表，BottomNavigationView实现底部导航栏，最后监听绑定实现点击切换

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:orientation="vertical">
        <androidx.appcompat.widget.AppCompatTextView  //只是个文本
            android:id="@+id/nav_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:gravity="center"
            android:padding="4dp"
            android:text="BottomNavigationView+Menu+Fragment"
            android:textColor="@color/black"
            android:textSize="18sp"
            android:textStyle="bold" />

        <FrameLayout 
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/nav_menu"
            android:layout_below="@id/nav_text" />

        <View  //只是个分界线
            android:layout_width="match_parent"
            android:layout_height="0.3dp"
            android:layout_above="@id/nav_menu"
            android:background="@color/tab_color_false"/>

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/nav_menu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/white"
            app:menu="@menu/nav_menu"
            tools:layout_height="50dp" />
    </RelativeLayout>
</layout>

其中BottomNavigationView控价下的app:menu属性为BottomNavigationView增加item

它是在menu文件下新增nav_menu布局，如何新建呢？看图

然后选择menu类型，命名就用默认的menu就行了 ，然后

?就可以了，然后往里面加item

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/yang_1"
        android:title="首页" />
    <item
        android:id="@+id/navigation_tools"
        android:icon="@drawable/yang_4"
        android:title="工具" />
    <item
        android:id="@+id/navigation_play"
        android:icon="@drawable/yang_5"
        android:title="娱乐" />
    <item
        android:id="@+id/navigation_relax"
        android:icon="@drawable/yang_2"
        android:title="放松" />
    <item
        android:id="@+id/navigation_user_center"
        android:icon="@drawable/yang_3"
        android:title="个人中心" />
</menu>

这样就把menu创建好了，接下来是Activity里面的代码：

/**
 * author: LiXiang
 * date:   2022/6/28 8:48 下午
 * description:
 */
class NavMenuActivity : BaseBindActivity<NavMenuActivityLayoutBinding>() {

    override val layout: Int
        get() = R.layout.nav_menu_activity_layout

    private lateinit var homeFragment: HomeFragment
    private lateinit var toolsFragment: ToolsFragment
    private lateinit var relaxFragment: RelaxFragment
    private lateinit var meFragment: MineFragment
    private lateinit var playFragment: PlayFragment
    private lateinit var fragments: Array<BaseFragment>
    private var mTextMessage: TextView? = null
    
    //监听Item
    private val mOnNavigationItemSelectedListener: BottomNavigationView.OnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_home -> {
                replaceFragment(fragments[0], fragments[0].tag.toString())
                mTextMessage?.text = "第1个fragment"
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_tools -> {
                replaceFragment(fragments[1], fragments[1].tag.toString())
                mTextMessage?.text = "第2个fragment"
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_play -> {
                replaceFragment(fragments[2], fragments[2].tag.toString())
                mTextMessage?.text = "第3个fragment"
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_relax -> {
                replaceFragment(fragments[3], fragments[3].tag.toString())
                mTextMessage?.text = "第4个fragment"
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_user_center -> {
                replaceFragment(fragments[4], fragments[4].tag.toString())
                mTextMessage?.text = "第5个fragment"
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }
    
    override fun initView() {
        val navigation: BottomNavigationView = findViewById(R.id.nav_menu)
        mTextMessage = findViewById(R.id.nav_text)
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
        navigation.itemIconTintList = null
        navigation.itemTextColor = ColorStateList.valueOf(ContextCompat.getColor(this, R.color.black))
        homeFragment = HomeFragment()
        toolsFragment = ToolsFragment()
        relaxFragment = RelaxFragment()
        meFragment = MineFragment()
        playFragment = PlayFragment()
        fragments = arrayOf(homeFragment, toolsFragment, playFragment, relaxFragment, meFragment)
        fragments.forEach {
            addFragment(it, it.tag.toString())
            hideFragment(it)
        }
        showFragment(fragments[0])
    }

    //添加Fragment到FragmentList中
    private fun addFragment(fragment: Fragment, tag: String) {
        val fragmentManager = supportFragmentManager
        val transaction: FragmentTransaction = fragmentManager.beginTransaction()
        transaction.add(R.id.fragment_container, fragment, tag)
        transaction.commit()
    }

    // 清空fragmentList的所有Fragment，替换成新的Fragment，注意Fragment里面的坑
    private fun replaceFragment(fragment: Fragment, tag: String) {
        val fragmentManager = supportFragmentManager
        val transaction: FragmentTransaction = fragmentManager.beginTransaction()
        transaction.replace(R.id.fragment_container, fragment, tag)
        transaction.commit()
    }

    //把Fragment设置成显示状态，但是并没有添加到FragmentList中
    private fun showFragment(fragment: Fragment) {
        val fragmentManager = supportFragmentManager
        val transaction: FragmentTransaction = fragmentManager.beginTransaction()
        transaction.show(fragment)
        transaction.commit()
    }

    //把Fragment设置成显示状态，但是并没有添加到FragmentList中
    private fun hideFragment(fragment: Fragment) {
        val fragmentManager = supportFragmentManager
        val transaction: FragmentTransaction = fragmentManager.beginTransaction()
        transaction.hide(fragment)
        transaction.commit()
    }
}

代码很简单，先把fragment列表添加到FrameLayout容器里，默认展示第一个fragment，通过BottomNavigationView.OnNavigationItemSelectedListener 方法，实现了fragment的切换。

展示效果：

?

一些总结：

1、?navigation.itemIconTintList = null 这行代码不可缺少，不然你的导航栏的item图片会很丑，这行代码，可以让你的图片正常展示,因为默认的menu有个很丑的类似于蒙层的感觉。

2、navigation.itemTextColor = ColorStateList.valueOf(ContextCompat.getColor(this, R.color.black)) 这个是设置item的文本颜色