Android Jetpack: Introducing Navigation Component Android Developers English Chinese (China)

Android Jetpack: Introducing Navigation ComponentYouTube↗ IA↗(long shot)
Science & Technology 96.2K views 1.4K likes 39 dislikes 14 Mar 2019

Android Developers 1.4M subscribers N/A YouTube↗

Click to Play Video

[MUSIC PLAYING]

LYLA FUJIWARA: Navigating around an app, by which I

浏览应用程序，

mean moving from one screen to another,

我的意思是从一个屏幕移动到另一个屏幕，

is an absolutely fundamental part of Android development.

这是安卓开发的基础部分。

Historically you'd do this using intents or fragment

从历史上看，你可以使用意图或片段交互

transactions, which in simple cases, like clicking a button,

来完成此操作，在简单的情况下，例如单击按钮，

was easy enough.

这很容易。

But what if you wanted to do something just slightly more

但是如果你想做一些稍微复杂的事情呢？

complex? For example, hooking up a common pattern like bottom navigation.

例如，连接像底部导航这样的常见模式。

You'd need to make sure that not only your Bottom Navigation

你需要确保不仅你的底部导航视图

view actually navigates but also that it

实可以真的导航，而且还要

highlights the correct button.

突出显示正确的按钮。

Oh, and also that it handles the backstack in a uniform way

哦，而且它以统一的方式处理后台堆叠，

so that users don't end up getting lost or confused.

这样用户就不会失去方向或迷茫。

Cases like this are where the new navigation component

像这样的案例是新导航组件

闪耀的地方。

The navigation component is a collection

导航组件是一组库，

of libraries, a plug-in, and tooling

一个可可简化安卓导航的

that simplifies Android navigation.

插件和工具。

Beyond making the setup for common patterns like Bottom

除了使底部导航等常见模式的设置

Navigation easier, the component handles the backstack,

更容易之外，该组件还处理后台堆栈，

fragment transactions, argument passing,

片段交易，参数传递，

navigation-based animations, and deep linking.

基于导航的动画和深层链接。

Importantly, it gathers up all of this navigation information

重要的是，它会收集所有这些导航信息，

and puts it in one visualized location of your app,

并将其放在你应用程序的一个可视化位置，

the Navigation graph.

即导航图。

The navigation component works out

导航组件与片段和活动

of the box with fragments and activities.

开箱即用。

You can also extend the library to work with other screen

您还可以扩展其库以使用其他屏幕实施，

implementations, like your custom views.

例如自定义视图。

Let's look at some examples of the navigation components

让我们看一下实际导航组件的一些示例，

in action, with a single activity swapping out

这里其中一个活动将交换

multiple fragments.

多个片段。

If you're wondering why you might consider

如果你想知道为什么要考虑

a single-activity model, check out Ian Link's excellent talk,

单个活动模型，请查看Ian Link的精彩演讲，

which I've linked in the notes.

我在笔记中添加了视频链接。

So one way to think about the navigation component

因此，导航组件

is that there are three major parts working together

由三个主要部分一起

协调工作。

These are the Navigation graph, the NavHostFragment,

这些是导航图，NavHostFragment

and the NavController.

和 NavController。

The Navigation graph is a new resource type.

导航图是一种新的资源类型。

It's an XML file that contains and centralizes information

它是一个XML文件，包含并集中了

related to navigation.

与导航相关的信息。

Now this information can be visualized

现在，可以在安卓工作室3.3中

in the new Navigation editor that is available in Android

提供的新导航编辑器中

显示此信息。

It's a graphical editor to create this,

它是一个图形编辑器来创建

well, Navigation graph.

这个导航图。

Each of these screens are called destinations,

每一个屏幕都被称为目的地，

or places that you can navigate to.

或者你可以导航到的地方。

In this example, they're all fragments.

在这个例子中，它们都是片段。

Now these arrows here are called actions

这些箭头被称为操作，

and they represent the different paths

它们代表用户可以通过

that a user could take through your app.

你的应用程序获取的不同路径。

If you click on one of the actions,

如果单击其中一个操作，

you can see a whole bunch of embedded information,

则可以看到一大堆嵌入的信息，

including data passed between destinations,

包括目的地之间传递的数据，

transition animations, backstack manipulation, and so on.

动画过渡，反向堆栈操作等。

Clicking on a destination, you can see things like deep link

点击目的地，你可以看到深层链接网址

URLs and launch options.

和启动选项等内容。

This is all part of the XML of the graph.

这全都是图表的XML的一部分。

OK, so next, we have the NavHostFragment.

好的，接下来，我们有NavHostFragment。

This is a fragment widget that you'll add to your layout,

假设你正在进行片段导航，

assuming that you're doing fragment navigation.

这是一个你将添加到你的布局的片段微件。

It's basically a window that swaps in and out

它基本上是一个

different fragment destinations that are included

可以交换进出导航图中

in your Navigation graph.

包含的不同片段目的地的窗口。

The final piece of the puzzle is the NavController.

