Android Jetpack導(dǎo)航組件Navigation創(chuàng)建使用詳解

更新時(shí)間：2022年11月24日 11:01:10 作者：阿健哥

這篇文章主要為大家介紹了Android Jetpack導(dǎo)航組件Navigation創(chuàng)建及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

導(dǎo)航是指支持用戶導(dǎo)航、進(jìn)入和退出應(yīng)用中不同內(nèi)容片段的交互。Android Jetpack 的導(dǎo)航組件可實(shí)現(xiàn)導(dǎo)航，無(wú)論是簡(jiǎn)單的按鈕點(diǎn)擊，還是應(yīng)用欄和抽屜式導(dǎo)航欄等更為復(fù)雜的模式，該組件均可應(yīng)對(duì)。

依賴項(xiàng)

    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"

創(chuàng)建導(dǎo)航圖

導(dǎo)航發(fā)生在應(yīng)用中的各個(gè)目的地之間。這些目的地是通過(guò)操作連接的，導(dǎo)航圖是一種資源文件，其中包含所有目的地和操作，該圖表會(huì)顯示應(yīng)用的所有導(dǎo)航路徑。

點(diǎn)擊加號(hào)便可以創(chuàng)建目的地 Fragment，連接操作由箭頭表示，該箭頭表示用戶可以如何從一個(gè)目的地導(dǎo)航到另一個(gè)目的地。

目的地是指應(yīng)用中的不同內(nèi)容區(qū)域，操作是指目的地之間的邏輯連接，表示用戶可以采取的路徑。然后，我們來(lái)看下此時(shí)的導(dǎo)航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 元素是導(dǎo)航圖的根元素，向圖表添加目的地和連接操作，即 action 和 destination

導(dǎo)航宿主

導(dǎo)航宿主是一個(gè)空容器，用戶在應(yīng)用中導(dǎo)航時(shí)，目的地會(huì)在該容器中交換進(jìn)出。導(dǎo)航宿主必須派生于 NavHost，Navigation 組件的默認(rèn) NavHost 實(shí)現(xiàn) NavHostFragment，負(fù)責(zé)處理 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 實(shí)現(xiàn)類(lèi)的名稱(chēng)
app:navGraph：將 NavHostFragment 與導(dǎo)航圖相關(guān)聯(lián)
app:defaultNavHost="true"：確保 NavHostFragment 會(huì)攔截系統(tǒng)返回按鈕

注意：只能有一個(gè)默認(rèn) NavHost，如果同一布局（例如，雙窗格布局）中有多個(gè)托管容器，請(qǐng)務(wù)必僅指定一個(gè)默認(rèn) NavHost

導(dǎo)航到目的地

跳轉(zhuǎn)建議使用 Safe Args 確保類(lèi)型安全，在 Project 下的 build.gradle 添加。啟用 Safe Args 后，該插件會(huì)生成代碼，其中包含每個(gè)操作的類(lèi)和方法。對(duì)于每個(gè)操作，Safe Args 還會(huì)為每個(gè)源頭生成一個(gè)類(lèi)。生成的類(lèi)的名稱(chēng)由源類(lèi)的名稱(chēng)和“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'
}

點(diǎn)擊按鈕，進(jìn)行跳轉(zhuǎn)

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

傳遞參數(shù)

啟用 Safe Args 后，會(huì)創(chuàng)建一個(gè)類(lèi)，該類(lèi)的名稱(chēng)是在目的地的名稱(chēng)后面加上“Args”，例如 OneFragment，名稱(chēng)為 OneFragmentArgs，用于參數(shù)傳遞。在 main_navigation.xml 加上參數(shù)標(biāo)簽 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 中進(jìn)行跳轉(zhuǎn)，參數(shù)傳遞

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

TwoFragment接收參數(shù)，建議使用 ktx，就可以使用 by navArgs() 屬性委托來(lái)訪問(wèn)參數(shù)

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

此類(lèi)包含多種靜態(tài)方法，可幫助我們使用頂部應(yīng)用欄、抽屜式導(dǎo)航欄和底部導(dǎo)航欄來(lái)管理導(dǎo)航。這里簡(jiǎn)單實(shí)現(xiàn)一個(gè)底部導(dǎo)航欄，先創(chuàng)建一個(gè) 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="相機(jī)" />
    <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>

創(chuàng)建三個(gè)Fragment，OneFragment，TwoFragment 和 ThreeFragment，作為三個(gè)頁(yè)面，需要注意的是 menu 各個(gè) item 的 id 和 fragment 的 id 需要相對(duì)應(yīng)

<?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中執(zhí)行如下就行啦

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

多模塊導(dǎo)航

對(duì)于比較大型的項(xiàng)目，我們一般都會(huì)采用組件化開(kāi)發(fā)，每個(gè)功能模塊都專(zhuān)注于一項(xiàng)功能。每個(gè)功能模塊都是一個(gè)獨(dú)立的單元，擁有自己的導(dǎo)航圖和目的地，app 模塊依賴于每個(gè)功能模塊。

app 模塊負(fù)責(zé)提供應(yīng)用的完整導(dǎo)航圖，以及將 NavHost 添加到界面中，可以使用 include 來(lái)引用庫(kù)圖。

<?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>

如下圖所示，這里主頁(yè)面一個(gè) MainFragment，用來(lái)做跳轉(zhuǎn)，分別可跳轉(zhuǎn)到兩個(gè)不同的模塊

然后在 MainFragment 里執(zhí)行跳轉(zhuǎn)邏輯

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

那么，問(wèn)題來(lái)了，如果是兩個(gè)單獨(dú)的功能模塊之間需要導(dǎo)航呢，而獨(dú)立的功能模塊彼此又看不到對(duì)方，怎么辦呢？這時(shí)，可以使用深層鏈接直接導(dǎo)航到與隱式深層鏈接關(guān)聯(lián)的目的地。

舉個(gè)例子，現(xiàn)在要從 Bikelibrary 里的 Fragment 跳轉(zhuǎn)到 Carlibrary 里的 Fragment

將 Carlibrary 中的導(dǎo)航添加深層鏈接

<?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>

當(dāng)然，你也可以從xml編輯器的右側(cè)添加

然后在 bikelibrary 里的 fragment 中根據(jù)此鏈接進(jìn)行導(dǎo)航，這里設(shè)置了一個(gè)按鈕的點(diǎn)擊事件

            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)
            }

這樣，就完成了跨模塊導(dǎo)航，是不是很方便呢？不過(guò)，需要注意的是，Safe Args 不支持跨模塊導(dǎo)航，因?yàn)闆](méi)有針對(duì)目的地的直接操作。

以上就是Android Jetpack導(dǎo)航組件Navigation創(chuàng)建使用詳解的詳細(xì)內(nèi)容，更多關(guān)于Android Jetpack導(dǎo)航組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: