使用Navigation结合底部导航栏实现fragment切换

简介

关于通过google官方提供的Navigation实现fragment切换,之前已经写了一篇《使用Navigation简化fragment切换》。本文继续深入,结合底部导航栏实现fragment切换. 本文参考了google官网提供的一个demo,本文基于该demo优化过部分内容.

实现效果

使用方法

1. build.gradle中添加依赖

implementation "android.arch.navigation:navigation-common-ktx:1.0.0"
implementation "android.arch.navigation:navigation-fragment-ktx:1.0.0"
implementation "android.arch.navigation:navigation-runtime-ktx:1.0.0"
implementation "android.arch.navigation:navigation-ui-ktx:1.0.0"

2. 添加navigation文件

• nav_first.xml

<navigation 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:id="@+id/nav_first"
   app:startDestination="@+id/firstFragment">

   <fragment
       android:id="@+id/firstFragment"
       android:name="com.cxyzy.myapplication.FirstFragment"
       tools:layout="@layout/fragment_first" />
</navigation>

2. nav_second.xml

<navigation 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:id="@+id/nav_second"
    app:startDestination="@id/secondFragment">

    <fragment
        android:id="@+id/secondFragment"
        android:name="com.cxyzy.myapplication.SecondFragment"
        tools:layout="@layout/fragment_second" />
</navigation>

3. 添加底部菜单文件:bottom_nav.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_first"
        android:icon="@drawable/ic_first"
        android:title="@string/first_page" />
    <item
        android:id="@+id/nav_second"
        android:icon="@drawable/ic_second"
        android:title="@string/second_page" />
</menu>

4. MainActivity (下面代码中的setupWithNavController是扩展的自定义函数,请查看Demo源代码下载)

class MainActivity : AppCompatActivity() {

    private var currentNavController: LiveData<NavController>? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        if (savedInstanceState == null) {
            setupBottomNavigationBar()
        }
    }

    override fun onRestoreInstanceState(savedInstanceState: Bundle?) {
        super.onRestoreInstanceState(savedInstanceState)
        setupBottomNavigationBar()
    }

    private fun setupBottomNavigationBar() {
        val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottom_nav)

        val navGraphIds = listOf(R.navigation.nav_first, R.navigation.nav_second)

        // Setup the bottom navigation view with a list of navigation graphs
        val controller = bottomNavigationView.setupWithNavController(
                navGraphIds = navGraphIds,
                fragmentManager = supportFragmentManager,
                containerId = R.id.nav_host_container,
                intent = intent,
                listener = mOnNavigationItemSelectedListener
        )

        // Whenever the selected controller changes, setup the action bar.
        controller.observe(this, Observer { navController ->
            setupActionBarWithNavController(navController)
        })
        currentNavController = controller
    }

    /**
     * Define your own listener for bottom navigation item clicking.
     */
    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.nav_first -> {
                Toast.makeText(this@MainActivity, "firstFragment", Toast.LENGTH_SHORT).show()
                return@OnNavigationItemSelectedListener true
            }
            R.id.nav_second -> {
                Toast.makeText(this@MainActivity, "secondFragment", Toast.LENGTH_SHORT).show()
                return@OnNavigationItemSelectedListener true
            }
        }
        true
    }

    override fun onSupportNavigateUp(): Boolean {
        return currentNavController?.value?.navigateUp() ?: false
    }

    /**
     * Overriding popBackStack is necessary in this case if the app is started from the deep link.
     */
    override fun onBackPressed() {
        if (currentNavController?.value?.popBackStack() != true) {
            super.onBackPressed()
        }
    }
}

代码说明

底部菜单项和Fragment的对应关系如下图,menu的item的id需要和导航文件中navigation的id一样.

如何增加一个菜单项

1. 1. 
      
2. 增加Fragment(ThirdFragment)及对应的布局文件(fragment_third.xml)
3. 仿造nav_first.xml增加navigation文件nav_third.xml
   1. 
      

<navigation 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:id="@+id/nav_third"
    app:startDestination="@+id/thirdFragment">

    <fragment
        android:id="@+id/thirdFragment"
        android:name="com.cxyzy.myapplication.ThirdFragment"
        tools:layout="@layout/fragment_first" />
</navigation>

3. 在底部菜单bottom_nav.xml中增加菜单项

<item
        android:id="@+id/nav_third"
        android:icon="@drawable/ic_second"
        android:title="Third Page" />

4. 修改MainActivity

• • 
    
• 修改setupBottomNavigationBar函数
  由​​val navGraphIds = listOf(R.navigation.nav_first, R.navigation.nav_second)​​ 修改为​​val navGraphIds = listOf(R.navigation.nav_first, R.navigation.nav_second,R.navigation.nav_third)​​
• 修改mOnNavigationItemSelectedListener
  增加
  • 
    

R.id.nav_third -> {
    Toast.makeText(this@MainActivity, "thirdFragment", Toast.LENGTH_SHORT).show()
    return@OnNavigationItemSelectedListener true
}

5. 修改后效果
   

源代码

https://gitee.com/cxyzy1/navigationDemo/tree/master/bottomNavigationView

附录

关于我

厦门大学计算机专业 | 前华为工程师

分享编程技术，没啥深度，但看得懂，适合初学者。

Java | 安卓 | 前端 | 小程序 | 鸿蒙

公众号：花生皮编程

​​​​​​