最后一个片段是NavController。

Each NavHostFragment has a NavController

每个NavHostFragment 都对应一个NavController

that you'll use in your Kotlin or Java code.

你将在Kotlin或Java代码中使用它。

And this is what actually instructs the navigation

这就是指示导航发生

So if I write some code like this,

因此，如果我编写这样的代码，

the NavController will then perform this navigation action

NavController将根据导航图中

based off of all of that information that

的所有信息执行此导航操作，

was in the Navigation graph, and it will ultimately

并最终交换出

swap out which fragment is shown in the NavHost fragment.

NavHost片段中显示的片段。

Now here I'm using the action's XML ID

现在，我正在使用操作的XML ID

to specify which of those action arrows to follow,

来指定要遵循的操作箭头，

but an even better way to do this is using the navigation

但更好的做法是使用

component's SafeArgs plug-in.

导航组件的SafeArgs插件。

The SafeArgs plug-in generates code

SafeArgs插件生成代码，

to allow you to use type-safe navigation

允许你使用类型安全的导航

and argument passing.

和参数传递。

First, you'll add the Gradle plug-in to your code.

首先，你将Gradle插件添加到你的代码中。

This will generate classes based off of your Navigation graph.

这将根据你的导航图生成类。

It'll make these Direction classes

它将为具有操作的任何目的地

for any destination that has actions

创建这些“方向”类，

and it will make Args classes for any destination

并且它将为具有参数的任何目的地

with arguments.

创建“Args”类。

If you take your original navigation statement,

如果你使用原始导航语句，

you can swap in these generated classes

则可以交换这些被生成的类，

and you'll get something that looks like this.

并且你将获得如下所示的内容。

Instead of referring to an action by its XML ID,

你应该确保你拥有

you're making sure that you have an action that's

与目的地关联的操作，

actually associated with your destination.

而不必通过其XML ID参考一个操作。

You can also set arguments of the action.

你还可以设置操作的参数。

Pass in the wrong type and the code won't compile.

传递错误的类型的话，代码就无法编译。

Getting the arguments you passed through is easy.

获得你传递的参数很容易。

Simply use the GeneratedArgs class

只需使用GeneratedArgs类，

and you have type-safe access to only

你就可以只有被正确命名的参数

the correctly-named arguments.

的类型安全访问。

No need to worry about the key value pairs of yesteryear.

无需担心过去的关键值对。

So that was simple navigation.

这就是简单的导航。

Let's talk about setting up that bottom nav.

我们来谈谈设置底部导航。

The navigation component includes

导航组件包括

an additional navigation UI library in Java and KTX

Java中的附加导航UI库

extensions for Kotlin, that have support

和Kotlin的KTX扩展，

for options menus, bottom navigation, navigation

它们支持选项菜单，底部导航，

view, and navigation drawer.

导航视图和导航抽屉。

It also works with action bar, toolbar,

它还适用于操作栏，工具栏

and collapsing toolbar.

和折叠工具栏。

For our bottom nav, you'd cut the bottom nav

对于我们的底部导航，你可以正常地

to your XML as normal.

将底部导航切换到XML。

You'd also create an XML menu with IDs

你还可以通过

that match the XML IDs of your destinations

与你的目的地XML ID匹配的ID

and your Navigation graph that you want the bottom navigation

和你希望底部导航转到的导航图

创建一个XML菜单。

Then you'd use navigation UI to wire up the rest.

然后，你可以使用导航UI连接其余部分。

In Kotlin, that's done with this handy extension function.

在Kotlin中，可以使用这个方便的扩展功能。

This one line of code has NavController

这一行代码具有NavController，

handle the actual navigation, making

它处理实际的导航，

sure to follow material design best practices as far

确保遵循材料设计的最佳实践，

as backstack management goes.

就反向堆栈管理而言。

On top of that, it handles highlighting

最重要的是，它处理突出显示

the correct bottom buttons.

正确的底部按钮。

Now we have only explored a few parts

现在我们只探讨了

of the navigation component.

导航组件的一些部分。

For a deeper trek into navigation,

要深入了解导航，

check out the code lab and the documentation,

请查看Codelab，以及相关文档，

all linked below.

所有这些都在下方的链接中。

Happy coding and happy navigating.

希望你可以有愉快的编码和导航经验。

Similar videos:

Introducing Android Jetpack
Android Developers
174.3K views 1.5K likes 56 dislikes 08 May 201860% match

Android Jetpack: manage UI navigation with Navigation Controller (Google I/O '18)
Android Developers
65K views 785 likes 13 dislikes 10 May 201822% match

Navigating navigation
Android Developers
19.7K views 548 likes 23 dislikes 23 Jul 202021% match

Navigation: Overview - MAD Skills
Android Developers
23.4K views 595 likes 21 dislikes 12 Oct 202021% match

Navigation: Dialog destinations - MAD Skills
Android Developers
17.1K views 544 likes 14 dislikes 14 Oct 202020% match

Settings Privacy About Contact Donate