Jetpack navigation元件超詳細講解

2022-11-01 14:02:36

導航是指支援使用者導航、進入和退出應用中不同內容片段的互動。Android Jetpack 的導航元件可幫助您實現導航，無論是簡單的按鈕點選，還是應用欄和抽屜式導航欄等更為複雜的模式，該元件均可應對。導航元件還通過遵循一套既定原則來確保一致且可預測的使用者體驗。

依賴項

def nav_version = "2.5.2"
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"

建立導航圖

導航發生在應用中的各個目的地之間。這些目的地是通過操作連線的，導航圖是一種資原始檔，其中包含您的所有目的地和操作，該圖表會顯示應用的所有導航路徑。

點選加號便可以建立目的地Fragment，連線操作由箭頭表示，該箭頭表示使用者可以如何從一個目的地導航到另一個目的地。

目的地是指應用中的不同內容區域，操作是指目的地之間的邏輯連線，表示使用者可以採取的路徑。然後，我們來看下此時的導航xml程式碼:：main_navigation.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/main_navigation"
    app:startDestination="@id/oneFragment">
    <fragment
        android:id="@+id/oneFragment"
        android:name="com.example.myapplication.OneFragment"
        android:label="fragment_one"
        tools:layout="@layout/fragment_one" >
        <action
            android:id="@+id/action_oneFragment_to_twoFragment"
            app:destination="@id/twoFragment" />
    </fragment>
    <fragment
        android:id="@+id/twoFragment"
        android:name="com.example.myapplication.TwoFragment"
        android:label="fragment_two"
        tools:layout="@layout/fragment_two" >
        <action
            android:id="@+id/action_twoFragment_to_threeFragment"
            app:destination="@id/threeFragment" />
    </fragment>
    <fragment
        android:id="@+id/threeFragment"
        android:name="com.example.myapplication.ThreeFragment"
        android:label="fragment_three"
        tools:layout="@layout/fragment_three" />
</navigation>

其中，navigation 元素是導航圖的根元素，當您向圖表新增目的地和連線操作時，就 action 和 app:destination

導航宿主

導航宿主是一個空容器，使用者在您的應用中導航時，目的地會在該容器中交換進出，導航宿主必須派生於 NavHost，Navigation 元件的預設 NavHost 實現 (NavHostFragment) 負責處理 Fragment 目的地的交換。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/container"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/main_navigation" />
</LinearLayout>

android:name：NavHost 實現類的名稱

app:navGraph：將 NavHostFragment 與導航圖相關聯

app:defaultNavHost=“true”：確保 NavHostFragment 會攔截系統返回按鈕。

注意：只能有一個預設 NavHost，如果同一佈局（例如，雙窗格佈局）中有多個託管容器，請務必僅指定一個預設 NavHost

導航到目的地

跳轉建議使用 Safe Args 確保型別安全，在 Project 下的 build.gradle 新增。啟用 Safe Args 後，該外掛會生成程式碼，其中包含每個操作的類和方法。對於每個操作，Safe Args 還會為每個源頭生成一個類。生成的類的名稱由源類的名稱和“Directions”一片語成，例如OneFragment，生成的就是OneFragmentDirections

buildscript {
repositories {
google()
}
dependencies {
def nav_version = "2.5.2"
classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
}
}

在APP模組的 build.gradle 新增

plugins {
id 'androidx.navigation.safeargs'
}

點選按鈕，進行跳轉

        jump.setOnClickListener {
            val action = OneFragmentDirections.actionOneFragmentToTwoFragment()
            it.findNavController().navigate(action)
        }

傳遞引數

啟用 Safe Args 後，會建立一個類，該類的名稱是在目的地的名稱後面加上“Args”，例如 OneFragment，名稱為OneFragmentArgs，用於引數傳遞。

在 main_navigation.xml 加上引數標籤 argument

    <fragment
        android:id="@+id/oneFragment"
        android:name="com.example.myapplication.OneFragment"
        android:label="fragment_one"
        tools:layout="@layout/fragment_one">
        <argument
            android:name="name"
            android:defaultValue="1"
            app:argType="string" />
        <action
            android:id="@+id/action_oneFragment_to_twoFragment"
            app:destination="@id/twoFragment" />
    </fragment>

在 OneFragment 中進行跳轉，引數傳遞

        jump.setOnClickListener {
            val param = OneFragmentArgs.Builder().setName(nameStr).build().toBundle()
            it.findNavController().navigate(R.id.action_oneFragment_to_twoFragment, param)
        }

TwoFragment接收引數，建議使用 ktx，就可以使用 by navArgs() 屬性委託來存取引數

class TwoFragment : Fragment() {
    private val args: OneFragmentArgs by navArgs()
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val nameStr = args.name //接收的值
        return inflater.inflate(R.layout.fragment_two, container, false)
    }
}

