Android Jetpack Navigation

• Repositories adds the Google Repository and Classpath

  buildscript {
  
      repositories {
  
          google()
  
      }
  
      dependencies {
  
  Classpath "android. Arch. Navigation: navigation - safe - the args - gradle - plugin: 1.0.0 - alpha01"
  
      }
  
  }
  
  Copy the code

• Add a navigation library dependency

  dependencies {
  
  Def nav_version = "1.0.0 - alpha01"
  
  
  
      implementation "android.arch.navigation:navigation-fragment:$nav_version" // use -ktx for Kotlin
  
      implementation "android.arch.navigation:navigation-ui:$nav_version" // use -ktx for Kotlin
  
  
  
      // optional - Test helpers
  
      androidTestImplementation "android.arch.navigation:navigation-testing:$nav_version" // use -ktx for Kotlin
  
  }
  
  Copy the code

Create a new project android project

• Right-click in the res directoryNew->New Resource FileThat pop upNew Resource FileThe dialog
• Fill in theFile nameFor example: nav_graph
• Resource typechooseNavigation
• Click OK

We will then generate a navigation directory under res, which will contain the nav_graph.xml file we just created, as follows:

<? The XML version = "1.0" encoding = "utf-8"? >

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



</navigation>

Copy the code

Is an empty node for navigation. Opening nav_graph.xml has a Design and Text TAB, similar to our layout file

Add two fragments in the navigation node with FragmentA and FragmentB as their names and ids

• Add NavHostFragment to the Activity layout:

  <? The XML version = "1.0" encoding = "utf-8"? >
  
  <android.support.constraint.ConstraintLayout 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">
  
  
  
      <fragment
  
          android:id="@+id/my_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" />
  
  
  
  </android.support.constraint.ConstraintLayout>
  
  Copy the code

app:defaultNavHost="true"Is the intercept return key, will return to NavHostFragment processing.app:navGraph="@navigation/nav_graph"Associate NavHostFragment with the navigation we just created.

Then re-open nav_graph.xml and you’ll see our associated activity displayed under HOST:

• Adding a navigation connection
  
  
  
  Left-click and hold the middle circle on the right side of the fragment and drag it to the fragment you want to navigate and let go
  
  Switch to Text and find an action node added to the fragment tag:

  <? The XML version = "1.0" encoding = "utf-8"? >
  
  <navigation xmlns:app="http://schemas.android.com/apk/res-auto"
  
      xmlns:android="http://schemas.android.com/apk/res/android"
  
      xmlns:tools="http://schemas.android.com/tools"
  
      xmlns:tools="http://schemas.android.com/tools"
  
      app:startDestination="@id/fragmentA">
  
  
  
      <fragment
  
          android:id="@+id/fragmentA"
  
          android:name="com.halove.jetpackdmeo.FragmentA"
  
          android:label="fragment_a"
  
          tools:layout="@layout/fragment_a" >
  
          <action
  
              android:id="@+id/action_fragmentA_to_fragmentB"
  
              app:destination="@id/fragmentB" />
  
      </fragment>
  
      <fragment
  
          android:id="@+id/fragmentB"
  
          android:name="com.halove.jetpackdmeo.FragmentB"
  
          android:label="fragment_b"
  
          tools:layout="@layout/fragment_b" />
  
  </navigation>
  
  Copy the code

The action adds an ID and destination, which is the fragment we want to navigate to.

You don’t need to do anything in the activity, just set the layout:

class MainActivity : AppCompatActivity() {



    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.main_activity)

    }

}

Copy the code

Add a button to the FragmentA layout and click to jump to FragmentB:

override fun onActivityCreated(savedInstanceState: Bundle?) {

    super.onActivityCreated(savedInstanceState)



    toBPageBtn.setOnClickListener {

        Navigation.findNavController(it).navigate(R.id.action_fragmentA_to_fragmentB)

    }

/ / or

	toBPageBtn.setOnClickListener(Navigation.createNavigateOnClickListener(R.id.action_fragmentA_to_fragmentB))

}

Copy the code

To do this, simply call the findNavController method on Navigation to findNavController, findNavController and any other parameters you can try yourself, and then call the navigate method, The argument is the id of the action in nav_graph.xml. Or just usecreateNavigateOnClickListener

The effect is as follows:



Pressing the Return key will retrace the fragment to the previous one, or you can call NavController’s popBackStack to retrace the fragment

Now let’s see how to pass parameters.

Navigate has several methods, as follows:



There is a bundle parameter that can be passed:

val bundle = Bundle()

bundle.putString("text","aaaaaa")

Navigation.findNavController(it).navigate(R.id.action_fragmentA_to_fragmentB, bundle)

Copy the code

You can also add the argument tag to the fragment action of the XML in navigation and pass the argument using the generated Agrs or Directions. You need to add the apply plugin to build.gradle: ‘androidx.navigation.safeargs’

<fragment

    android:id="@+id/fragmentB"

    android:name="com.halove.jetpackdmeo.FragmentB"

    android:label="fragment_b"

    tools:layout="@layout/fragment_b" >

    <argument android:name="text" android:defaultValue="Hello" app:type="string"/>

