Proper use of the navigation app: Jetpack series

Today small to share or basic use Android Jetpack library, the contents of this introduction is Jetpack Navigation components, let us learn together, to complete the project in early development and work it!

---

Components Introduction

Navigation, refers to navigate between the user provided in the application of different content, quit the interactive features. As we often used on Android phones physical / virtual back button, the desktop (Home) button, history (Recent) key, ActionBar return key, and so on.

Jetpack library Navigation assembly consists of three key components:

• Map: an XML resource that contains all the information related to navigation, such as Fragment configuration, the jump behavior / direction, animation and so on;

• NavHost: an empty container for displaying the map of a destination, a project needs to contain a default interface to implement NavHost NavHostFragment container;

• NavController: navigation behavior management application in a NavHost container. When the user switches the application interface, NavController target coordinate content container exchange.

advantage

Use the navigation component has many advantages:

• Fragment switch capable of handling

• The default behavior can handle up correctly, return

• Animation and resources to provide a standardized transition

• Provides deep linking capability

• UI navigation mode comprising, for example, navigation and drawer bottom navigation, developers do not need additional processing

• The type of security to protect data transfer between navigation

• ViewModel provide support, can be shared among multiple Fragment ViewModel data

• AndroidStudio provide a graphical view / edit navigation functions (> = 3.3 version)

Simple to use

Here is a navigation components developed Demo operating results:

From the realization point of view, the entire application interface, a total of eight, are the main interface, registration interface, ranking interface, users match, the game interface, interface failure, success interface, user interface.

The main logic involved are:

• Open the application into the main interface

• The main interface provides two functions, a start registration; another interface into the Top

• Registration interface provides start matching

• Matching function provides users to start the game

• After entering the game interface operation will succeed or fail Interface

• Ranking successfully enter the game interface interface interface to continue the game or match

• Game interface may fail to return to the mating interface retry

• Ranking interface to enter the user interface to view information

Well, the main logic involves the entire application interface between managers clearly have to start importing Jetpack navigation components.

Environment Configuration

• Using AS 3.3 and above

• Add a dependency support

implementation deps.navigation.fragment_ktx
implementation deps.navigation.runtime_ktx
//implementation "androidx.navigation:navigation-fragment-ktx:2.1.0"
//implementation "androidx.navigation:navigation-ui-ktx:2.1.0"
复制代码

Map

Create a map is the core of the entire application, which describes the behavior of all the trigger sequence. AS Design seen by the interface function and covering the entire sequence of all application interfaces that may be performed.

navigation demo map

When you create a map using AndroidStudio, select Resource type as navigation, created by default res / navigation directory, and resource files are placed in this directory.

Title_screen main interface to configure, for example, look at the constitution of xml:

<navigation ...
            //指定了启动当前导航时显示的界面
            app:startDestination="@+id/title_screen">
  <fragment
      android:id="@+id/title_screen"
      android:name="com.example.android.navigationsample.TitleScreen"
      android:label="fragment_title_screen"
      tools:layout="@layout/fragment_title_screen">
      //每一个action都代表了界面上提供跳转到其他界面的行为
      <action
              android:id="@+id/action_title_screen_to_register"
              app:destination="@id/register"
              app:popEnterAnim="@anim/slide_in_left"
              app:popExitAnim="@anim/slide_out_right"
              app:enterAnim="@anim/slide_in_right"
              app:exitAnim="@anim/slide_out_left"/>
      //设置了动画和过渡效果
      <action
              android:id="@+id/action_title_screen_to_leaderboard"
              app:destination="@id/leaderboard"
              app:popEnterAnim="@anim/slide_in_left"
              app:popExitAnim="@anim/slide_out_right"
              app:enterAnim="@anim/slide_in_right"
              app:exitAnim="@anim/slide_out_left"/>
  </fragment>
.../>       
复制代码

When the navigation map configuration has four attributes to note:

• popUpTo

• popUpToInclusive

• launchSingleTop

• deepLink

//launchSingleTop代表启动当前fragment后，会栈顶复用
<action
      android:id="@+id/action_register_to_match"
      app:destination="@id/match"
      app:enterAnim="@anim/slide_in_right"
      app:exitAnim="@anim/slide_out_left"
      app:launchSingleTop="true"
      app:popEnterAnim="@anim/slide_in_left"
      app:popExitAnim="@anim/slide_out_right" />
复制代码

//deepLink及深度链接，应用可通过Uri方式启动当前Fragment:
//holder.item.findNavController().navigate(Uri.parse("https://www.example.com/user/Flo"))
//此种方法为静态配置，动态配置方法请参考官方说明文档
<fragment
        android:id="@+id/user_profile"
        android:name="com.example.android.navigationsample.UserProfile"
        android:label="fragment_user_profile"
        tools:layout="@layout/fragment_user_profile">
    <argument android:name="userName"
              android:defaultValue="name"/>
    <deepLink app:uri="www.example.com/user/{userName}" />
</fragment>
复制代码

<action
    android:id="@+id/action_in_game_to_resultsWinner"
    app:destination="@id/results_winner"
    app:popUpTo="@+id/match"
    app:popUpToInclusive="false"
    app:popEnterAnim="@anim/slide_in_left"
    app:popExitAnim="@anim/slide_out_right"
    app:enterAnim="@anim/fade_in"
    app:exitAnim="@anim/fade_out"/>
//popUpTo属性表示堆栈返回到某个界面，其后的栈数据清空
//popUpToInclusive属性为true表示回到指定界面时，界面栈中是否还包括当前界面
//（如果栈中已经包含了指定要跳转的界面，那么只会保留一个，不指定则栈中会出现两个
//界面相同的Fragment数据）
复制代码

AndroidManifest configuration and layout files

If you want to use deep linking function navigation components, you need to declare a map in AndroidManifest so deep linking function properly.

<activity...
<nav-graph android:value="@navigation/navigation" />
...
</activity>
复制代码

Navigation functions need be implemented in NavHostFragment container, it is necessary to specify the use of the container when the layout display, the default settings NavHost, setting map.

<layout>...
<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:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:navGraph="@navigation/navigation"/>
.../>
复制代码

Code

Demo entire single Activity, multiple Fragment architecture, when MainActivity start NavHostFragment container loading, container FIG navigation parsing, display (in this case the first interface TitleScreen) found by the first interface startDestination property.

TitleScreen implementation follows the code:

class TitleScreen : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_title_screen, container, false)

        view.findViewById<Button>(R.id.play_btn).setOnClickListener {
            Navigation.findNavController(view).navigate(R.id.action_title_screen_to_register)
        }...
        return view
    }
}
复制代码

This, use the navigation component for application development of the basic process has ended, of course, the navigation component provides functionality much more than that, it is like a page of data between the types of security protection, gesture navigation, navigation nesting conditions for navigation, custom animation advanced methods using transition effects, use NavigationUI updated interface. Refer to the specific use Google official documentation.

In this source

Welcome attention to public numbers, messages discuss more technical issues