Use of navigation

Navigation component basic use

  • Add the dependent
dependencies {
  val 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 - alpha03")}Copy the code
  • Configure the corresponding fragment and activity in the XML file (navGraph) below /res/Navigation/ and write the corresponding fragment file

      
<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/mobile_navigation"
    app:startDestination="@+id/navigation_home">

    <fragment
        android:id="@+id/navigation_home"
        android:name="com.joye.wapp.ui.home.HomeFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/navigation_dashboard"
        android:name="com.joye.wapp.ui.dashboard.DashboardFragment"
        android:label="@string/title_pj"
        tools:layout="@layout/fragment_dashboard" />

    <fragment
        android:id="@+id/navigation_notifications"
        android:name="com.joye.wapp.ui.notifications.NotificationsFragment"
        android:label="@string/title_me"
        tools:layout="@layout/fragment_notifications" />
</navigation>
Copy the code

Navigation_home =”@+ ID/navigation_HOME “, which specifies the first fragment.

Write menu, which identifies the bottom navigation.


      
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_pj" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_me" />

</menu>
Copy the code

  • In the layout of the activity, there will be a BottomNavigationView, androidx. Navigation. Fragments. NavHostFragment need to use the following two configuration information specified menu and vavGraph respectively.

    //BottomNavigationView specifies the bottom meun app:menu="@menu/bottom_nav_menu" //NavHostFragment specifies the navGraph to navigate app:navGraph="@navigation/mobile_navigation"Copy the code

  • Finally, associate the NavHostFragment and BottomNavigationView in the Activity

            val navController = findNavController(R.id.nav_host_fragment)
        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        val appBarConfiguration = AppBarConfiguration(setOf(
                R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications))
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)
Copy the code

  • jump

    // Navigate to the action id. view.findNavController().navigate(R.id.action_global_mainFragment)Copy the code

conclusion

  • Introduction of depend on
  • Create the NAV navigation XML (NavGraph), configure the app:startDestination property, and create menu
  • In BottomNavigationView androidx. Navigation. Fragments. NavHostFragment introducing menu and navGraph configuration.
  • Do the related configuration in the activity.

You can connect two pages with the mouse in the Disign TAB in Navigation. Will be generated

        <action
            android:id="@+id/action_blankFragment_to_blankFragment2"
            app:destination="@id/blankFragment2" />
Copy the code

At a minimum, the action has its own ID and the ID of the destination.

Configure the Activity tag, which is the same as intentFilter for implicit startup.

Navigation modules can be nested and returned.

You can set the global action to jump.

Use include to introduce views.

    <include app:graph="@navigation/included_graph" />
Copy the code

return

Android maintains a return stack, and each call to the navigate() method puts another destination at the top of the stack. Click the up or return will call NavController respectively. NavigateUp () and NavController popBackStack () method, is used to remove (or pop-up) destination with the top of the stack

If this method returns false, NavController. GetCurrentDestination () will return null. It is your responsibility to navigate to the new destination or handle the pop-up by calling Finish () on the Activity.

In-stack reuse.

    <action        android:id="@+id/action_c_to_a"        app:destination="@id/a"        app:popUpTo="@+id/a"        app:popUpToInclusive="true"/>
Copy the code

App :popUpTo=”@+id/a”

App :popUpToInclusive="true" // Avoid navigation followed by two destination pages.Copy the code

Passing parameters

Define the label corresponding to the destination parameter configuration.

 <fragment android:id="@+id/myFragment" >
     <argument
         android:name="myArg"
         app:argType="integer"
         android:defaultValue="0" />
 </fragment>
Copy the code

You can use Safe Args to pass parameters.

You can use the bundle to pass parameters.

NavigationUI

Navigation can be managed with the top application bar, the drawer navigation bar, and the bottom navigation bar.

ViewPager2 +TabLayout

NavGraphViewModels () generic data.

Create NavHostFragment NavHostFragment. The create ().