Android Jetpack 之Navigation Architecture Component使用

leon2017發表於2018-05-18

在剛剛結束的谷歌IO大會上，谷歌推出了Android Jetpack架構元件；正如官網所說，Android Jetpack 是一套元件、工具和指導，可以幫助您構建出色的 Android 應用。Android Jetpack 元件將現有的支援庫與架構元件聯絡起來，並將它們分成四個類別：Architecture、Foundation、Behavior 以及 UI。他能夠讓開發者創造出更加出色的高質量應用。

Navigation Architecture Component 介紹

Navigation導航編輯器作為Android Jetpack和 AndroidX 依賴庫的一部分其目標旨在簡化Android開發中導航的實現。Navigation可以幫助我們很好的處理Activity和fragment之間通過FragmentTransaction互動的複雜性。另外Navigation也可以很好的處理頁面的轉場效果。當然熟悉IOS開發的同學肯定看到這肯定會覺得這不就是StoryBoard麼。關於Navigation的介紹，谷歌官方介紹的也不是很詳細（英語太差~~~）,那麼我們就動手實現個吧!!!

Navigation 使用

建立Android Jetpack 應用（Android Studio 3.2 Canary 13及更高版本）

新增依賴

專案的build.gradle:

buildscript {
	...
	repositories {
    		google()
	}
	dependencies {
    		...
    		classpath 'android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha01'
	}
}

複製程式碼

在app的build.gradle中新增如下依賴:

apply plugin: 'androidx.navigation.safeargs'
複製程式碼

implementation 'android.arch.navigation:navigation-fragment:1.0.0-alpha01'
implementation 'android.arch.navigation:navigation-ui:1.0.0-alpha01'
複製程式碼

建立導航編輯器

右鍵res資原始檔夾： New -> Android resource file -> 輸入xml檔名稱並選擇Resource type為Navigation -> OK

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android">

</navigation>
複製程式碼

給Activity新增導航檢視

由於Navigation 中需要將fragment檢視和activity繫結，那麼接下來改造吧：

<?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:id="@+id/container"
    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="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1"
        app:navGraph="@navigation/main_navigation" />

</android.support.constraint.ConstraintLayout>
複製程式碼

activity中fragment預設為NavHostFragment，NavHostFragment通過navGraph與navigation導航編輯器進行關聯。 app:defaultNavHost="true"可以讓NavHostFragment處理系統的返回事件

編輯Navigation導航檢視

<?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"
    app:startDestination="@+id/main_fragment">


    <fragment
        android:name="com.wangjun.app.jetpacktodolist.ui.main.MainFragment"
        android:id= "@+id/main_fragment"
        android:label="@string/main_fragment_title"
        tools:layout="@layout/main_fragment">


    </fragment>


    <activity
        android:id="@+id/settings_activity"
        android:name="com.wangjun.app.jetpacktodolist.ui.SettingActivity"
        android:label="@string/activity_settings"
        tools:layout="@layout/setting_activity"
        />

</navigation>

複製程式碼

我們看到navigation標籤宣告瞭一個app:startDestination="@+id/main_fragment"屬性，他是導航器預設載入的檢視

Navigation 跳轉-- Action

現在我們看到我們的導航編輯器又兩個檢視，main_fragment和 settings_activity，我們現在需要從main_fragment中跳轉到 settings_activity的話，可以給main_fragment新增action標籤來完成跳轉

<?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"
    app:startDestination="@+id/main_fragment">


    <fragment
        android:name="com.wangjun.app.jetpacktodolist.ui.main.MainFragment"
        android:id= "@+id/main_fragment"
        android:label="@string/main_fragment_title"
        tools:layout="@layout/main_fragment">

        <!--跳轉到SettingActivity-->
        <action
            android:id="@+id/action_main_fragment_to_settings_activity"
            app:destination="@id/settings_activity" />

    </fragment>


    <activity
        android:id="@+id/settings_activity"
        android:name="com.wangjun.app.jetpacktodolist.ui.SettingActivity"
        android:label="@string/activity_settings"
        tools:layout="@layout/setting_activity"
        />

</navigation>
複製程式碼

action標籤中的app:destination就是我們要載入導航的檢視

當然我們也可以在導航編輯器中通過拖動來完成

接下來我們在MainFragment中新增一個按鈕來完成跳轉SettingActivity

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.main.MainFragment">

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn_setting"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

