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

Navigation 簡介
Navigation 是一個強大的庫

提供了一種簡單的方式來處理 Android 應用程序中不同fragment之間的導航。
以下圖例
是在專案中導入navigation
並設置跳轉的例子
我們看到當完成一個專案時
可以一目瞭然整個轉案的跳轉邏輯

navigation


Navigation 導入開發
將 Navigation 庫添加到項目的 build.gradle 文件中

添加相關library至build.gradle內
注意:「Navigation」 元件必須使用 Android Studio 3.3 或以上版本


Navigation 導入開發
0. 快速透過IDE建立

透過Android Studio
右鍵單擊項目目錄中的 res 文件夾 > New > Android Resource File來新增Navigation xml。
另外如果想純手動加入,也可以在res下建立 navigation folder 裡面新增nav_graph.xml

navigation_03 navigation_04
1. 建立<fragment> 與 設定startDestination
實際folder 結構
navigation_05

加入 fragment
id = 命名
name = fragment的path
label = 標示訊息或類似tag
tools:layout = 要預覽顯示的layout xml resource

加入 startDestination
例如:app:startDestination="@id/landingFragment"

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

android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/navigation_main" (選擇性,加了會在IDE預覽)
app:defaultNavHost="true"

navigation_07


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

在fragment內 加入action
加入後設定destination
如:app:destination="@id/signInFragment"
(action 寫在外面也可全域跳轉)

navigation_08


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

直接在要跳轉的地方加入
findNavController().navigate(R.id.action_FirstFragment_to_SecondFragment)

navigation_09


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


navigation_010


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

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

navigation_011

新增一張 nav graph xml後
使用include導入的方式:

navigation_012


Navigation 開發案例 - dialog fragment
從dialog fragment進入

跟上面一樣在nav graph 直接加入 dialog tag
並導入你做好的DialogFragment就能用

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

navigation_013


Navigation 開發案例 - 傳遞變數
加入argument

一樣在nav graph 直接加入argument
則可以預設帶入傳遞的變數 (argType = 變數型態, defaultValue = 預設值 )

navigation_014


程式碼傳遞變數

a. 不使用上面xml的方式預設值
可以下方兩組程式碼直接傳遞變數

b. 如果是有用xml方式帶入預設值的
則可以用下面收變數的程式碼直接接收

navigation有支援的變數型態
navigation_020


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,把最上層相同的頁面移除

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

navigation_015


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_018


Navigation 參考資料



Navigation Sample code


You might also enjoy