Android JetPack navigation 结合 BottomNavigationView 组件使用

Android JetPack navigation 结合 BottomNavigationView 组件使用

简要说一下流程

1. 添加依赖

在build.gradle文件中添加：

ext.navigationVersion = "2.0.0"
dependencies {
    //... 
    implementation "androidx.navigation:navigation-fragment-ktx:$rootProject.navigationVersion"
    implementation "androidx.navigation:navigation-ui-ktx:$rootProject.navigationVersion"
}

还需在build.gradle中添加：

apply plugin: 'kotlin-android-extensions'
apply plugin: 'androidx.navigation.safeargs'

2. 添加navigation

在res目录下创建navigation目录，在navigation下新建main_navigation.xml资源文件

点击图片中圈中的加号，即可添加destination

3. 接下来新建main_activity.xml

<?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"
	xmlns:tools="http://schemas.android.com/tools"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:background="@color/norm_grey"
	android:layout_height="match_parent"
	tools:context=".ui.activity.MainActivity">

	<androidx.appcompat.widget.Toolbar
		android:id="@+id/toolbar"
		android:layout_width="match_parent"
		android:layout_height="52dp"
		android:background="@color/colorPrimary"
		app:titleTextColor="#ffffff">

		<LinearLayout
			android:layout_width="match_parent"
			android:layout_height="52dp"
			android:orientation="horizontal">

			<TextView
				android:layout_width="wrap_content"
				android:layout_height="match_parent"
				android:textSize="24sp"
				android:padding="4dp"
				android:gravity="center"
				android:textColor="#ffffff"
				android:textStyle="bold"
				android:text="Hoo"/>

			<Space
				android:layout_width="0dp"
				android:layout_height="match_parent"
				android:layout_weight="1"/>

			<ImageView
				android:id="@+id/iv_camera"
				android:layout_width="52dp"
				android:layout_height="52dp"
				android:padding="14dp"
				android:src="@drawable/me_ic_camera"/>

		</LinearLayout>

	</androidx.appcompat.widget.Toolbar>

	<fragment
		android:id="@+id/my_nav_host_fragment"
		android:name="androidx.navigation.fragment.NavHostFragment"
		android:layout_width="match_parent"
		app:navGraph="@navigation/main_navigation"
		app:defaultNavHost="true"
		android:layout_height="0dp"
		android:layout_marginBottom="10dp"
		android:layout_weight="1"/>

	<com.google.android.material.bottomnavigation.BottomNavigationView
		android:id="@+id/bnv_view"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:background="@android:color/white"
		app:itemIconTint="@drawable/main_bottom_color_selector"
		app:itemTextColor="@drawable/main_bottom_color_selector"
		app:menu="@menu/menu_main"/>

</LinearLayout>

如下所示，在箭头指向的地方，添加对应的navigation资源文件

4. 创建MainActivity.kt文件

package com.joe.jetpackdemo.ui.activity

import android.os.Bundle
import android.util.Log
import android.view.View
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar
import androidx.databinding.DataBindingUtil
import androidx.navigation.NavController
import androidx.navigation.fragment.NavHostFragment
import androidx.navigation.ui.setupWithNavController
import com.google.android.material.bottomnavigation.BottomNavigationView
import com.joe.jetpackdemo.R

class MainActivity : AppCompatActivity() {

    lateinit var bottomNavigationView: BottomNavigationView
    lateinit var mToolbar:Toolbar
    lateinit var mCamera:ImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_activity)

        val host: NavHostFragment = supportFragmentManager.findFragmentById(R.id.my_nav_host_fragment) as NavHostFragment
        val navController = host.navController

        initWidget()
        initBottomNavigationView(bottomNavigationView,navController)
    }

    /**
     * Navigation绑定bottomNavigationView
     */
    private fun initBottomNavigationView(bottomNavigationView: BottomNavigationView, navController: NavController) {
        bottomNavigationView.setupWithNavController(navController)
        navController.addOnDestinationChangedListener { controller, destination, arguments ->
            when(destination.id){
                R.id.meFragment -> {
                    mCamera.visibility = View.VISIBLE
                    Log.d("navigation", "meFragment------->>>")
                }
                R.id.infoFragment -> {
                    Log.d("navigation", "infoFragment------->>>")
                }
                else -> {
                    mCamera.visibility = View.GONE
                    Log.d("navigation", "marketFragment------->>>")
                }
            }
        }
    }

    private fun initWidget() {
        bottomNavigationView = findViewById(R.id.bnv_view)
        mToolbar = findViewById(R.id.toolbar)
        mCamera = findViewById(R.id.iv_camera)

        mCamera.setOnClickListener {
            // TODO CameraX 学习
        }
    }


}

如下图所示，圈起来为重点。

主要实现了navigation绑定bottomNavigationView。