打造流暢Android App跳轉體驗！Navigation with Kotlin 一篇文章就能搞定你的APP跳轉問題！

Navigation 簡介

Navigation 是一個強大的庫

提供了一種簡單的方式來處理 Android 應用程序中不同fragment之間的導航。

以下圖例

是在專案中導入navigation

並設置跳轉的例子

我們看到當完成一個專案時

可以一目瞭然整個轉案的跳轉邏輯

Navigation 導入開發

將 Navigation 庫添加到項目的 build.gradle 文件中

添加相關library至build.gradle內

<b>注意：「Navigation」 元件必須使用 Android Studio 3.3 或以上版本</b>

Navigation 導入開發

0. 快速透過IDE建立

透過Android Studio 右鍵單擊項目目錄中的 res 文件夾 > New > Android Resource File來新增Navigation xml。

另外如果想純手動加入，也可以在res下建立 navigation folder 裡面新增nav_graph.xml

1. 建立<fragment> 與設定startDestination

實際folder 結構

加入 fragment

id = 命名

name = fragment的path

label = 標示訊息或類似tag

tools:layout = 要預覽顯示的layout xml resource

加入 startDestination

例如：app:startDestination="@id/landingFragment"

2. 在Activity的FragmentContainerView加入以下三行

android:name="androidx.navigation.fragment.NavHostFragment"

app:navGraph="@navigation/navigation_main" (選擇性，加了會在IDE預覽)

app:defaultNavHost="true"

3. 加入<action> 並設定目的地

在fragment內加入action

加入後設定destination

如：app:destination="@id/signInFragment"

(action 寫在外面也可全域跳轉)

4. 程式碼添加跳轉目的地即可跳轉

直接在要跳轉的地方加入

findNavController().navigate(R.id.action_FirstFragment_to_SecondFragment)

5. 要跳轉Activity則跟上面<fragment>類似，換成<activity>即可

6. 使用多張nav graph，可使用嵌套方式或 include

直接再加入一張navigation的方式：

新增一張 nav graph xml後

使用include導入的方式：

Navigation 開發案例 - dialog fragment

從dialog fragment進入

跟上面一樣在nav graph 直接加入 dialog tag

並導入你做好的DialogFragment就能用

(id = 命名 , name = fragment的path, label = 標示訊息或類似tag, tools:layout = 要顯示的layout xml resource)

Navigation 開發案例 - 傳遞變數

加入argument

一樣在nav graph 直接加入argument

則可以預設帶入傳遞的變數 (argType = 變數型態, defaultValue = 預設值 )

程式碼傳遞變數

a. 不使用上面xml的方式預設值

可以下方兩組程式碼直接傳遞變數

b. 如果是有用xml方式帶入預設值的

則可以用下面收變數的程式碼直接接收

navigation有支援的變數型態

Navigation 開發案例 - 動畫

支援直接設定跳轉動畫

帶入 enterAnim, exitAnim, popEnterAnim ,popExitAnim 則可以輕鬆預設跳轉動畫

支援Activity 加上彈出動畫

使用下方code 可以使用navigation內建的activity跳離動畫

Navigation 開發案例 - 支援 multiple back stacks

支援處理多個back stack 的方式

透過 Navigation 提供的api讓相關view關聯

便可處理多個back stack跳轉問題

例如setupWithNavController 與bottom navigation view關聯

setupActionBarWithNavController 與action bar關聯

Navigation 開發案例 - popUpTo 及 popUpToInclusive

透過 popUpTo 導向目的地頁面時，移除該頁面stack上的所有頁面

透過 popUpToInclusive，把最上層相同的頁面移除

此圖，闡述了一般跳轉邏輯

fragment依照順序跳轉 1 -> 2 -> 3 最後再從 3回到1

且再次跳轉 1 -> 2 -> 3 再回到1

此時眾fragment 在back stack內順序為[1,2,3,1,2,3,1]

若是想要跳轉回1的時候在stack內不再有目的fragment以上的內容可以在xml的action內加入

popUpTo 與 popUpToInclusive

這邊便可以讓下次跳轉回目的地fragment 上方有個stack instance給清除掉

若以實際範例來看，加入前

若以實際範例來看，加入後

Navigation 開發案例 - NavOptions

透過 NavOptions 來設置NavController

同樣navigation也提供對應builder讓你設置上面講到過的一些功能，NavOptions範例：

val options = NavOptions.Builder()
    .set....
    .build()

最後跳轉時帶入

findNavController().navigate(R.id.action_FirstFragment_to_SecondFragment,null, options)

可進行的設置項目有：

Navigation 參考資料

官方文件

投影片解說

Navigation Sample code

Github Source code