Android Academy · 课时

Navigation 组件

使用可视化 NavGraph、用于类型安全参数的 Safe Args、NavController 和深层链接支持管理多屏幕导航。

Navigation 组件 是 CoddyKit 上的免费 Android Academy 课时。这是第 5 节课，共 6 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Android Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Android Academy 课程共包含 6 节课。

什么是 Navigation Component？

Navigation Component 是 Android Jetpack 的一个库，它通过单一的可视化图表管理 Fragment 导航、返回栈、深层链接和过渡动画。

主要优点：

可在 Android Studio 中使用可视化导航图
类型安全的参数传递（Safe Args）
自动管理返回栈
开箱即用的深层链接支持

设置：依赖项

添加到 app/build.gradle：

// app/build.gradle
dependencies {
    implementation 'androidx.navigation:navigation-fragment-ktx:2.7.7'
    implementation 'androidx.navigation:navigation-ui-ktx:2.7.7'
}

// project/build.gradle (for Safe Args):
buildscript {
    dependencies {
        classpath 'androidx.navigation:navigation-safe-args-gradle-plugin:2.7.7'
    }
}

// app/build.gradle — apply the plugin:
plugins {
    id 'androidx.navigation.safeargs.kotlin'
}

导航图（nav_graph.xml）

创建 res/navigation/nav_graph.xml。它定义目标（Fragment）和操作（导航路径）：

<!-- res/navigation/nav_graph.xml -->
<navigation
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.HomeFragment">
        <action
            android:id="@+id/action_home_to_detail"
            app:destination="@id/detailFragment" />
    </fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.DetailFragment">
        <argument
            android:name="itemId"
            app:argType="integer" />
    </fragment>
</navigation>

Activity 布局中的 NavHostFragment

将 FrameLayout 容器替换为 NavHostFragment。它充当所有导航目标的宿主：

<!-- activity_main.xml -->
<androidx.fragment.app.FragmentContainerView
    android:id="@+id/navHostFragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:navGraph="@navigation/nav_graph"
    app:defaultNavHost="true" />

NavController — 在 Fragment 之间导航

获取一个 NavController，并使用操作 ID 调用 navigate()：

class HomeFragment : Fragment() {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.btnOpenDetail.setOnClickListener {
            // Navigate using action ID from nav_graph
            findNavController().navigate(R.id.action_home_to_detail)
        }
    }
}

Safe Args — 类型安全的参数

Safe Args 会生成用于在 Fragment 之间传递参数的类，无需进行类型转换，也不会因键名拼写错误而出问题：

// In HomeFragment — pass itemId:
binding.btnOpenDetail.setOnClickListener {
    val action = HomeFragmentDirections.actionHomeToDetail(itemId = 42)
    findNavController().navigate(action)
}

// In DetailFragment — receive itemId:
class DetailFragment : Fragment() {
    private val args: DetailFragmentArgs by navArgs()

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val id = args.itemId   // Int, type-safe
        viewModel.loadItem(id)
    }
}

向上导航

将 Toolbar 的向上按钮连接到 NavController，即可自动实现返回导航：

class MainActivity : AppCompatActivity() {

    private lateinit var navController: NavController

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

        val navHostFragment = supportFragmentManager
            .findFragmentById(R.id.navHostFragment) as NavHostFragment
        navController = navHostFragment.navController

        // Wire toolbar Up button
        setupActionBarWithNavController(navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp() || super.onSupportNavigateUp()
    }
}

使用 NavController 实现底部导航

将 BottomNavigationView 连接到 NavController，它会自动处理标签页选择和返回栈：

// In Activity.onCreate():
val navHostFragment = supportFragmentManager
    .findFragmentById(R.id.navHostFragment) as NavHostFragment
val navController = navHostFragment.navController

// Wire BottomNavigationView
binding.bottomNav.setupWithNavController(navController)

// Each menu item ID must match a fragment destination ID in nav_graph.xml

弹出返回栈

以编程方式返回，或导航到指定目标：

// Go back one step
findNavController().popBackStack()

// Navigate back to a specific destination (popping everything on top)
findNavController().popBackStack(R.id.homeFragment, inclusive = false)

// Navigate and clear back stack (e.g., after login)
findNavController().navigate(
    R.id.action_login_to_home,
    null,
    NavOptions.Builder()
        .setPopUpTo(R.id.loginFragment, inclusive = true)
        .build()
)

深层链接

为目标添加深层链接，这样应用就可以从 URL 打开：

<!-- In nav_graph.xml, inside the destination fragment: -->
<deepLink
    android:id="@+id/deepLinkDetail"
    app:uri="https://example.com/items/{itemId}" />

<!-- Also add intent-filter in AndroidManifest.xml for the Activity: -->
<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="example.com" />
</intent-filter>

Fragment 之间的过渡

在导航图的导航操作中添加自定义动画：

<action
    android:id="@+id/action_home_to_detail"
    app:destination="@id/detailFragment"
    app:enterAnim="@anim/slide_in_right"
    app:exitAnim="@anim/slide_out_left"
    app:popEnterAnim="@anim/slide_in_left"
    app:popExitAnim="@anim/slide_out_right" />

快速检查

要自动处理标签页，BottomNavigationView 菜单项 ID 与导航图中的什么内容必须匹配？

回顾：Navigation Component

Navigation Component 简化了多屏幕应用的开发：

可视化的 nav_graph.xml — 目标 + 操作
Activity 布局中的 NavHostFragment
使用 findNavController().navigate(actionId) 在屏幕之间切换
Safe Args — 类型安全的参数传递（无需类型转换，也不会拼写错误）
setupActionBarWithNavController() — 自动添加向上按钮
setupWithNavController() — 自动连接 BottomNavigationView

下一节：使用 Hilt 添加依赖注入，实现清晰的架构。

常见问题解答

「Navigation 组件」课时是免费的吗？

是的 — 「Navigation 组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Android Academy 课程的其余内容，请升级到 CoddyKit PRO。 Android Academy 课程共包含 6 节课。

「Navigation 组件」这节课中我会学到什么？

使用可视化 NavGraph、用于类型安全参数的 Safe Args、NavController 和深层链接支持管理多屏幕导航。你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Android Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 5 节课，共 6 节。

「Navigation 组件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Android Academy 课中编写并运行代码吗？

能。每节 Android Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Android Academy