This is the first day of my participation in Gwen Challenge

1 Github code address

It’s much better to read articles while looking at code

Github.com/ymeddmn/Jet…

2 Navigation easy to use

Navigation is the application Navigation solution of Google Jetpack component library, which is used to jump between activities and fragments. Navigation provides an XML that manages the direct relationships between the Navigation components

2.1 Getting Started

2.1.1 Simply Redirect two Fragments

Branch of code: simple-use

1. Add dependencies
Dependencies {def 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: 1.0.0 - alpha10"}Copy the code
2. Create navigation diagrams

Create navigation1. XML file to store the routing relationship between two fragments.

<? The 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" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/jjj" <! ----> app:startDestination="@id/originFragment"> <fragment android:id="@+id/originFragment" android:name="com.mage.navigationdemo.OriginFragment" android:label="fragment_origin" tools:layout="@layout/fragment_origin" > <action android:id="@+id/action_originFragment_to_destiationFragment" app:destination="@id/destiationFragment" /> </fragment> <fragment android:id="@+id/destiationFragment" android:name="com.mage.navigationdemo.DestiationFragment" android:label="fragment_destiation" tools:layout="@layout/fragment_destiation" /> </navigation>Copy the code

The table below is a description of each important tag attribute

Attribute tag name role
navigation The root label of the navigation component
startDestination Enter the component TAB displayed on the page for the first time
fragment-id Id of fragment in view, used for navigation
fragment-name Full class name of Fragment or Activity
action-destination View ID of the destination
3. Configure the Activity layout file

Add the navigation component container to the activity layout file

<androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />
Copy the code
Attribute tag name role
FragmentContainerView-name Fixed writing
FragmentContainerView-navGraph The associated XML view
FragmentContainerView-navGraph Make sure you can intercept the system’s return key. If false is set, rollback cannot be performed
Create two Fragments

Create OriginFragment. Kt DestiationFragment. These two fragments are normal fragments created and in the second navigation we set the OriginFragment as the main fragment, which is the fragment that is first displayed after the activity is opened

5. Redirect OriginFragment to DestiationFrament

Add a button click event to the OriginFragment and navigate to the DestiationFragment effect

 btn.setOnClickListener {
            val findNavController = findNavController()
            findNavController.navigate(R.id.destiationFragment)
        }
Copy the code

R.i.d.estiationfragment is the id we set to DestiationFrgment in navigation in step 2

6. Finally achieve the effect display

2.1.2 Implementing the Activity Jump to the Activity operation

Code implemented in the branch: Activity2Activity

2.1.1 implements fragments and direct routing of fragments. In this example, we want to implement the operation of jumping from one Activity to another

1. Basic configuration

In this example, to switch from MainActivity to DesActivity, we still add a FragmentContainerView control and an OriginFragment to the MainActivity.

2. Navigation diagram code

In this example, MainActivity and DesActivity need to be configured in the navigation diagram. DesActivity is the Activity we want to jump to

<? The 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" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/navigation1" app:startDestination="@id/originFragment"> <activity android:id="@+id/mainActivity" android:name="com.mage.navigationdemo.MainActivity" android:label="activity_main" tools:layout="@layout/activity_main" /> <activity android:id="@+id/desActivity" android:name="com.mage.navigationdemo.DesActivity" android:label="activity_des" tools:layout="@layout/activity_des" /> <fragment android:id="@+id/originFragment" android:name="com.mage.navigationdemo.OriginFragment" android:label="fragment_origin" tools:layout="@layout/fragment_origin" /> </navigation>Copy the code
3. Click the jump code in MainActivity

Add a button in MainActivity and click to jump: R.id.nav_host_fragment is the FragmentContainerView ID in the MainActivity layout file. Jump to DesActivity via Controller

 findViewById<Button>(R.id.btn_des).setOnClickListener {
            findNavController(R.id.nav_host_fragment).navigate(R.id.desActivity)
        }
Copy the code
4, achieve the effect

3 Data transfer between navigation

There are two modes of data transfer between navigation: Bundle and Safe Args. The Safe Args is based on the Gradle plugin.

3.1 Transferring data in Bundle mode

So this is a very simple one to code

btn.setOnClickListener { val findNavController = findNavController() findNavController.navigate(R.id.destiationFragment, BundleOf ("param1" to "param1"))}Copy the code

3.2 Transferring data in Safe Args mode

This approach requires basic plug-ins

The plug-in can generate simple Object and Builder classes to browse and access any associated parameters in a type-safe manner

3.2.1 Plug-in integration Method

Add dependencies with Gradle
Def nav_version = "2.3.5" classpath "androidx navigation: navigation - safe - the args - gradle - plugin: $nav_version"Copy the code
Add plugins to app.gradle
plugins {
    id 'androidx.navigation.safeargs'
}
Copy the code

3.2.2 Plug-in Description (see official)

When Safe Args is enabled, the generated code contains the following type-safe classes and methods for each operation, as well as each send and receive destination.

  • Create a class for each destination of the build operation. The name of this class is Directions after the name of the source destination. For example, if the source and destination is called SpecifyAmountFragment fragments, the name of the generated classes as SpecifyAmountFragmentDirections. This class provides a method for each operation defined in the source destination.

  • For each operation used to pass parameters, an inner class is created, whose name is determined by the name of the operation. For example, if the action name is confirmationAction,, the class name is confirmationAction. If your operation contains parameters without defaultValue, you can use the associated Action class to set the parameter value.

  • Create a class for the receiving destination. The name of the class is “Args” followed by the name of the destination. For example, if the name of the destination Fragment is ConfirmationFragment, the name of the generated class is ConfirmationFragmentArgs. You can use the fromBundle() method of this class to retrieve parameters.

3.2.3 code

Code branch: Deliverparams

1. Navigation diagram code

The tags in the CFragment tag body are the data to be received by the CFragment

<? The 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" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/jjj"  app:startDestination="@id/AFragment"> <fragment android:id="@+id/AFragment" android:name="com.mage.navigationdemo.AFragment" android:label="fragment_origin" tools:layout="@layout/fragment_origin" > <action android:id="@+id/action_AFragment_to_destiationFragment" app:destination="@id/destiationFragment" /> </fragment> <fragment android:id="@+id/destiationFragment" android:name="com.mage.navigationdemo.BFragment" android:label="fragment_destiation" tools:layout="@layout/fragment_destiation" /> <fragment android:id="@+id/CFragment" android:name="com.mage.navigationdemo.CFragment" android:label="fragment_c" tools:layout="@layout/fragment_c" > <argument android:name="data" app:argType="string" android:defaultValue="1" /> </fragment> </navigation>Copy the code
2, Source Fragment jump code

The plugin automatically generates the CFragmentArgs parameter class

btnTC.setOnClickListener { AFragmentDirections.actionAFragmentToDestiationFragment() val args = CFragmentArgs.Builder().setData("AFragment transfers data to CFragment ").build().tobundle () val findNavController = findNavController() findNavController.navigate(R.id.CFragment,args) }Copy the code
Destination Fragment parses parameter codes
var cFragmentArgs: CFragmentArgs? = null override fun onAttach(context: Context) { super.onAttach(context) arguments? .let{ cFragmentArgs = CFragmentArgs.fromBundle(it) } }Copy the code
4, achieve the effect

More advanced gameplay will follow