</android.support.constraint.ConstraintLayout>

複製程式碼

class MainFragment : Fragment() {

    companion object {
        fun newInstance() = MainFragment()
    }

    private lateinit var viewModel: MainViewModel

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

        view.findViewById<AppCompatButton>(R.id.btn_setting).setOnClickListener {
            Navigation.findNavController(view).navigate(R.id.action_main_fragment_to_settings_activity)
        }


        return view
    }
}
複製程式碼

我們看到通過Navigation.findNavController(view)得到一個NavController,通過NavController.navigate(R.id.xxxx) 會對應到當前View的某個Action，這樣我們就可以跳轉了。是不是很簡單~~~

新增轉場動畫新增轉場動畫也很簡單，我們只需要在action新增如下屬性

<fragment
        android:name="com.wangjun.app.jetpacktodolist.ui.main.MainFragment"
        android:id= "@+id/main_fragment"
        android:label="@string/main_fragment_title"
        tools:layout="@layout/main_fragment">

        <action
            app:popEnterAnim="@anim/slide_in_left"
            app:popExitAnim="@anim/slide_out_right"
            app:enterAnim="@anim/slide_in_right"
            app:exitAnim="@anim/slide_out_left"
            android:id="@+id/action_main_fragment_to_settings_activity"
            app:destination="@id/settings_activity" />

</fragment>
    
複製程式碼

傳遞資料

和以前一樣我們可以通過bundle傳遞資料

程式碼中手寫

 <fragment
        android:id="@+id/main2_fragment"
        android:name="com.wangjun.app.jetpacktodolist.ui.main.Main2Fragment"
        android:label="@string/main2_fragment_title"
        tools:layout="@layout/main2_fragment">

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

        <argument
            android:name="testArg2"
            android:defaultValue="大王叫我來巡山"
            app:type="string" />

</fragment>

複製程式碼

導航編輯器新增

MainFragment傳參到 Main2Fragment

class MainFragment : Fragment() {

    companion object {
        fun newInstance() = MainFragment()
    }

    private lateinit var viewModel: MainViewModel

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

        view.findViewById<AppCompatButton>(R.id.btn_setting).setOnClickListener {
            Navigation.findNavController(view).navigate(R.id.action_main_fragment_to_settings_activity)
        }


        /**
         * 引數跳轉
         */
        view.findViewById<AppCompatButton>(R.id.btn_main2).setOnClickListener {

            val bundle = bundleOf("testArg" to "很高興遇見你",
                    "testArg2" to "你是猴子派來的逗逼嗎")
            Navigation.findNavController(view).navigate(
                    R.id.action_main_fragment_to_main2_fragment,
                    bundle)
        }

        return view
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        viewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)

    }

}
複製程式碼

class Main2Fragment : Fragment() {

    private lateinit var testArg: String
    private lateinit var testArg2: String

    companion object {
        fun newInstance() = Main2Fragment()
    }

    @SuppressLint("SetTextI18n")
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View {
        val view = inflater.inflate(R.layout.main2_fragment, container, false)

        arguments?.let {
            testArg = it["testArg"] as String
            testArg2 = it["testArg2"] as String
        }

        var tvMain = view.findViewById<AppCompatTextView>(R.id.tv_main)

        tvMain.text = "$testArg---$testArg2"

        return view
    }

}
複製程式碼

我們發現傳參是通過NavController 來傳遞的，具體原始碼如下：

NavController.java

 /**
     * Navigate to a destination from the current navigation graph. This supports both navigating
     * via an {@link NavDestination#getAction(int) action} and directly navigating to a destination.
     *
     * @param resId an {@link NavDestination#getAction(int) action} id or a destination id to
     *              navigate to
     * @param args arguments to pass to the destination
     */
    public final void navigate(@IdRes int resId, @Nullable Bundle args) {
        navigate(resId, args, null);
    }
    
複製程式碼

深層連結 deep-link

其實很好理解的，也就是我們以前所說的自定義URL使用Scheme方式來跳轉傳參

navigation.xml

<navigation>
    <activity
        android:id="@+id/settings_activity"
        android:name="com.wangjun.app.jetpacktodolist.ui.SettingActivity"
        android:label="@string/activity_settings"
        tools:layout="@layout/setting_activity" >

        <!--深層連結-->
        <deepLink app:uri="www.leonwang.com/hello/{testArg}" />

    </activity>

</navigation>
複製程式碼

