Jetpack之Navigation

navigation是負(fù)責(zé)fragment之間切換的處理工具

有三個核心點:

  • Navigation Graph (New XML Resource): 控制中心,包含所有頁面及頁面間的關(guān)系
  • NavHostFragment (Layout XML View):特殊的Fragment,是其他Fragment的“容器”,Navigation Graph中所有Fragmnet正是通過這個特殊的Fragment進(jìn)行展示的
  • NavController (Kotlin / Java Object): 負(fù)責(zé)完成Navigation中具體的頁面切換工作

三者之間的關(guān)系:當(dāng)需要切換頁面時,使用NavController對象,告訴它想要去的Navigation Graph中的哪個Fragment,NavController對象會將目的地的Fragment展示在NavHostFragment中。

一、基本使用

1. 添加依賴

dependencies {
    
    ......
    def nav_version = "2.3.5"

    // Kotlin
    implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
    implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
}

2. 創(chuàng)建Navigation Graph

res文件夾 -> New -> Android Resource File


Create Navigation Graph

3. 添加NavHostFragmnet

在activity_main.xml文件中添加fragment作為NavHostFragment,其中有三點需要注意:

  • name必須是"androidx.navigation.fragment.NavHostFragment"
  • defaultNavHost設(shè)置為"true"
  • navGraph設(shè)置為"@navigation/nav_graph"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

</RelativeLayout>

4. 創(chuàng)建Destination

在nav_graph.xml頁面里,依次點擊加號、 Create new destination創(chuàng)建一個Destination,首次在此創(chuàng)建一個MainFragment作為StartDestination

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

    <fragment
        android:id="@+id/mainFragment"
        android:name="com.example.mynavigationdemo.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main" />
</navigation>

5. 頁面切換

在nav_graph.xml頁面里,就像創(chuàng)建MainFragment一樣創(chuàng)建一個SecondFragment

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

    <fragment
        android:id="@+id/mainFragment"
        android:name="com.example.mynavigationdemo.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main" />
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.mynavigationdemo.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" />
</navigation>

5.1 創(chuàng)建Action

在nav_graph.xml頁面的Design面板里,單擊MainFragment,然后選中右側(cè)的圓圈熱點并拖拽指向右側(cè)的SecondFragmnt


選中熱點并拖拽

Action創(chuà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/nav_graph"
    app:startDestination="@id/mainFragment">

    <fragment
        android:id="@+id/mainFragment"
        android:name="com.example.mynavigationdemo.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main">
        <action
            android:id="@+id/action_mainFragment_to_secondFragment"
            app:destination="@id/secondFragment" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.mynavigationdemo.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" />
</navigation>

5.2 使用NavController導(dǎo)航到目的地

在fragment_main.xml中添加一個按鈕,然后在MainFragment文件中添加該按鈕點擊事件的監(jiān)聽器,當(dāng)點擊該按鈕時通過NavController完成頁面跳轉(zhuǎn)

class MainFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        view.findViewById<Button>(R.id.btnToSecondFragment).setOnClickListener {
            findNavController().navigate(R.id.action_mainFragment_to_secondFragment)
        }
    }
}

導(dǎo)航到目的地是使用 NavController 完成的,它是一個在 NavHost 中管理應(yīng)用導(dǎo)航的對象。每個 NavHost 均有自己的相應(yīng)NavController,NavController 提供了幾種導(dǎo)航到目的地的不同方式,如需從 Fragment、Activity 或View中獲取NavController,請使用以下某種方法:

  • Fragment.findNavController()
  • View.findNavController()
  • Activity.findNavController(viewId: Int)

5.3 添加切換動畫

在nav_graph.xml頁面的Design面板里,點擊MainFragment指向SecondFragment的箭頭(即頁面跳轉(zhuǎn)Action),然后在Attributes面板的Animations部分中,點擊要添加的動畫旁邊的下拉箭頭,選擇需要設(shè)置的動畫


添加動畫
<?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/nav_graph"
    app:startDestination="@id/mainFragment">

    <fragment
        android:id="@+id/mainFragment"
        android:name="com.example.mynavigationdemo.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main">

        <action
            android:id="@+id/action_mainFragment_to_secondFragment"
            app:destination="@id/secondFragment"
            app:enterAnim="@android:anim/fade_in"
            app:exitAnim="@android:anim/fade_out"
            app:popEnterAnim="@android:anim/fade_in"
            app:popExitAnim="@android:anim/fade_out" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.mynavigationdemo.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" />
</navigation>

6. 傳遞參數(shù)

6.1 基本類型參數(shù)

6.1.1 添加參數(shù)

在nav_graph.xml頁面的Design面板里,點擊接收參數(shù)的目的地Fragment(此處為secondFragment), 然后在Attributes面板的Arguments列點擊右側(cè)添加按鈕(+)可添加參數(shù)

添加參數(shù)
<?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/nav_graph"
    app:startDestination="@id/mainFragment">

    <fragment
        android:id="@+id/mainFragment"
        android:name="com.example.mynavigationdemo.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main">

        <action
            android:id="@+id/action_mainFragment_to_secondFragment"
            app:destination="@id/secondFragment"
            app:enterAnim="@android:anim/fade_in"
            app:exitAnim="@android:anim/fade_out"
            app:popEnterAnim="@android:anim/fade_in"
            app:popExitAnim="@android:anim/fade_out" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.mynavigationdemo.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" >
        <argument
            android:name="name"
            app:argType="string"
            android:defaultValue='"HSG"' />
    </fragment>
