当前位置：网站首页>Navigation - are you sure you want to take a look at such an easy-to-use navigation framework?

Navigation - are you sure you want to take a look at such an easy-to-use navigation framework?

2022-07-07 14:35:00 【51CTO】

Preface

What is? Navigation？ Official documents are a little difficult to understand . therefore , Here I would like to sum up with my own words , We're dealing with Fragment It is necessary to write Fragment To operate Fragment Of , and Navigation The emergence of is to solve some pain points we developed before .Navigation Mainly used to realize Fragment Instead of Activity Page navigation function , Give Way Fragment It can easily jump and pass parameters , We can do that by using Navigation, Give Way Fragment Instead of android Most of the projects Activity. But it should be noted that in use Navigation Switch the changes of page life cycle , Avoid stepping on pits in the development process .

Official documents ：< https://developer.android.google.cn/jetpack/androidx/releases/navigation>

navigation Project address ：< https://github.com/googlecodelabs/android-navigation>

this paper Demo Address ：< https://github.com/taxze6/Jetpack_learn/tree/main/Jetpack_basic_learn/navigation>

Use Navigation What's the advantage ？

Handle Fragment Business
By default , Can correctly handle round-trip operations
Provide standardized resources for animation and transformation
Implement and handle deep links
Including navigation interface mode , For example, drawer navigation bar and bottom navigation , We only need to complete a small amount of code
Safe Args - Provides type safe navigation and data transfer between targets Gradle plug-in unit
ViewModel Support - You can use ViewModel The scope of is limited to the navigation map , To share data related to the interface between the targets of the icon

How to use Navigation Well ？

Navigation At present, only AndroidStudio 3.2 Above version support , If your version is insufficient 3.2, please Download this The latest version AndroidStudio(2202 No one should still use it after years 3.2 The following version !)

Starting to learn Navigation Before component , We need to be right first Navigation Have a simple understanding of the main components ,Navigation It's made up of three parts ：

Navigation graph： One that contains all navigation related information XML resources
NavHostFragment： A special kind Fragment, Container used to hold navigation content
NavController： Manage application navigation objects , Realization Fragment Between the jump and other operations

Now let's start learning Navigation La

First step ： Add dependency

       
       //project Of Navigation Dependency settings 
       
dependencies {
       
  // The latest stable version when the article is released ：
       
  def nav_version = "2.4.2"
       
  //  Use java Add the following two lines as the development language ：
       
  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"
       
}
       
//Compose edition ：
       
implementation "androidx.navigation:navigation-compose:$nav_version"
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

The second step ： Create a navigation map

① Right click on the res Catalog , Then select New→ Android Resource Directory. The system displays New Resource Directory Dialog box .Directory name Enter your folder name （ It's usually navigation）,Resource type choice navigation

② Right click navigation Folder , then new →Navigation Resource File stay File name Enter a name in （ Commonly used nav_graph_main or nav_graph）

Navigation — Are you sure you want to take a look at such an easy-to-use navigation framework ？_android

The third step ： establish Fragment

In order to enrich the jump , Here we create three Fragment

We can create it manually ：