</fragment>

Copy the code

Use:

/ / use FragmentBArgs

val bundle = FragmentBArgs.Builder().setText("Hello World").build().toBundle()

Navigation.findNavController(it).navigate(R.id.action_fragmentA_to_fragmentB, bundle)



/ / use FragmentADirections

val direction = FragmentADirections.action_fragmentA_to_fragmentB().setText("Hello World")

Navigation.findNavController(it).navigate(direction)



// Receive parameters

val text = FragmentBArgs.fromBundle(arguments).text

Copy the code

Both FragmentBArgs and FragmentADirections are generated automatically, FragmentBArgs are generated from the argument node under the Fragment node, and FragmentADirections are generated from the action node

• Animated transitions
  
  You can add a transition animation to the Action as follows:

  <? The XML version = "1.0" encoding = "utf-8"? >
  
  <navigation xmlns:app="http://schemas.android.com/apk/res-auto"
  
      xmlns:android="http://schemas.android.com/apk/res/android"
  
      xmlns:tools="http://schemas.android.com/tools"
  
      app:startDestination="@id/fragmentA">
  
  
  
      <fragment
  
          android:id="@+id/fragmentA"
  
          android:name="com.halove.jetpackdmeo.FragmentA"
  
          android:label="fragment_a"
  
          tools:layout="@layout/fragment_a" >
  
          <action
  
              android:id="@+id/action_fragmentA_to_fragmentB"
  
              app:destination="@id/fragmentB"
  
              app:enterAnim="@anim/slide_in_right"
  
              app:exitAnim="@anim/slide_out_left"
  
              app:popEnterAnim="@anim/slide_in_left"
  
              app:popExitAnim="@anim/slide_out_right"/>
  
      </fragment>
  
      <fragment
  
          android:id="@+id/fragmentB"
  
          android:name="com.halove.jetpackdmeo.FragmentB"
  
          android:label="fragment_b"
  
          tools:layout="@layout/fragment_b" >
  
          <argument android:name="text" android:defaultValue="Hello" app:type="string"/>
  
      </fragment>
  
  </navigation>
  
  Copy the code

The animation code is the same as the original activity animation, not to mention here.

• Deep link deep-link
  
  You can create deep links by using deep-link. You can directly jump to a specified Fragment by using Scheme to jump to a user-defined URL similar to an activity

  <? The XML version = "1.0" encoding = "utf-8"? >
  
  <navigation xmlns:app="http://schemas.android.com/apk/res-auto"
  
      xmlns:android="http://schemas.android.com/apk/res/android"
  
      xmlns:tools="http://schemas.android.com/tools"
  
      app:startDestination="@id/fragmentA">
  
  
  
      <fragment
  
          android:id="@+id/fragmentA"
  
          android:name="com.halove.jetpackdmeo.FragmentA"
  
          android:label="fragment_a"
  
          tools:layout="@layout/fragment_a" >
  
          <action
  
              android:id="@+id/action_fragmentA_to_fragmentB"
  
              app:destination="@id/fragmentB"
  
              app:enterAnim="@anim/slide_in_right"
  
              app:exitAnim="@anim/slide_out_left"
  
              app:popEnterAnim="@anim/slide_in_left"
  
              app:popExitAnim="@anim/slide_out_right"/>
  
      </fragment>
  
      <fragment
  
          android:id="@+id/fragmentB"
  
          android:name="com.halove.jetpackdmeo.FragmentB"
  
          android:label="fragment_b"
  
          tools:layout="@layout/fragment_b" >
  
          <argument android:name="text" android:defaultValue="Hello" app:type="string"/>
  
          <deepLink app:uri="www.loongwind.com/test"/>
  
      </fragment>
  
  </navigation>
  
  Copy the code

Above we add a deepLink to FragmentB and nav-graph to the activity in the manifest:

<activity android:name=".MainActivity">

    <intent-filter>

        <action android:name="android.intent.action.MAIN" />



        <category android:name="android.intent.category.LAUNCHER" />

    </intent-filter>

    <nav-graph android:value="@navigation/nav_graph" />

</activity>

Copy the code

In Android Studio 3.2 and above, we can add nav-graph node with value as navigation.

<intent-filter>

    <action android:name="android.intent.action.VIEW"/>

    <category android:name="android.intent.category.DEFAULT"/>

    <category android:name="android.intent.category.BROWSABLE"/>

    <data android:scheme="https"/>

    <data android:scheme="http"/>

    <data android:host="www.loongwind.com"/>

    <data android:pathPrefix="/test"/>

</intent-filter>

Copy the code

Jump in code:

val data = Uri.parse("http://www.loongwind.com/test")

val intent = Intent(Intent.ACTION_VIEW, data)

startActivity(intent)

Copy the code

Jumping to our Activity shows the FragmentB screen directly.

This is the end of our Navigation exploration. For more information, please refer to Google’s official documentation: Implement Navigation

WeChat pay

Alipay