NavigationUI

此類包含多種靜態方法，可幫助您使用頂部應用欄、抽屜式導航欄和底部導航欄來管理導航。

這裡簡單實現一個底部導航欄，先建立一個menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/oneFragment"
        android:icon="@android:drawable/ic_menu_camera"
        android:title="相機" />
    <item
        android:id="@+id/twoFragment"
        android:icon="@android:drawable/ic_dialog_email"
        android:title="郵件" />
    <item
        android:id="@+id/threeFragment"
        android:icon="@android:drawable/ic_menu_call"
        android:title="電話" />
</menu>

建立三個Fragment，OneFragment，TwoFragment 和 ThreeFragment，作為三個頁面

然後 navigation 長這樣，需要注意的是menu各個item的id和fragment的id需要相對應

<?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/main_navigation"
    app:startDestination="@id/oneFragment">
    <fragment
        android:id="@+id/oneFragment"
        android:name="com.example.myapplication.OneFragment"
        android:label="fragment_one"
        tools:layout="@layout/fragment_one" />
    <fragment
        android:id="@+id/twoFragment"
        android:name="com.example.myapplication.TwoFragment"
        android:label="fragment_two"
        tools:layout="@layout/fragment_two" />
    <fragment
        android:id="@+id/threeFragment"
        android:name="com.example.myapplication.ThreeFragment"
        android:label="fragment_three"
        tools:layout="@layout/fragment_three" />
</navigation>

宿主的佈局如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/container"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/main_navigation" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/main_item" />
</LinearLayout>

然後在宿主Activity中執行如下就行啦

        val navHostFragment =
            supportFragmentManager.findFragmentById(R.id.container) as NavHostFragment
        val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottom)
        NavigationUI.setupWithNavController(bottomNavigationView, navHostFragment.navController)

多模組導航

對於比較大型的專案，我們一般都會採用元件化開發，每個功能模組都專注於一項功能。每個功能模組都是一個獨立的單元，擁有自己的導航圖和目的地，app 模組依賴於每個功能模組。

app 模組負責提供應用的完整導航圖，以及將 NavHost 新增到介面中，可以使用 include 來參照庫圖。

<?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/main_navigation"
    app:startDestination="@id/mainFragment">
    <include app:graph="@navigation/bike_nav" />
    <include app:graph="@navigation/car_nav" />
    <fragment
        android:id="@+id/mainFragment"
        android:name="com.example.myapplication.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main">
        <action
            android:id="@+id/action_mainFragment_to_car_nav"
            app:destination="@id/car_nav" />
        <action
            android:id="@+id/action_mainFragment_to_bike_nav"
            app:destination="@id/bike_nav" />
    </fragment>
</navigation>

如下圖所示，這裡主頁面一個MainFragment，用來做跳轉，分別可跳轉到兩個不同的模組

然後在 MainFragment 裡執行跳轉邏輯

            findViewById<TextView>(R.id.red).setOnClickListener {
                it.findNavController().navigate(MainFragmentDirections.actionMainFragmentToCarNav())
            }
            findViewById<TextView>(R.id.purple).setOnClickListener {
                it.findNavController()
                    .navigate(MainFragmentDirections.actionMainFragmentToBikeNav())
            }

那麼，問題來了，如果是兩個單獨的功能模組之間需要導航呢，而獨立的功能模組彼此又看不到對方，怎麼搞呢？

這時，可以使用深層連結直接導航到與隱式深層連結關聯的目的地

舉個例子，現在要從 Bikelibrary 裡的 Fragment 跳轉到 Carlibrary 裡的 Fragment

將 Carlibrary 中的導航新增深層連結

<?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/car_nav"
    app:startDestination="@id/carFragment">
    <fragment
        android:id="@+id/carFragment"
        android:name="com.example.carlibrary.CarFragment"
        android:label="fragment_car"
        tools:layout="@layout/fragment_car">
        <deepLink
            android:id="@+id/deepLink"
            app:uri="android-app://com.example.carlibrary/carFragment" />
    </fragment>
</navigation>

當然，你也可以從xml編輯器的右側新增

然後在 bikelibrary 裡的 fragment 中根據此連結進行導航，這裡設定了一個按鈕的點選事件

            findViewById<Button>(R.id.bike_to_car).setOnClickListener {
                val request =
                    NavDeepLinkRequest.Builder.fromUri("android-app://com.example.carlibrary/carFragment".toUri())
                        .build()
                it.findNavController().navigate(request)
            }

這樣，就完成了跨模組導航，是不是很方便呢？不過，需要注意的是，Safe Args 不支援跨模組導航，因為沒有針對目的地的直接操作。

到此這篇關於Jetpack navigation元件超詳細講解的文章就介紹到這了,更多相關Jetpack navigation內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！