[移动开发]底部导航栏BottomNavigationView

项目中一直使用的是TabHost来做的底部导航栏，最近项目语言换成kotlin发现TabHost不推荐使用了，于是找到了BottomNavigationView+Fragment的方式，简单，便捷！

第一种方式：BottomNavigationView+FramLayout

1.依赖

implementation "com.google.android.material:material:${versions.material}"

2.布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".module.main.MainActivity">
    <FrameLayout
        android:id="@+id/ll_fragmentLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottomNavigationView"/>
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemTextColor="@drawable/bottom_navigation_item_selector"
        app:menu="@menu/main_bottom_navigation"/>
</RelativeLayout>

3.meun文件配置

<?xml version="1.0" encoding="utf-8"?>
<menu 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">
    <item
        android:id="@+id/menu_home"
        android:enabled="true"
        android:icon="@drawable/selector_btn_home"
        android:title="首页"
        app:showAsAction="ifRoom"
        tools:ignore="DuplicateIds" />
    <item
        android:id="@+id/menu_message"
        android:enabled="true"
        android:icon="@drawable/selector_btn_message"
        android:title="消息"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_mine"
        android:enabled="true"
        android:icon="@drawable/selector_btn_mine"
        android:title="我的"
        app:showAsAction="ifRoom" />
</menu>

4.Activity配置

class MainActivity : BaseActivity<ActivityMainBinding>(ActivityMainBinding::inflate) {
    private var lastIndex = 0
    private var mFragments = mutableListOf<Fragment>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        initData()
        initBottomNavivation()
    }

    fun initData(){
        mFragments = ArrayList();
        mFragments.add(HomeFragment())
        mFragments.add(MessageFragment())
        mFragments.add(MineFragment())
        setFragmentPostion(0)
    }

    fun initBottomNavivation(){
        viewBinding.bottomNavigationView.itemIconTintList = null  //设置图标默认颜色
        viewBinding.bottomNavigationView.itemBackground = null   //设置点击动背景
        viewBinding.bottomNavigationView.setOnNavigationItemSelectedListener { item ->
            when (item.itemId) {
                R.id.menu_home -> {
                    setFragmentPostion(0)
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.menu_message -> {
                    setFragmentPostion(1)
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.menu_mine -> {
                    setFragmentPostion(2)
                    return@setOnNavigationItemSelectedListener true
                }
            }
            false
        }
    }

    fun setFragmentPostion(postion:Int){
        val ft = supportFragmentManager.beginTransaction()
        val currentFragment = mFragments[postion]
        val lastFragment = mFragments[lastIndex]
        lastIndex = postion
        ft.hide(lastFragment)
        if(!currentFragment.isAdded){
            supportFragmentManager.beginTransaction().remove(currentFragment).commit()
            ft.add(R.id.ll_fragmentLayout,currentFragment)
        }
        ft.show(currentFragment)
        ft.commitAllowingStateLoss()
    }


    override fun getPageName(): String {
        return PageName.MAIN
    }

}

第二种方式：BottomNavigationView+fragment标签

1.依赖

def nav_version = "2.3.5"

  // Java language implementation
  implementation "androidx.navigation:navigation-fragment:$nav_version"
  implementation "androidx.navigation:navigation-ui:$nav_version"

  // Kotlin
  implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
  implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

  // Feature module Support
  implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"

  // Testing Navigation
  androidTestImplementation "androidx.navigation:navigation-testing:$nav_version"

  // Jetpack Compose Integration
  implementation "androidx.navigation:navigation-compose:2.4.0-beta02"

2.layout
?

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:paddingTop="?attr/actionBarSize"
    android:layout_height="match_parent">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:background="@color/white"
        app:menu="@menu/main_bottom_navigation"/>
    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="false"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>

3.navigation
?

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:startDestination="@+id/menu_home"
    android:id="@+id/mobile_navigation">
    <fragment
        android:id="@+id/menu_home"
        android:name="com.huishouqian.merchant.module.home.HomeFragment"
        tools:layout="@layout/fragment_home"/>

    <fragment
        android:id="@+id/menu_message"
        android:name="com.huishouqian.merchant.module.message.MessageFragment"
        tools:layout="@layout/fragment_message"/>

    <fragment
        android:id="@+id/menu_mine"
        android:name="com.huishouqian.merchant.module.mine.MineFragment"
        tools:layout="@layout/fragment_mine"/>
</navigation>

4.Activity

class NavigationViewActivity:BaseActivity<ActivityNavagationViewBinding>(ActivityNavagationViewBinding::inflate) {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        viewBinding.navView.itemIconTintList = null
        viewBinding.navView.itemBackground = null
        val appBarConfiguration = AppBarConfiguration(setOf(R.id.menu_home,R.id.menu_message,R.id.menu_mine))
        val navController = findNavController(R.id.nav_host_fragment)
        setupActionBarWithNavController(navController,appBarConfiguration)
        viewBinding.navView.setupWithNavController(navController)

    }

    override fun getPageName(): String {
        return ""
    }
}

第二种方式在开发过程中遇见的问题

1.报错

no start destination defined via app:startDestination for com.xxx.xxx/mobile_navigation

解决方法：在navigation的根目录上加入startDestiantion = "@+id/menu_home"标签

2.报错

java.lang.NullPointerException: Attempt to invoke virtual method 'void androidx.appcompat.app.ActionBar.setDisplayHomeAsUpEnabled(boolean)' on a null object reference

需要在AndroidManifest中给Activity添加一个带ActionBar的主题

3.navigation 中item的id需要和menu文件中的item的id保持一直，否则Fragment切换会出问题。