FirstFragment:

       
       <?xml 
       
       version="1.0" encoding="utf-8"?>
       
       <
       
       FrameLayout 
       
       xmlns:android=
       
       "http://schemas.android.com/apk/res/android"
       
       xmlns:tools=
       
       "http://schemas.android.com/tools"
       
       android:layout_width=
       
       "match_parent"
       
       android:layout_height=
       
       "match_parent"
       
       tools:context=
       
       ".FirstFragment"
       
       >
       
       <
       
       TextView
       
       android:layout_width=
       
       "match_parent"
       
       android:layout_height=
       
       "match_parent"
       
       android:gravity=
       
       "center"
       
       android:text=
       
       "hello world" 
       
       />
       
       </
       
       FrameLayout
       
       >
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

       
       class 
       
       FirstFragment : 
       
       Fragment() {
       
       override 
       
       fun 
       
       onCreateView(
       
       inflater: 
       
       LayoutInflater, 
       
       container: 
       
       ViewGroup
       
       ?,
       
       savedInstanceState: 
       
       Bundle
       
       ?
       
    ): 
       
       View
       
       ? {
       
       return 
       
       inflater.
       
       inflate(
       
       R.
       
       layout.
       
       fragment_first, 
       
       container, 
       
       false)
       
    }
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.

Create two more and FirstFragement Same ：SecondFragment,ThirdFragment

We can also pass Navigation graph establish

We are building a new one nav_graph_main.xml Next , Switch to... In the upper right corner Design Pattern , And then in Navigation Editor in , Click on Create new destination, Choose what you need Fragment after , Click on Finish, You'll find out Fragment It has appeared in the panel we can drag .

Navigation — Are you sure you want to take a look at such an easy-to-use navigation framework ？_android_02

Step four ： take Fragment Drag into the panel and configure the jump

Only need Navigation Editor Double click the desired Fragment It will be added to the panel .

Click on one of Fragment, You'll find that , There will be a dot on his right , Drag the dot to point to the one you want to jump Fragment, We set up FirstFragment → SecondFragment → ThirdFragment → FirstFragment

Navigation — Are you sure you want to take a look at such an easy-to-use navigation framework ？_ Frame learning _03

We will nav_graph_main.xml Switch to Code Next , Let's interpret xml

       
       <?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/nav_graph_main"
       
       app:startDestination=
       
       "@id/firstFragment"
       
       >
       
       <
       
       fragment
       
       android:id=
       
       "@+id/firstFragment"
       
       android:name=
       
       "com.taxze.jetpack.navigation.FirstFragment"
       
       android:label=
       
       "fragment_first"
       
       tools:layout=
       
       "@layout/fragment_first" 
       
       >
       
       <
       
       action
       
       android:id=
       
       "@+id/action_firstFragment_to_secondFragment2"
       
       app:destination=
       
       "@id/secondFragment" 
       
       />
       
       </
       
       fragment
       
       >
       
       <
       
       fragment
       
       android:id=
       
       "@+id/secondFragment"
       
       android:name=
       
       "com.taxze.jetpack.navigation.SecondFragment"
       
       android:label=
       
       "fragment_second"
       
       tools:layout=
       
       "@layout/fragment_second" 
       
       >
       
       <
       
       action
       
       android:id=
       
       "@+id/action_secondFragment_to_thirdFragment2"
       
       app:destination=
       
       "@id/thirdFragment" 
       
       />
       
       </
       
       fragment
       
       >
       
       <
       
       fragment
       
       android:id=
       
       "@+id/thirdFragment"
       
       android:name=
       
       "com.taxze.jetpack.navigation.ThirdFragment"
       
       android:label=
       
       "fragment_third"
       
       tools:layout=
       
       "@layout/fragment_third" 
       
       >
       
       <
       
       action
       
       android:id=
       
       "@+id/action_thirdFragment_to_firstFragment"
       
       app:destination=
       
       "@id/firstFragment" 
       
       />
       
       </
       
       fragment
       
       >
       
       </
       
       navigation
       
       >
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

navigation It's a label , adopt startDestination Configure the first page launched by default , The configuration here is firstFragment, We can change it manually in the code mainFragment( The first one at startup Fragment), You can also click Fragment, Click again Assign Start Destination, You can also modify mainFragment

Navigation — Are you sure you want to take a look at such an easy-to-use navigation framework ？_android_04

fragment The label means this is a Fragment
action Tags define the behavior of page jumps , Each line in the above figure ,destination Define the target page for jump , You can also add animation during jump

Be careful ： stay fragment Label under android:name attribute , Whether the package name is correctly declared

Step five ： Handle MainActivity

① edit MainActivity Layout file for , Add in the layout file NavHostFragment. We need to tell Navigation and Activity, our Fragment Where is the show , therefore NavHostFragment In fact, it is the container of the navigation interface

       
       <?xml 
       
       version="1.0" encoding="utf-8"?>
       
       <
       
       androidx.constraintlayout.widget.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/nav_host_fragment"
       
       android:layout_width=
       
       "0dp"
       
       android:layout_height=
       
       "0dp"
       
       android:name=
       
       "androidx.navigation.fragment.NavHostFragment"
       
       app:layout_constraintBottom_toBottomOf=
       
       "parent"
       
       app:layout_constraintLeft_toLeftOf=
       
       "parent"
       
       app:layout_constraintRight_toRightOf=
       
       "parent"
       
       app:layout_constraintTop_toTopOf=
       
       "parent"
       
       app:defaultNavHost=
       
       "true"
       
       app:navGraph=
       
       "@navigation/nav_graph_main" 
       
       />
       
       </
       
       androidx.constraintlayout.widget.ConstraintLayout
       
       >
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

fragment Label under android:name Is used to designate NavHostFragment
app:navGraph Is used to specify the Navigation view
app:defaultNavHost=true Every time Fragment When switching , Save the click record in the stack , When you need to exit , After pressing the back key , You'll get it from the stack last time Fragment Display . But in some cases , Such operation is not very friendly , But fortunately, we just need to app:defaultNavHost=true Change it to app:defaultNavHost=false Or delete this line . When it is false Under the circumstances , No matter how you switch Fragment, Click the back button again and exit directly app. Of course, we can also listen to its stack , So as to achieve , Click the back button once to return to the home page , Click the back button again to exit app.

② modify MainActivity

We rewrote onSupportNavigateUp, That we will Activity Of back Click event delegation

       
       class 
       
       MainActivity : 
       
       AppCompatActivity() {
       
       override  
       
       fun 
       
       onCreate(
       
       savedInstanceState: 
       
       Bundle
       
       ?) {
       
       super.
       
       onCreate(
       
       savedInstanceState)
       
       setContentView(
       
       R.
       
       layout.
       
       activity_main)
       
    }
       
       override 
       
       fun 
       
       onSupportNavigateUp(): 
       
       Boolean {
       
       return 
       
       findNavController(
       
       R.
       
       id.
       
       nav_host_fragment).
       
       navigateUp()
       
    }
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Step six ： Handle Fragment Corresponding jump event of

①Fragment Layout ： Give a button to jump , One TextView Used to identify , Three Fragment The layout is the same

       
       <?xml 
       
       version="1.0" encoding="utf-8"?>
       
       <
       
       FrameLayout 
       
       xmlns:android=
       
       "http://schemas.android.com/apk/res/android"
       
       xmlns:tools=
       
       "http://schemas.android.com/tools"
       
       android:layout_width=
       
       "match_parent"
       
       android:layout_height=
       
       "match_parent"
       
       tools:context=
       
       ".FirstFragment"
       
       >
       
       <
       
       Button
       
       android:id=
       
       "@+id/firstButton"
       
       android:layout_width=
       
       "match_parent"
       
       android:layout_height=
       
       "wrap_content"
       
       android:layout_marginTop=
       
       "10dp"
       
       android:text=
       
       " Click to jump to the second fragment" 
       
       />
       
       <
       
       TextView
       
       android:layout_width=
       
       "match_parent"
       
       android:layout_height=
       
       "match_parent"
       
       android:gravity=
       
       "center"
       
       android:text=
       
       "@string/hello_first_fragment" 
       
       />
       
       </
       
       FrameLayout
       
       >
       
//secondFragment Add :
       
       <
       
       Button
       
       android:id=
       
       "@+id/firstButton"
       
       android:layout_width=
       
       "match_parent"
       
       android:layout_height=
       
       "wrap_content"
       
       android:layout_marginTop=
       
       "10dp"
       
       android:text=
       
       " Click to jump to the third fragment" 
       
       />
       
//thirdFragment Add ：
       
       <
       
       Button
       
       android:id=
       
       "@+id/firstButton"
       
       android:layout_width=
       
       "match_parent"
       
       android:layout_height=
       
       "wrap_content"
       
       android:layout_marginTop=
       
       "10dp"
       
       android:text=
       
       " Return to the first fragment" 
       
       />
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

② To configure Fragment Corresponding jump event

       
       class 
       
       FirstFragment : 
       
       Fragment() {
       
       override 
       
       fun 
       
       onCreateView(
       
       inflater: 
       
       LayoutInflater, 
       
       container: 
       
       ViewGroup
       
       ?,
       
       savedInstanceState: 
       
       Bundle
       
       ?
       
    ): 
       
       View
       
       ? {
       
       return 
       
       inflater.
       
       inflate(
       
       R.
       
       layout.
       
       fragment_first, 
       
       container, 
       
       false)
       
    }
       
       override 
       
       fun 
       
       onViewCreated(
       
       view: 
       
       View, 
       
       savedInstanceState: 
       
       Bundle
       
       ?) {
       
       super.
       
       onViewCreated(
       
       view, 
       
       savedInstanceState)
       
       view.
       
       findViewById
       
       <
       
       Button
       
       >(
       
       R.
       
       id.
       
       firstButton).
       
       apply {
       
       setOnClickListener {
       
       it.
       
       findNavController().
       
       navigate(
       
       R.
       
       id.
       
       action_firstFragment_to_secondFragment2)
       
         }
       
        }
       
    }
       
}
       
       //secondFragment Add ：
       
       override 
       
       fun 
       
       onViewCreated(
       
       view: 
       
       View, 
       
       savedInstanceState: 
       
       Bundle
       
       ?) {
       
       super.
       
       onViewCreated(
       
       view, 
       
       savedInstanceState)
       
       view.
       
       findViewById
       
       <
       
       Button
       
       >(
       
       R.
       
       id.
       
       firstButton).
       
       apply {
       
       setOnClickListener {
       
       it.
       
       findNavController().
       
       navigate(
       
       R.
       
       id.
       
       action_secondFragment_to_thirdFragment2)
       
         }
       
        }
       
}
       
       //thirdFragment Add ：
       
       override 
       
       fun 
       
       onViewCreated(
       
       view: 
       
       View, 
       
       savedInstanceState: 
       
       Bundle
       
       ?) {
       
       super.
       
       onViewCreated(
       
       view, 
       
       savedInstanceState)
       
       view.
       
       findViewById
       
       <
       
       Button
       
       >(
       
       R.
       
       id.
       
       firstButton).
       
       apply {
       
       setOnClickListener {
       
       it.
       
       findNavController().
       
       navigate(
       
       R.
       
       id.
       
       action_thirdFragment_to_firstFragment)
       
            }
       
        }
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

Among them R.id.action_firstFragment_to_secondFragment2 Such a sign , Is in nav_graph_main.xml Of action Configured under the label .

       
       <
       
       action
       
       android:id=
       
       "@+id/action_firstFragment_to_secondFragment2"
       
       app:destination=
       
       "@id/secondFragment" 
       
       />
      
1.
2.
3.

③ The final rendering ：

Navigation — Are you sure you want to take a look at such an easy-to-use navigation framework ？_android_05

Jump animation & Custom animation

We will find that , In the example just now , When we jump to the interface , There is no animation of sliding left and right into the interface , Looks very stiff , So we need to add animation to the jump process .

① Add default animation ：

stay nav_graph_main.xml In the document Design In mode , Click to connect two Fragment Line . Then you will find a Animations The panel , And then we click enterAnim The rightmost ellipse of these options , Then it pops up Pick a Resoure The panel , We can choose the animation we need here , Here we set nav_default_enter_anim. Empathy exitAnim We also set an animation ,nav_default_exit_anim. Then run the code and you will find a gradual jump animation . Then after configuring the animation, you will find action More animation related attributes

       
       <
       
       fragment
       
       android:id=
       
       "@+id/firstFragment"
       
       android:name=
       
       "com.taxze.jetpack.navigation.FirstFragment"
       
       android:label=
       
       "fragment_first"
       
       tools:layout=
       
       "@layout/fragment_first" 
       
       >
       
       <
       
       action
       
       android:id=
       
       "@+id/action_firstFragment_to_secondFragment2"
       
       app:destination=
       
       "@id/secondFragment"
       
       app:enterAnim=
       
       "@anim/nav_default_enter_anim"
       
       app:exitAnim=
       
       "@anim/nav_default_exit_anim"
       
       />
       
       </
       
       fragment
       
       >
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

Navigation — Are you sure you want to take a look at such an easy-to-use navigation framework ？_ framework _06

enterAnim: Animation of the target page when jumping
exitAnim: The original page animation when jumping
popEnterAnim: Animation of the target page when backing back
popExitAnim: Back to the original page animation

② Custom animation

There are many different jump animations in the real business requirements , The official default animation is not enough , So we should learn to customize animation .

⑴ establish Animation Resource file

Right click on the res Catalog , Then select New→ Android Resource File. The system displays New Resource File Dialog box .File name Enter your folder name （ I'm going to set it to slide_from_left）,Resource type choice Animation, Then we can send it to res There is one more... In the catalog anim Catalog , There are our customized animations .

⑵ Write our animation code

Here are some common examples ：

       
       // Left slide effect 
       
       <?xml 
       
       version="1.0" encoding="utf-8"?>
       
       <
       
       set 
       
       xmlns:android=
       
       "http://schemas.android.com/apk/res/android"
       
       >
       
       <
       
       translate
       
       android:duration=
       
       "300"
       
       android:fromXDelta=
       
       "-100%"
       
       android:toXDelta=
       
       "0%"
       
       >
       
       </
       
       translate
       
       >
       
       </
       
       set
       
       >
      
1.
2.
3.
4.
5.
6.
7.
8.
9.

       
       // Right slide effect 
       
       <?xml 
       
       version="1.0" encoding="utf-8"?>
       
       <
       
       set 
       
       xmlns:android=
       
       "http://schemas.android.com/apk/res/android"
       
       >
       
       <
       
       translate
       
       android:duration=
       
       "300"
       
       android:fromXDelta=
       
       "0%"
       
       android:toXDelta=
       
       "100%"
       
       >
       
       </
       
       translate
       
       >
       
       </
       
       set
       
       >
      
1.
2.
3.
4.
5.
6.
7.
8.
9.

       
       // Rotation effect 
       
       <?xml 
       
       version="1.0" encoding="utf-8"?>
       
       <
       
       set 
       
       xmlns:android=
       
       "http://schemas.android.com/apk/res/android"
       
       >
       
       <
       
       scale
       
       android:duration=
       
       "1000"
       
       android:fromXScale=
       
       "0.0"
       
       android:fromYScale=
       
       "0.0"
       
       android:pivotX=
       
       "50%"
       
       android:pivotY=
       
       "50%"
       
       android:toXScale=
       
       "1.0"
       
       android:toYScale=
       
       "1.0" 
       
       />
       
       <
       
       rotate
       
       android:duration=
       
       "1000"
       
       android:fromDegrees=
       
       "0"
       
       android:pivotX=
       
       "50%"
       
       android:pivotY=
       
       "50%"
       
       android:toDegrees=
       
       "360" 
       
       />
       
       </
       
       set
       
       >
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

Common properties ：

attribute	Introduce
alpha	Transparency setting effect
scale	Size scaling effect
rotate	Rotation effect
translate	Displacement effect

Common settings ：

attribute	Introduce
android:duration	Animation duration
fromXX	Start state
toXX	End state

⑶ Use custom animation files

Using custom animation is the same as using default animation .

Rotation effect ：

Navigation — Are you sure you want to take a look at such an easy-to-use navigation framework ？_ framework _07

How to pass data ？

Navigation Enables you to attach data to navigation operations by defining destination parameters . In general , It is recommended to pass a small amount of data . For example, passing userId, Rather than specific user information . If you need to transfer a lot of data , Still recommended ViewModel.

stay nav_graph_main.xml In the document Design In mode . Click to select Fragment. On the right side of the Attributes The palette , Click on Arguments The plus sign to the right of the option . Add the required parameters . After adding parameters , In the arrow Action Click on , It will be on the right Argument Default Values Show this in userId Variable , stay xml You can also see that

       
       // Pseudo code , Do not directly cv
       
       <
       
       fragment
       
       ... 
       
       >
       
   ...
       
       <
       
       argument
       
       android:name=
       
       "userId"
       
       android:defaultValue=
       
       "1"
       
       app:argType=
       
       "integer" 
       
       />
       
       </
       
       fragment
       
       >
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Code processing ：

       
       // By default   arrow  Action  Pass the parameters set in 
       
       it.
       
       findNavController().
       
       navigate(
       
       R.
       
       id.
       
       action_firstFragment_to_secondFragment2)
      
1.
2.

Transfer data dynamically

① We can use Bundle Pass parameters between destinations

       
       // Pseudo code , Do not directly cv
       
       view.
       
       findViewById
       
       <
       
       Button
       
       >(
       
       R.
       
       id.
       
       firstButton).
       
       setOnClickListener {
       
       val 
       
       bundle 
       
       = 
       
       Bundle()
       
       bundle.
       
       putString(
       
       "userId", 
       
       "1")
       
       val 
       
       navController 
       
       = 
       
       it.
       
       findNavController()
       
       navController.
       
       navigate(
       
       R.
       
       id.
       
       action_firstFragment_to_secondFragment2, 
       
       bundle)
       
}
      
1.
2.
3.
4.
5.
6.
7.

② Then we can accept the parameters

In the corresponding Fragment:

       
       val 
       
       tv 
       
       = 
       
       view.
       
       findViewById
       
       <
       
       TextView
       
       >(
       
       R.
       
       id.
       
       textView)
       
       tv.
       
       text 
       
       = 
       
       arguments
       
       ?.
       
       getString(
       
       "userId")
      
1.
2.

stay Activity Use setGraph Switch between different Navigation

Usually , We are more than one navigation The file of , We need to decide which one to use according to the business situation , Here we can use our setGraph To switch between different Navigation 了 .

① hold activity_main in fragment Label under app:navGraph This attribute is removed

       
       <
       
       fragment
       
       android:id=
       
       "@+id/nav_host_fragment"
       
       android:name=
       
       "androidx.navigation.fragment.NavHostFragment"
       
       android:layout_width=
       
       "0dp"
       
       android:layout_height=
       
       "0dp"
       
       app:layout_constraintBottom_toBottomOf=
       
       "parent"
       
       app:layout_constraintLeft_toLeftOf=
       
       "parent"
       
       app:layout_constraintRight_toRightOf=
       
       "parent"
       
       app:layout_constraintTop_toTopOf=
       
       "parent"
       
       app:defaultNavHost=
       
       "true"
       
       />
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

② In the code through setGraph Set up app:navGraph

       
       class 
       
       MainActivity : 
       
       AppCompatActivity() {
       
       override 
       
       fun 
       
       onCreate(
       
       savedInstanceState: 
       
       Bundle
       
       ?) {
       
       super.
       
       onCreate(
       
       savedInstanceState)
       
       setContentView(
       
       R.
       
       layout.
       
       activity_main)
       
       initNav(
       
       1)
       
    }
       
       private 
       
       fun 
       
       initNav(
       
       id: 
       
       Int) {
       
       var 
       
       controller 
       
       = 
       
       Navigation.
       
       findNavController(
       
       this
       
       @MainActivity, 
       
       R.
       
       id.
       
       nav_host_fragment)
       
       if (
       
       id 
       
       == 
       
       1) {
       
       // Set the corresponding app:navGraph
       
       controller.
       
       setGraph(
       
       R.
       
       navigation.
       
       first)
       
        }
       
       if (
       
       id 
       
       == 
       
       2) {
       
       controller.
       
       setGraph(
       
       R.
       
       navigation.
       
       second)
       
        }
       
       this
       
       @MainActivity.
       
       finish()
       
    }
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

Here we are , We're done Navigation Most usage , Here are some important points , And learn and summarize this article through a case .

NavController

We have already talked about Navigation Use , Processing Fragment When the corresponding jump event of , We used findNavController This method , Actually , This is Navigation Of the three parts of NavController One of them api. So what is NavController Well ？ It is responsible for operation Navigation Under the framework of Fragment Jump and exit 、 Animation 、 Monitor the current Fragment Information , Of course, these are basic operations . Because except in Fragment Call in , In practice, it can also be used in Activity Call in . If you can use it flexibly , It can help you realize any form of page Jump , You can also use TabLayout coordination Navigation Page design on the homepage .

How to get `NavController` What's the example? ？

In the previous basic use, we also used .

       
       // Pseudo code , Do not directly cv
       
       //activity:
       
       //Activity.findNavController(viewId: Int)
       
       findNavController(
       
       R.
       
       id.
       
       nav_host_fragment).
       
       navigateUp()
       
       //Fragment:
       
       //Fragment.findNavController()
       
       //View.findNavController()
       
       findNavController().
       
       navigate(
       
       R.
       
       id.
       
       action_thirdFragment_to_firstFragment)
      
1.
2.
3.
4.
5.
6.
7.
8.
9.

Navigation Common operations ：

①popBackStack eject Fragment

Now let's start with oneFragment Jump to secondFragment On the way to thirdFragment, Then we want to start from thirdFragment go back to secondFragment You can use it there popBackStack

       
       override 
       
       fun 
       
       onCreate(
       
       savedInstanceState: 
       
       Bundle
       
       ?) {
       
       super.
       
       onCreate(
       
       savedInstanceState)
       
       setContentView(
       
       R.
       
       layout.
       
       activity_main)
       
        .....
       
       btn.
       
       setOnClickListener{
       
       // eject Fragment
       
       controller.
       
       popBackStack()
       
        }
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.

② Pop up to the specified Fragment

Is also used popBackStack, This method can Realize the need to empty the intermediate navigation stack .

       
       //xxxFragment Pop up to the specified Fragment.
       
       // If the Boolean value of the second parameter is true It means that our parameter one Fragment Pop up together , It means that if it is false Just popBackStack To 
       
       //xxxFragment, If it is true, It's just xxxFragment stay popBackStack() once 
       
       controller.
       
       popBackStack(
       
       xxxFragment,
       
       true)
      
1.
2.
3.
4.

③navigateUp() Up Navigation

       
       findNavController(
       
       R.
       
       id.
       
       nav_host_fragment).
       
       navigateUp()
      
1.

navigateUp It is also the execution return to the upper level Fragment The function of . and popBackStack Function as . Then since it exists, it must have its special place .navigateUp The function of upward return is actually a call popBackStack Of . however ,navigateUp There is a layer of judgment in the source code of , Judge this Navigation Is it the last Fragment. Use popBackStack() If the current return stack is empty, an error will be reported , Because the stack is empty ,navigateUp() Will not be , Or stay in the current interface .

④ Add navigation monitoring

       
       val 
       
       listener: 
       
       NavController.
       
       OnDestinationChangedListener 
       
       =
       
       object : 
       
       OnDestinationChangedListener() {
       
       fun 
       
       onDestinationChanged(
       
       controller: 
       
       NavController,
       
       destination: 
       
       NavDestination,
       
       @Nullable 
       
       arguments: 
       
       Bundle
       
       ?
       
                    ) {
       
       Log.
       
       d(
       
       TAG, 
       
       "onDestinationChanged: id = ${destination.getId()}")
       
                  }
       
          }
       
       // Add listening 
       
       controller.
       
       addOnDestinationChangedListener(
       
       listener)
       
       // Remove monitor 
       
       controller.
       
       removeOnDestinationChangedListener(
       
       listener)
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

⑤ Get the current navigation destination

Use getCurrentDestination You can get the current navigation destination

       
       // obtain 
       
       val 
       
       destination 
       
       = 
       
       controller.
       
       getCurrentDestination()
       
       Log.
       
       d(
       
       TAG, 
       
       "onCreate: NavigatorName = ${destination.getNavigatorName()}")
       
       Log.
       
       d(
       
       TAG, 
       
       "onCreate: id = ${destination.getId()}")
       
       Log.
       
       d(
       
       TAG, 
       
       "onCreate: Parent = ${destination.getParent()}")
      
1.
2.
3.
4.
5.

⑥ Judge what is displayed on the current page Fragment Is it a goal Fragment

       
       // Directly cv
       
       fun 
       
       <
       
       F : 
       
       Fragment
       
       > 
       
       isActiveFragment(
       
       fragmentClass: 
       
       Class
       
       <
       
       F
       
       >): 
       
       Boolean {
       
       val 
       
       navHostFragment 
       
       = 
       
       this.
       
       supportFragmentManager.
       
       fragments.
       
       first() 
       
       as 
       
       NavHostFragment
       
       navHostFragment.
       
       childFragmentManager.
       
       fragments.
       
       forEach {
       
       if (
       
       fragmentClass.
       
       isAssignableFrom(
       
       it.
       
       javaClass)) {
       
       return 
       
       true
       
        }
       
    }
       
       return 
       
       false
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Use Safe Args Make sure the type is safe

Through the top NavController We can do it fragment Jump between , however Google It is recommended to use Safe Args Gradle Plug-in implementation . This plug-in can generate simple objects and builder classes , These classes can safely navigate and pass parameters between destinations .

that , How to use Safe Args Well .

① In the outermost part of the project build.gradle Add

       
       // Put it on plugins{} Before 
       
buildscript {
       
    repositories {
       
        google()
       
    }
       
    dependencies {
       
        def nav_version = "2.4.2"
       
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
       
    }
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

② stay app、module Under the build.gradle Join in

If you need to generate a for Java Module or Java and Kotlin Of hybrid modules Java The language code

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

If you need to generate a for Kotlin Unique module Kotlin Code , Please add the following line ：

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

To use Safe Args, Must be in gradle.properties Add to this file
android.useAndroidX=true android.enableJetifier=true

In order to avoid the generated class name and method name being too complex , The navigation map needs to be adjusted , Revised action Of id, Because of the auto generated id Is too long. , The class name and method name generated by the plug-in are also very long .

       
       // Pseudo code , Do not directly cv
       
       <
       
       fragment
       
       android:id=
       
       "@+id/blankFragment"
       
       android:name=
       
       "com.taxze.jetpack.navigation.BlankFragment"
       
       android:label=
       
       "fragment_blank"
       
       tools:layout=
       
       "@layout/fragment_blank" 
       
       >
       
       <
       
       action
       
       android:id=
       
       "@+id/toSecond"
       
        Modify here id
       
       app:destination=
       
       "@id/blankFragment2" 
       
       />
       
       </
       
       fragment
       
       >
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

Then it will generate BlankFragment and BlankFragment2 Class of , Then it can be used as above , Pass parameters .

       
       var 
       
       action 
       
       = 
       
       BlankFragment.
       
       actionJump(
       
       "111")
      
1.

You can also use set Method Assign values to the corresponding parameters

       
       action.
       
       setParam(
       
       "222")
      
1.

adopt Navigation imitation WeChat Bottom jump

adopt Navigation Realize the super common bottom jump function in development

Don't talk much , First on the renderings ：

Navigation — Are you sure you want to take a look at such an easy-to-use navigation framework ？_ framework _08

① Right click on the res Catalog , Then select New→ Android Resource File. The system displays New Resource File Dialog box .File name Enter your folder name （ I'm going to set it to menu）,Resource type choice Menu, Then we can send it to res There is one more... In the catalog menu Catalog , Inside is our bottom jump item.

Navigation — Are you sure you want to take a look at such an easy-to-use navigation framework ？_android_09

② Get into menu.xml Of Design Next

Fill in four Item, And set it separately id,title,icon

Navigation — Are you sure you want to take a look at such an easy-to-use navigation framework ？_ Frame learning _10

③ Create four Fragment, And in Navigation Build links in

Fragment The layout of the is very simple , Here is a code .

       
       <?xml 
       
       version="1.0" encoding="utf-8"?>
       
       <
       
       FrameLayout 
       
       xmlns:android=
       
       "http://schemas.android.com/apk/res/android"
       
       xmlns:tools=
       
       "http://schemas.android.com/tools"
       
       android:layout_width=
       
       "match_parent"
       
       android:layout_height=
       
       "match_parent"
       
       tools:context=
       
       ".HomeFragment"
       
       >
       
       <
       
       TextView
       
       android:layout_width=
       
       "match_parent"
       
       android:layout_height=
       
       "match_parent"
       
       android:gravity=
       
       "center"
       
       android:text=
       
       "Home" 
       
       />
       
       </
       
       FrameLayout
       
       >
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

       
       class 
       
       HomeFragment : 
       
       Fragment() {
       
       override 
       
       fun 
       
       onCreateView(
       
       inflater: 
       
       LayoutInflater, 
       
       container: 
       
       ViewGroup
       
       ?,
       
       savedInstanceState: 
       
       Bundle
       
       ?
       
    ): 
       
       View
       
       ? {
       
       return 
       
       inflater.
       
       inflate(
       
       R.
       
       layout.
       
       fragment_home, 
       
       container, 
       
       false)
       
    }
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

stay nav_graph_main.xml Establishing a connection , Pay attention to each of these Fragment Of id Want to be with menu.xml Medium id One-to-one correspondence

Navigation — Are you sure you want to take a look at such an easy-to-use navigation framework ？_ Frame learning _11

④ stay activity_main Use in BottomNavigationView Create a bottom jump

Here it is drawable Next create a selector_menu_text_color.xml Used to distinguish the current Item

       
       <?xml 
       
       version="1.0" encoding="utf-8"?>
       
       <
       
       selector 
       
       xmlns:android=
       
       "http://schemas.android.com/apk/res/android"
       
       >
       
       <
       
       item 
       
       android:color=
       
       "#818181" 
       
       android:state_checked=
       
       "false"
       
       />
       
       <
       
       item 
       
       android:color=
       
       "#45C01A" 
       
       android:state_checked=
       
       "true"
       
       />
       
       </
       
       selector
       
       >
      
1.
2.
3.
4.
5.

       
       <?xml 
       
       version="1.0" encoding="utf-8"?>
       
       <
       
       androidx.constraintlayout.widget.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/nav_host_fragment"
       
       android:layout_width=
       
       "0dp"
       
       android:layout_height=
       
       "0dp"
       
       android:name=
       
       "androidx.navigation.fragment.NavHostFragment"
       
       app:layout_constraintBottom_toBottomOf=
       
       "parent"
       
       app:layout_constraintLeft_toLeftOf=
       
       "parent"
       
       app:layout_constraintRight_toRightOf=
       
       "parent"
       
       app:layout_constraintTop_toTopOf=
       
       "parent"
       
       app:defaultNavHost=
       
       "true"
       
       app:navGraph=
       
       "@navigation/nav_graph_main" 
       
       />
       
       <
       
       com.google.android.material.bottomnavigation.BottomNavigationView
       
       android:id=
       
       "@+id/nav_view"
       
       android:layout_width=
       
       "match_parent"
       
       android:layout_height=
       
       "0dp"
       
       app:layout_constraintBottom_toBottomOf=
       
       "parent"
       
       app:layout_constraintEnd_toEndOf=
       
       "parent"
       
       app:layout_constraintStart_toStartOf=
       
       "parent"
       
       app:itemIconTint=
       
       "@drawable/selector_menu_text_color"
       
       app:labelVisibilityMode=
       
       "labeled"
       
       app:itemTextColor=
       
       "@drawable/selector_menu_text_color"
       
       app:menu=
       
       "@menu/menu" 
       
       />
       
       </
       
       androidx.constraintlayout.widget.ConstraintLayout
       
       >
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

⑤ stay MainActivty Set the switching logic

       
       class 
       
       MainActivity : 
       
       AppCompatActivity() {
       
       override 
       
       fun 
       
       onCreate(
       
       savedInstanceState: 
       
       Bundle
       
       ?) {
       
       super.
       
       onCreate(
       
       savedInstanceState)
       
       // Remove the title bar 
       
       supportRequestWindowFeature(
       
       Window.
       
       FEATURE_NO_TITLE)
       
       setContentView(
       
       R.
       
       layout.
       
       activity_main)
       
       val 
       
       navController: 
       
       NavController 
       
       = 
       
       Navigation.
       
       findNavController(
       
       this, 
       
       R.
       
       id.
       
       nav_host_fragment)
       
       val 
       
       navigationView 
       
       = 
       
       findViewById
       
       <
       
       BottomNavigationView
       
       >(
       
       R.
       
       id.
       
       nav_view)
       
       NavigationUI.
       
       setupWithNavController(
       
       navigationView, 
       
       navController)
       
    }
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

In this way, we can achieve the effect in the rendering , Specific code can be viewed Git Warehouse

Epilogue

This article has been described in great detail Jetpack Navigation Most uses of , But after reading the article , You still need to practice more , I believe you will soon master Navigation La Because my ability is limited , If there is something wrong with the article, you are welcome to point out , If you have any questions, please leave a message in the comment area to discuss ~

About me

Hello, I am a Taxze, If you think the article is valuable to you , I hope you can point to my article ️, You are welcome to pay attention to my Blog .

If you think the article is not good enough , Please also go through Focus on Urge me to write better articles —— In case I improve one day ？

Foundation Series ：

2022 · Let me show you Jetpack Architecture components go from beginner to proficient — Lifecycle

Learn how to use LiveData and ViewModel, I believe it will make you relaxed when writing business

When you really learn DataBinding after , You'll find that “ This thing smells good ”!

Navigation — Are you sure you don't want to take a look at such a useful jump management framework ？( this paper )

The following parts are still codewords , Hurry to order a collection

2022 · Let me show you Jetpack Architecture components go from beginner to proficient — Room

2022 · Let me show you Jetpack Architecture components go from beginner to proficient — Paging3

2022 · Let me show you Jetpack Architecture components go from beginner to proficient — WorkManager

2022 · Let me show you Jetpack Architecture components go from beginner to proficient — ViewPager2

2022 · Let me show you Jetpack Architecture components go from beginner to proficient — Login to the registration page （MVVM）

Advanced Series :

coroutines + Retrofit Network request status encapsulation

Room Cache encapsulation

.....

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/188/202207071233108590.html

当前位置：网站首页>Navigation - are you sure you want to take a look at such an easy-to-use navigation framework?

Navigation - are you sure you want to take a look at such an easy-to-use navigation framework?

Preface

Use Navigation What's the advantage ？

How to use Navigation Well ？

First step ： Add dependency

The second step ： Create a navigation map

The third step ： establish Fragment

Step four ： take Fragment Drag into the panel and configure the jump

Step five ： Handle MainActivity

Step six ： Handle Fragment Corresponding jump event of

Jump animation & Custom animation

How to pass data ？

Transfer data dynamically

stay Activity Use setGraph Switch between different Navigation

NavController

How to get `NavController` What's the example? ？

Navigation Common operations ：

①popBackStack eject Fragment

② Pop up to the specified Fragment

③navigateUp() Up Navigation

④ Add navigation monitoring

⑤ Get the current navigation destination

⑥ Judge what is displayed on the current page Fragment Is it a goal Fragment

Use Safe Args Make sure the type is safe

adopt Navigation imitation WeChat Bottom jump

Epilogue

About me

边栏推荐

猜你喜欢

随机推荐

当前位置：网站首页>Navigation - are you sure you want to take a look at such an easy-to-use navigation framework?

Navigation - are you sure you want to take a look at such an easy-to-use navigation framework?

Preface

Use Navigation What's the advantage ？

How to use Navigation Well ？

First step ： Add dependency

The second step ： Create a navigation map

The third step ： establish Fragment

Step four ： take Fragment Drag into the panel and configure the jump

Step five ： Handle MainActivity

Step six ： Handle Fragment Corresponding jump event of

Jump animation & Custom animation

How to pass data ？

Transfer data dynamically

stay Activity Use setGraph Switch between different Navigation

NavController

How to get ​​NavController​​ What's the example? ？

Navigation Common operations ：

①popBackStack eject Fragment

② Pop up to the specified Fragment

③navigateUp() Up Navigation

④ Add navigation monitoring

⑤ Get the current navigation destination

⑥ Judge what is displayed on the current page Fragment Is it a goal Fragment

Use Safe Args Make sure the type is safe

adopt Navigation imitation WeChat Bottom jump

Epilogue

About me

边栏推荐

猜你喜欢

随机推荐

How to get `NavController` What's the example? ？