Use of navigation and navigationui

rely on

   implementation 'androidx.navigation:navigation-fragment-ktx:2.3.1'
    implementation 'androidx.navigation:navigation-ui-ktx:2.3.1'

navigation The main elements of

1. Navigation Graph A kind of xml Resource file , Contains all the pages of the app and the relationships between them , That is to say fragment The place where you put it ,
2. NavHostFragement A special kind fragment, It can be understood as fragment The container of , yes fragment Exhibition UI The place of ,Navigation Graph Medium fragment adopt NavHostFragement Exhibition
3. NavController controller , Used to complete... In code Navigation Graph Specific page switching work in

Navigation Graph The creation of

res Folder -new - Android Resource File, newly build Navigation Graph file .

add to NavHostFragment

NavHostFragment It's a special one Fragment, Add to activity In the layout of .

1. Created nav_graph File after the introduction of , And tell the system that this is a special fragment-NavHostFragment
2. app:defaultNavHos
3. app:defaultNavHost=“true” Automatic processing system return key
4. navGraph attribute Set the Fragment The corresponding navigation map -

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

establish destination

Specify the default first page
app:startDestination The first thing to show fragment

Specify the page you want to go to

NavController Complete navigation and pass parameters

first fragment Click to jump and pass parameters

        var view = inflater.inflate(R.layout.fragment_main, container, false)
           var bundle = Bundle()
          bundle.putString("user","Bliss")
          bundle.putInt("age",30)
     Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_secondFragment,bundle)
//         Method 2  Navigation.createNavigateOnClickListener(R.id.action_mainFragment_to_secondFragment)

Add page switch animation

Create animation files , This standard document is also available on the official website , Page switch animation

slide_in_left file

<?xml version="1.0" encoding="utf-8"?>
<set  xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-50%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

slide_in_right file

<?xml version="1.0" encoding="utf-8"?>
<set  xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="50%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

slide_out_left file

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-50%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

slide_out_right file

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="50%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

Introducing animation

<fragment
        android:id="@+id/mainFragment"
        android:name="com.bliss.yang.jetapp.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main">
        <action
            android:id="@+id/action_mainFragment_to_secondFragment"
            app:destination="@id/secondFragment"
            app:enterAnim="@anim/slide_in_right"
            app:exitAnim="@anim/slide_out_left"
            app:popEnterAnim="@anim/slide_in_left"
            app:popExitAnim="@anim/slide_out_right" />

Use safe args Plug in parameters

rely on

  classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.3.3"//safe-args Plug in parameters 

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'androidx.navigation.safeargs' // app Of build.gradle Introduce added dependencies in 
}

The ginseng

 var bundle = MainFragmentArgs.Builder()
                .setUser("Bliss91")
                .setAge(31).build().toBundle()
            Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_secondFragment,bundle)

Accept parameters

  if(bundle!=null){
            var user = MainFragmentArgs.fromBundle(bundle).user
            var age = MainFragmentArgs.fromBundle(bundle).age
            Log.e(TAG, "safe-args Receiving parameters :$user,$age " )
        }

 <fragment
        android:id="@+id/mainFragment"
        android:name="com.bliss.yang.jetapp.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main">
        <action
            android:id="@+id/action_mainFragment_to_secondFragment"
            app:destination="@id/secondFragment"
            app:enterAnim="@anim/slide_in_right"
            app:exitAnim="@anim/slide_out_left"
            app:popEnterAnim="@anim/slide_in_left"
            app:popExitAnim="@anim/slide_out_right" />
        <argument
            android:name="user"
            app:argType="string"
            android:defaultValue="" />
        <argument
            android:name="age"
            app:argType="integer"
            android:defaultValue="0" />
    </fragment>

NavigationUI Use

Make similar to APP bar The buttons and menus in are associated with the navigation page
app bar menu
menu_setting

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<!--   Here id Want to be with nav_graph Keep the same in -->
  <item
      android:id="@+id/secondFragment"
      android:icon="@drawable/ic_launcher_foreground"
      android:title=" Set up ">

  </item>
</menu>

activity Instantiate the menu bar in

    // Add menu bar 
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        super.onCreateOptionsMenu(menu)
        menuInflater.inflate(R.menu.menu_setting,menu)
        return true
    }

Handling jump logic

private var appBarConfiguration:AppBarConfiguration?=null// be used for APPBar Configuration of 
    private var navController:NavController?=null// For navigation and switching of pages 


    navController = Navigation.findNavController(this,R.id.nav_host_fragment_container)
        navController?.let { _navController ->
            appBarConfiguration = AppBarConfiguration.Builder(_navController.graph).build()
        }
        // take APPBar and navController binding 
        if (navController!=null && appBarConfiguration!=null){
            NavigationUI.setupActionBarWithNavController(this, navController!!,
                appBarConfiguration!!
            )
        }
        if (navController!=null){
            navController?.addOnDestinationChangedListener { controller, destination, arguments ->
                Log.e(TAG, "onDestinationChanged:  Page switching monitoring ")
            }
        }
      *  adopt NavigationUI Complete the click jump 
     */
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        if (navController!=null){
            return NavigationUI.onNavDestinationSelected(item, navController!!)
        }
        return super.onOptionsItemSelected(item)
    }

    /**
     *  Use NavigationUI Complete return 
     */
    override fun onSupportNavigateUp(): Boolean {
        if (navController!=null && appBarConfiguration!=null){
            return NavigationUI.navigateUp(navController!!, appBarConfiguration!!)
        }
        return super.onSupportNavigateUp()
    }

because menu Is written in the book activity in , So the second one fragment Clean it up in the middle of the game menu The difference effect

   override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
        menu.clear()// Clear the parent container activity Medium menu,
        super.onCreateOptionsMenu(menu, inflater)
    }

Sample code address -navigation Branch