Jetpack Compose之Navigation组件使用

导入依赖

    implementation 'androidx.appcompat:appcompat:1.4.2'
    implementation 'androidx.navigation:navigation-runtime-ktx:2.5.0'
    implementation 'androidx.navigation:navigation-fragment-ktx:2.5.0'
    implementation 'androidx.navigation:navigation-ui-ktx:2.5.0'

根据需要创建几个Fragment及Fragment对应的布局文件

<?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"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="register" />
</LinearLayout>
package com.example.wanandroid.ui.fragment

import android.content.Context
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.fragment.app.Fragment
import com.example.wanandroid.R

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

创建导航关系图

1.创建Navigation目录

res资源目录右键新建目录

Jetpack Compose之Navigation组件使用_第1张图片

2.创建xml 文件,用来存放fragment 之间的路由关系

Jetpack Compose之Navigation组件使用_第2张图片
Jetpack Compose之Navigation组件使用_第3张图片

3.编写nav_login.xml的代码:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_login"
    app:startDestination="@id/loginFragment">
    <fragment
        android:id="@+id/loginFragment"
        android:name="com.example.wanandroid.ui.fragment.LoginFragment"
        android:label="LoginFragment">
        <action
            android:id="@+id/action_loginFragment_to_registerFragment"
            app:destination="@id/registerFragment" />
    </fragment>
    <fragment
        android:id="@+id/registerFragment"
        android:name="com.example.wanandroid.ui.fragment.RegisterFragment"
        android:label="RegisterFragment" />
</navigation>

4.最终结构如下图:

在这里插入图片描述

标签属性说明

Jetpack Compose之Navigation组件使用_第4张图片

创建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"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <fragment
        android:id="@+id/nav_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true" 
        app:navGraph="@navigation/nav_login"/>
</LinearLayout>

activity中:

package com.example.wanandroid.ui

import android.os.Bundle
import androidx.navigation.NavController
import androidx.navigation.Navigation
import com.example.wanandroid.R

class LoginActivity: BaseCompatActivity() {
    lateinit var navController: NavController

    override fun getLayoutId(): Int {
        return R.layout.activity_login
    }

    override fun initView(savedInstanceState: Bundle?) {
        navController=Navigation.findNavController(this, R.id.nav_fragment)
    }

    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp()
    }

}

方式二之动态修改默认起始页

布局文件(不设置navGraph属性):

<?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"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <fragment
        android:id="@+id/nav_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"/>
</LinearLayout>

activity中动态设置setGraph和setStartDestination:

package com.example.wanandroid.ui

import android.os.Bundle
import androidx.navigation.NavController
import androidx.navigation.Navigation
import com.example.wanandroid.R

class LoginActivity: BaseCompatActivity() {
    lateinit var navController: NavController

    override fun getLayoutId(): Int {
        return R.layout.activity_login
    }

    override fun initView(savedInstanceState: Bundle?) {
        navController=Navigation.findNavController(this, R.id.nav_fragment)

        navController.apply {
            var mNavGraph=navInflater.inflate(R.navigation.nav_login)
            mNavGraph.setStartDestination(when (1) {
                1 -> R.id.loginFragment
                else -> R.id.registerFragment
            })
            setGraph(mNavGraph,null)
        }

    }

    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp()
    }

}

起始页fragment点击跳转另一个fragment关键代码

Jetpack Compose之Navigation组件使用_第5张图片

属性说明

属性 说明
app:defaultNavHost=“true” 表示拦截系统的返回按钮事件
app:navGraph=“@navigation/nav_login” NavHostFragment关联的导航图为nav_login.xml

效果:
Jetpack Compose之Navigation组件使用_第6张图片

传值

activity,fragment间传值-接收

activity中传递:
Jetpack Compose之Navigation组件使用_第7张图片
fragment中接收:
在这里插入图片描述

注意:Activity 传参,每个 Fragment 都可获取

fragment间传值-接收

传递:
Jetpack Compose之Navigation组件使用_第8张图片
接收:
在这里插入图片描述

你可能感兴趣的:(安卓,android,kotlin)