AndroidManifest.xml

<activity
            android:name=".ui.SettingActivity"
            android:label="@string/activity_settings">

            <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.leonwang.com"/>
                <data android:pathPrefix="/hello/"/>
            </intent-filter>

</activity>

複製程式碼

注意

根據官方文件說明，為了保證導航的正確使用，我們需要在目標的Activity中重寫onSupportNavigateUp，以確保導航器能夠正確的回退棧。

override fun onSupportNavigateUp(): Boolean {
	return navController.navigateUp()
}
複製程式碼

最後

好了，導航元件基本的使用就這麼多，DEMO。關於更加詳細的介紹，請參考官方文件說明

Android Jetpack Navigation基本使用
2022-06-15
AndroidJetpackNavigation
Android Jetpack 架構元件之 Navigation
2020-12-31
AndroidJetpack架構元件Navigation
Android Jetpack Architecture原理之ViewModel
2018-10-08
AndroidJetpackView
Jetpack 之 Navigation 初探
2019-04-30
JetpackNavigation
Android Jetpack - 使用 Navigation 管理頁面跳轉
2018-06-07
AndroidJetpackNavigation
Android Jetpack Navigation 深入體驗報告
2019-03-18
AndroidJetpackNavigation
Android Architecture Component 原始碼淺析
2017-11-09
Android原始碼
Jetpack Navigation----原始碼解析
2020-12-07
JetpackNavigation原始碼
Android Jetpack 之 LiveData
2018-11-29
AndroidJetpackLiveData
Android Jetpack 之 Lifecycle
2018-11-28
AndroidJetpack
Android Jetpack 之 ViewModel
2018-11-27
AndroidJetpackView
Android Jetpack之ViewModel
2018-11-13
AndroidJetpackView
Android_Jetpack:Paging元件之BoundaryCallback的使用
2020-11-28
AndroidJetpack元件
Jetpack Compose學習(11)——Navigation頁面導航的使用
2023-02-25
JetpackNavigation
玩轉Android Jetpack系列之ViewMode
2019-05-07
AndroidJetpackView
Android JetPack 簡介及 Work Manager 和 Navigation 元件詳述 | Google 開發者大會
2019-03-03
AndroidJetpackNavigation元件Go
Android 官方元件 Navigation 初使用
2019-04-10
Android元件Navigation
【譯】使用 Android Architecture Componen
2021-09-09
Android
Android Architecture Components 之 Room 篇
2019-03-04
AndroidOOM
Android-Architecture之todo-mvp
2017-02-28
AndroidMVP
Android Jetpack架構元件(七)之WorkManager
2020-12-29
AndroidJetpack架構元件
Android Architecture Component 和架構升級在銘師堂的實踐
2018-12-04
Android架構
Android-Architecture 之 todo-mvp-clean
2019-02-28
AndroidMVP
Android Jetpack（2）：DataBinding的基本使用
2020-11-13
AndroidJetpack
Android Jetpack元件之Lifecycles庫詳解
2019-01-15
AndroidJetpack元件
Jetpack 之 LifeCycle 元件使用詳解
2020-09-16
Jetpack元件
Android Jetpack – 使用 WorkManager 管理後臺任務
2019-03-04
AndroidJetpack
Android JetPack~ LiveData (一) 介紹與使用
2023-02-16
AndroidJetpackLiveData
Android JetPack~ ViewModel (一) 介紹與使用
2023-02-20
AndroidJetpackView
Android Jetpack - 使用 WorkManager 管理後臺任務
2018-06-30
AndroidJetpack
Android Jetpack - DataBinding
2020-10-21
AndroidJetpack
硬核講解 Jetpack 之 LifeCycle 使用篇
2019-12-15
Jetpack
Android Jetpack元件之資料庫Room詳解(一)
2019-01-26
AndroidJetpack元件資料庫OOM
Architecture Component build GoogleSimples build失敗的解決辦法
2017-06-06
UIGo
[譯] Architecture Components 之 Guide to App Architecture
2017-06-07
GUIIDEAPP
Jetpack路由元件學習：深入理解功能強大的Navigation架構之接管系統的返回操作
2021-08-05
Jetpack路由元件Navigation架構
Android Jetpack元件 - ViewModel,LiveData使用以及原理
2019-01-17
AndroidJetpack元件ViewLiveData
Jetpack之Startup快速掌握
2020-12-23
Jetpack