[Day11] Android - Kotlin笔记:JetPack - Navigation (Fragment间的页面跳转)

Navigation

Navigation是Jetpack中的页面转换元件。
用来取代FragmentTransaction
以GUI方式呈现页面流程,
能更方便的管理各Fragment之间的跳转关系。
如图:


要做到有简单几个步骤:

假设A Fragment跳转到B Fragment

  1. Gradle新增dependencies
  2. 新增navigation.xml
  3. Activityxml中,新增一个<FragmentContainerView/>元件,
    并绑定navigation.xml
  4. A Fragment找到内部已透过2绑定对应的NavController,执行页面跳转。

接着就来实做看看吧


1. Gradle新增dependencies

project层的build.gradle

dependencies {
  val nav_version = "2.3.5"

classpath 
"androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"

  // 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-alpha08")
}

module层的build.gradle

apply plugin: "androidx.navigation.safeargs.kotlin"

2. 新增navigation.xml

  1. res按下右键,新增Android resource file

  2. Resource Type选择Navigation

  3. xml中新增对应的fragment:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:startDestination="@id/aFragment"
    android:id="@+id/nav_graph">
    <fragment
        android:id="@+id/aFragment"
        android:name="com.example.cashdog.cashdog.AFragment"
        android:label="@string/label_blank"
        tools:layout="@layout/fragment_blank" >
        <action
            android:id="@+id/action_aFragment_to_bFragment"
            app:destination="@id/bFragment" />
    </fragment>
    <fragment
        android:id="@+id/bFragment"
        android:name="com.example.cashdog.cashdog.BFragment"
        android:label="@string/label_blank_2"
        tools:layout="@layout/fragment_blank_fragment2" />
</navigation>

<action>的作用为A Fragment跳转至B Fragment


3. 在要放入A FragmentB FragmentActivity底下,新增一个<FragmentContainerView/>元件,并绑定navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

</FrameLayout>
  • android:name="androidx.navigation.fragment.NavHostFragment"
    用来宣告实现此 FragmentNavHostFragment

  • app:defaultNavHost="true"
    true会拦截返回按键,让页面返回上一层,
    不会退出Activity
    上一层可以是FragmentActivity

  • app:navGraph="@navigation/nav_graph"
    作用是将activity_main.xml中的Fragment
    navigation连接起来。


4. 从A Fragment找到内部已透过2绑定对应的NavController,执行页面跳转。

NavController的方法如下:

  • Activity.findNavController(viewId: Int)
  • Fragment.findNavController()
  • View.findNavController()

写法:

val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
val navController = navHostFragment.navController

navControllerfragmentnavigation

假设透过按下AFragment中的某个按钮跳转到BFragment

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        view.findViewById<Button>(R.id.next)
            .setOnClickListener {
                val action = AFragmentDirections.actionAFragmentToBFragment()
                view.findNavController().navigate(action)
            }
    }

就会切换到下一页了。

参考:


<<:  DAY9 样式属性权重 - Nav Bar实作之遇到的小卡顿

>>:  Day 9 Compose UI AndroidView

Return到nexttextfield Day24

按下Return键移动到下一个textfield栏位 步骤: 使用textfield的tag 使用U...

Day24 Vue 认识Porps(3)

以物件做props的传递 我们先来看看一个例子! 在这里我们先用props把外层元件的data里的i...

学习Python纪录Day21 - 用Python处理Excel

用Python处理Excel Python可以使用openpyxl自动化处理excel的编辑、建立、...

Day 10:一起了解 Angular 应用程序的启动流程(二)

前一篇我们提到了一部分的启动流程,今天我们会探讨剩下的启动流程资讯。 首先,我们要先知道 JavaS...

Day 26 - Rancher Fleet Kubernetes 应用程序部署

本文将於赛後同步刊登於笔者部落格 有兴趣学习更多 Kubernetes/DevOps/Linux 相...