</navigation>
6.1.2 接收參數(shù)
class SecondFragment : Fragment() {
    val TAG = "SecondFragment"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val name = arguments?.getString("name")
        Log.d(TAG, "onCreate() called with: name = $name")
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_second, container, false)
    }
}

logcat 輸出:D/SecondFragment: onCreate() called with: name = "HSG"

6.1.3 傳遞參數(shù)
class MainFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        view.findViewById<Button>(R.id.btnToSecondFragment).setOnClickListener {
            val bundle = Bundle()
            bundle.putString("name", "Hello World")
            findNavController().navigate(R.id.action_mainFragment_to_secondFragment, bundle)
        }
    }
}

logcat 輸出:D/SecondFragment: onCreate() called with: name = Hello Word

6.2 使用safe args傳遞參數(shù)

該插件可以生成簡單的 object和builder類,以便以類型安全的方式瀏覽和訪問任何關(guān)聯(lián)的參數(shù)。我們強烈建使用Safe Args進(jìn)行數(shù)據(jù)傳遞,因為它可以確保類型安全。

6.2.1 添加依賴

在project的build.gradle文件中添加safe args插件:

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

在app的build.gradle文件中添加:

(1)如需生成適用于 Java 模塊或 Java 和 Kotlin 混合模塊的 Java 語言代碼,請?zhí)砑樱?/p>

apply plugin: "androidx.navigation.safeargs"

(2)如需生成適用于僅 Kotlin 模塊的 Kotlin 語言代碼,請?zhí)砑樱?/p>

apply plugin: "androidx.navigation.safeargs.kotlin"

根據(jù)遷移到 AndroidX 文檔,gradle.properties 文件中必須具有 android.useAndroidX=true

啟用 Safe Args 后,生成的代碼會為每個Action(包含發(fā)送方和接收方)提供類型安全的類和方法:

  • 為Action的每一個發(fā)送方創(chuàng)建一個類。該類的名稱是在發(fā)送方的名稱后面加上“Directions”。例如,如果發(fā)送方是名為MainFragment的Fragment,則生成的類的名稱為 MainFragmentDirections,該類會為發(fā)送方中定義的每個Action提供一個方法。
  • 對于用于傳遞參數(shù)的每個Action,都會創(chuàng)建一個 inner 類,該類的名稱根據(jù)Action的名稱確定。例如,如果Action名稱為 action_mainFragment_to_secondFragment,則類名稱為 ActionMainFragmentToSecondFragment,可以此關(guān)聯(lián)的 action 類來設(shè)置參數(shù)值。
  • 為接收目方創(chuàng)建一個類。該類的名稱是在接收方的名稱后面加上“Args”。例如,如果接收方的 Fragment 的名稱為 SecondFragment,則生成的類的名稱為 SecondFragmentArgs。可以使用該類的 fromBundle() 方法獲取傳遞的參數(shù)。
6.2.2 傳遞參數(shù)
class MainFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        view.findViewById<Button>(R.id.btnToSecondFragment).setOnClickListener {
//            val bundle = Bundle()
//            bundle.putString("name", "Hello World")
//            findNavController().navigate(R.id.action_mainFragment_to_secondFragment, bundle)
            val direction = MainFragmentDirections.actionMainFragmentToSecondFragment("Hello Android")
            findNavController().navigate(direction)
        }
    }
}
6.2.3 接收參數(shù)
class SecondFragment : Fragment() {
    val TAG = "SecondFragment"
    private val args by navArgs<SecondFragmentArgs>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
//        val name = arguments?.getString("name")
        Log.d(TAG, "onCreate() called with: name = ${args.name}")
    }
}

logcat 輸出:D/SecondFragment: onCreate() called with: name = Hello Android

7. 配置ActionBar

通過Navigation完成頁面跳轉(zhuǎn)已基本完成,但和Activity跳轉(zhuǎn)相比仍有不足之處——當(dāng)前的ActionBar標(biāo)題不會跟隨Navigation頁面變化,而且也沒有用于返回的小圖標(biāo)。因此,本節(jié)就來解決該問題,Navigation已提供了便捷的解決方案,只需配置NavController對ActionBar進(jìn)行控制,即可解決該問題。

在MainActivity中,通過四步即可完成配置:
第1步,在Activity上獲取NavController

navController = findNavController(R.id.nav_host_fragment)

第2步,配置AppBarConfiguration,以便NavController接管ActionBar后能正確進(jìn)行控制

appbarConfiguration = AppBarConfiguration.Builder(navController.graph).build()

第3步,配置NavController對ActionBar進(jìn)行控制

NavigationUI.setupActionBarWithNavController(this, navController, appbarConfiguration)

第4步,讓NavController接管返回事件

override fun onSupportNavigateUp(): Boolean {
        return NavigationUI.navigateUp(
            navController,
            appbarConfiguration
        ) or super.onSupportNavigateUp()
    }

完整代碼:

class MainActivity : AppCompatActivity() {
    private lateinit var appbarConfiguration: AppBarConfiguration
    private lateinit var navController: NavController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        navController = findNavController(R.id.nav_host_fragment)
        appbarConfiguration = AppBarConfiguration.Builder(navController.graph).build()
        NavigationUI.setupActionBarWithNavController(this, navController, appbarConfiguration)
    }

    override fun onSupportNavigateUp(): Boolean {
        return NavigationUI.navigateUp(
            navController,
            appbarConfiguration
        ) or super.onSupportNavigateUp()
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容