Jetpack Compose Android Developers English Chinese (Simplified)

Jetpack ComposeYouTube↗ IA↗(long shot)
Science & Technology 33.2K views 995 likes 17 dislikes 10 Jun 2020

Android Developers 1.4M subscribers N/A YouTube↗

Click to Play Video

Hi, my name is Romain Guy and I work on the Android Toolkit team

嗨，我叫Romain Guy 我在Android Toolkit团队工作

and today I would like to tell you about Jetpack Compose.

今天我想向您介绍Jetpack Compose

So if you haven't heard about it,

如果您还没有听说过它, 那么

Jetpack Compose is our next generation UI Toolkit, written entirely in Kotlin

Jetpack Compose就是我们全部用Kotlin编写的下一代UI工具包

to build high quality applications for Android easily and quickly.

它可以轻松、快速地为Android 构建高质量的应用程序

But the best way for you to understand what Jetpack Compose is

但是，了解一下Jetpack Compose 到底有些什么

and why it's different from the existing UI Toolkit

或为什么它与现有的UI Toolkit不同的最好方法

is to look at a little bit of code.

就是看一点代码

So we'll start with this.

因此，我们将从这里开始

It's a function, it has a single annotation

它就是一个函数

called <i>@Composable</i> and that's pretty much all you need to create a new widget, what we call <i>composables</i>

只有一个称为<i>@Composable</i> 的单个注释这几乎是创建新的小部件所需的全部

in the Compose world.

在Compose世界中我们称之为<i> composables</i>

You don't have to extend a class,

您不必扩展一个类

you don't have to overwrite constructors or methods.

也不必改写构造器或方法

You create a function or method and that's it.

您只需要创建一个函数或方法，仅此而已

It can be private, public, whatever you want,

它可以是私有的、公共的，任何您想要的

it's just a function.

它都只是一个函数

So then to actually generate the UI from that,

因此，要从函数中实际生成UI

you're going to take some input.

您将需要一些输入

So in my example, I want to produce a label for a product.

举个例子，我想为一个产品制作标签

So I take my product as a parameter of the function, once again, very simple,

因此，我再次将我的产品作为函数的参数再次强调，非常简单

just a function.

它只是一个函数

And from then on, I can do what we call "emit the UI."

那么，我可以执行我们所谓的 “发出该用户界面”

So I'm going to invoke another composable function,

因此，我将调用另一个可组合函数

this one is one of the default composable functions

这是Jetpack Compose的一部分

that are part of Jetpack Compose, it's called <i>Text</i>.

是默认的、可编写函数之一，称为<i>Text</i>

It just creates a label onscreen.

它仅是在屏幕上创建标签

And the text contains a string that's built from my product.

该文本包含从我的产品构建的字符串

One thing that's interesting to notice is that composable functions can only be invoked from composable functions.

有趣的是，可编写函数只能从可编写函数中调用

So in that sense, they're like suspend functions if you're familiar with coroutines.

因此从某种意义上讲，如果您熟悉编码它们就像是暂停函数。

<i>@Composable</i> changes the type of the function,

<i>@Composable</i> 更改函数的类型

and you can only call them in the right context.

您只能用正确的文本进行编码

One way to think about it is that your composables

您可以把可编写对象

are just functions that take data and transform it into your UI,

想成只是获取数据并将其转换为UI的函数

so your UI is a function of the data.

因此您的UI是该数据的一个函数

And that's what we want with this function paradigm,

这就是我们希望使用此函数范例的目的

not only because it's simpler to write the code,

不仅因为它更容易编写代码

it's simpler to refactor, it's also very easy to reason about.

而且更易于重构并且推理起来也非常容易

So we really want the data to flow down from your business logic down to the functions.

因此，我们真的希望数据流向您的业务逻辑、流向函数

What's powerful about choosing Kotlin to write your UI this way

选择使用Kotlin 以这种方式编写UI的强大之处在于

is that you have access to all the features of the Kotlin language.

您可以访问Kotlin语言的所有功能

So let's say, for instance, that we want to only display our label when the quantity of the product is greater than 0.

例如，假设我们只想在产品数量大于0时才展示我们的标签

We don't have to tell Compose how to do this.

我们不必告诉Compose如何执行此操作

We don't have to do things like, okay, let's find this label,

我们不必做类似的事情-- 让我们找到这个标签

if it's visible, let's make it invisible.

如果它可见，我们就使其不可见

If it's not visible, let's make it visible and so on.

如果不可见，我们就使其可见依此类推

Instead, we just tell Compose what we want

相反，我们只需告诉Compose 我们想要什么

and you can see the code on screen, super simple.

您便可以在屏幕上看到代码，非常简单

I just say, "Okay, if the quantity is greater than 0, there's a label.

我只需说：“好，如果数量大于0 则有一个标签。

Otherwise, there's nothing."

否则，就什么也没有。”

And Compose will take care of everything else.

如此，Compose会处理其他所有事宜

And whenever the value of the product changes,

每当产品的价值发生变化时

Compose will re-invoke my composable, we call that "recomposition,"

Compose都会重新调用我的可编写对象我们将其称为“重新组合”

and will reevaluate that logic and will take care of updating the Tree as needed.

并将重新评估该逻辑并会根据需要更新Tree

So you don't have to worry about removing and hiding the items.

因此，您不必担心项目的删除和隐藏

Compose does everything for you.

Compose为您做了所有的一切

And of course this works in complex situations.

当然，这适用于复杂的情况

Let's say here I have a <i>for</i> loop to create a column of labels.

假设在这里我有一个<i>“for”</i>循环来创建一个标签列

If the quantity updates for the product, the number of emitted items will change

如果产品的数量有所更新则发出的项目数将发生变化

but I don't have to do anything.

但我无需执行任何操作。

Compose takes care of all of it for me.

Compose会为我完成所有工作

Alright, one thing-- one other thing I want to talk about is state.

好吧，我想谈的另一件事是状态

So most of the time you want to operate only on input parameters and hopefully, immutable parameters to your function but sometimes

在大多数情况下，对于您的函数您只希望使用输入参数或不可变的参数进行操作

you want a bit of state.

但有时您需要一些状态

So here, I have a list of products and I want the user

因此，在这里，我有一个产品列表

to be able to filter their list based on something they type on the query.

我希望用户能够根据他们在查询中键入的内容过滤他们的列表

So to do this, I start by creating a state.

为此，我首先创建一个状态

This is just a string and I can use this convenient function called state,

这只是一个字符串我可以使用这个称为状态的方便函数

and I can use it as a delegate.

也可以将其用作代表

So it creates a state object that Compose will remember.

因此，它将创建一个 Compose会记住的状态对象

We say that Compose memorizes it.

我们说Compose会记住它

Then I can create a <i>TextField</i>.

然后，我可以创建一个<i>TextField</i>

I can give the filter string as the initial value to display inside the <i>TextField</i>.

我可以将过滤器字符串作为初始值提供给<i>TextField</i>内部的[听不清]

And the <i>TextField</i> can also call a lambda whenever the user enters something inside it.

每当用户在其中输入内容时该<i>TextField</i>也可以调用一个<i>lambda</i>

So in that case, I supply a lambda to <i>onValueChange</i>

因此，在这种情况下我向<i>onValueChange</i>提供了一个<i>lambda</i>

and inside the lambda I will update the state.

并且我会在<i>lambda</i>内部更新状况

So whenever the user types something, my lambda is invoked,

因此，每当用户键入内容时我的<i>lambda</i>都会被调用

I update the filter,

我将更新过滤器

and Compose will trigger a recomposition which will update the displayed value inside the <i>TextField</i>.

而Compose将触发重新组合这将更新<i>TextField</i>内部的显示值

And then using that filter, I can go through the list of products

然后使用该过滤器，我可以浏览产品列表

and just display the ones that match the query.

并仅显示与查询匹配的查询

So once again, when the user types something into the <i>TextField</i>,

因此，当用户再次在<i>TextField</i>中键入内容时

a recomposition will happen and my loop will automatically re-execute.

将发生重新组合并且我的循环将自动重新执行

And that's all you have to do.

这就是您要做的全部操作

Again, no callbacks, no clean up, no setup, no listeners, nothing.

同样，没有回调，没有清理没有设置，没有侦听器，不需要任何东西

You just describe what you want the UI to be,

您只描述您希望UI是什么

not how you want it to update.

而不是您希望它如何更新

Alright, so here's how Tech Compose works.

好，这就是Text Composer的运作方式

So there are two parts to Compose, first on the development host where you write your code.

因此，组成Compose的过程分为两部分首先是在编写代码的开发主机上

It starts with the Kotlin Compiler.

它从Kotlin编译器开始

We use a lot of features of Kotlin, for instance, trailing lambdas,

我们使用Kotlin的许多功能例如<i>尾随lambda</i>

you may have noticed them operating the examples.

您可能已经注意到它们在示例中的操作

And even though we use an annotation, we don't use an annotation processor.

虽然我们使用一个注释但我们不使用注释处理器

Compose uses a Compiler Plugin.

Composer使用一个Compiler Plugin

So it works at the typing front system, at the type system level

它在打字的前端系统在类型系统级别

and also the code generation level to do its magic.

以及代码生成级别上发挥作用

And then finally we have Android Studio that you all know and love

最后，我们有了大家都熟悉和喜爱的Android Studio

and we have some Compose-specific tools inside of Android Studio.

并且在Android Studio中有一些特定于Compose的工具

Now on your device, we have the Compose Runtime.

现在，在您的设备上我们有了Compose Runtime

At its core, Compose doesn't know anything about Android or UIs.

本质上，Compose对Android 或UI一无所知

It just works on Trees so we could actually emit other things

它仅适用于Trees 因此我们可以通过Compose

than UIs with Compose.

发出UI之外的其他内容

And then on top we have the Compose UI Core.

然后顶部是Compose UI Core

That's your input management, measurement, drawing, layout.

这就是您的输入管理、测量、工程图、布局

Then we have the foundation that's your standard layouts, like rows and columns and default interactions.

然后，我们就有了基础即诸如行和列以及默认交互的标准布局

And finally, we have Material Design components.

最后，我们有Material Design组件

So we have an implementation of the Material Design system

因此，我们已经实现了 Material Design系统

so if you choose Material Design in your application,

因此，如果您在应用程序中选择Material Design

everything that you need from Material Design will be available out of the box with Compose.

则Compose可以开箱即用它有您从Material Design所需的一切

So let's take a look back at Compose so far.

现在，让我们回顾一下Compose

We announced it a year ago at I/O '19.

我们在一年前在IO/19上宣布了它

We also then moved all the development into AOSP.

然后，我们还将所有开发内容移至AOSP

Now all the development is in the open, you can follow along

现在所有开发都处于公开状态，您可以继续跟进

and you can even contribute if you want.

如何您想要的话甚至可以做出贡献

But it was only the source code.

但这只是源代码

If you wanted to play with Compose,

如果您想尝试使用Compose

you had to build Compose yourself because we are not quite ready for prime time yet.

则必须自己构建Compose 因为我们还没有唾手可得的黄金时代

A few months later, at Android Dev Summit we announced the Developer Preview 1 of Jetpack Compose.

几个月后，在Android Dev Summit上我们宣布了Jetpack Compose 的Developer Preview 1

You could download the latest version of Android Studio

您可以下载最新版本的Android Studio

and you could easily create new projects and start leaving us feedback.

并且可以轻松创建新项目并开始向我们提供反馈

And since then many of you have done so and we've made major changes to Compose

从那时起，许多人都提供了反馈而我们也对Compose进行了重大更改

and we think that it's better than it's ever been.

我们认为它比以往任何时候都更好

So please keep that feedback coming.

因此，请继续给予反馈

So today, we are launching Developer Preview 2

因此，今天我们启动了 Developer Preview 2

and that's available right now on <i>developer.android.com.</i>

并且现在可以在<i> developer.android.com</i>上使用

So please give it a try once again.

因此，请您尽管去使用它

And if you haven't done so, you will be able to look at tutorials

而且，如果您尚未尝试

to learn Compose.

则可以阅读教程来学习Compose

Now what's interesting is what happened between Developer Preview 1

有趣的是Developer Preview 1 和Developer Preview 2之间发生了什么

and Developer Preview 2. We started doing biweekly releases, so I believe we've done 12 or 13 releases since then that some of you have decided to use and we want to thank you for your patience

我们开始了每两周一次的发布从那以后应该已经有12到13个发布其中有些人决定使用它们因此，我们想感谢您的耐心等待

because we've made major API changes and you had to do a lot of refactorings

因为我们作出了重大的API更改并且您必须在您的测试应用程序中进行多项重构

in your test applications. But that gives us the ability to quickly iterate on the feedback

但是，这使我们能够快速迭代您提供给我们的反馈，

you are giving us and once again, Compose is that much better

因此Compose会因而变得更好

because of it. So today, I would like to take a look at some of the things we've done

因此，今天，我想看看过去几个月中我们所做的一些事情

over the past few months and also address some of the questions that many of you have asked us when we first announced Compose.

并回答一些人在我们首次宣布Compose时向我们提出的一些问题

If you watched the Android 11 Launch Keynote this morning,

如果您观看了今天上午的 Android Dev Launch Keynote

you've already seen a demo where we presented some of the tools that we have for Jetpack Compose.

那么您已经看到了Jetpack Compose 我们有的一些工具的演示

If you haven't, you should watch that video.

如果还没有，则应该观看该视频

But if not, here's a quick summary in one screenshot.

或者，这里是一个快速摘要的屏幕快照

So in this screenshot, you can see the embedded emulator on the left,

因此，在此屏幕截图中您可以在左侧看到嵌入式的仿真器

it helps you run your app side by side with your code.

它有助于与代码并行运行您的应用程序

On the right, you can see a preview for Jetpack Compose composable functions.

在右侧，您可以看到Jetpack Compose 可编写函数的预览

So as you make tweaks to your code, you can see the updates

因此，当您对代码进行调整时您可以实时查看小部件的更新

in real time to your widgets without having to rerun the app

而不必每次都重新运行该应用程序

every single time. The preview can also be interactive so you can even test the logic

预览也可以是交互式的

of your widget without running the app.

因此您甚至可以在不运行应用程序的情况下测试您的小部件的逻辑

Finally, those previews are available in the inline documentation,

最后，这些预览可在Documentation中找到

you can see that in the pop-up.

您可以在弹出窗口中查看

So when you do code completion, for instance, you can see what the widgets, the composables look like.

因此，例如，当您在进行代码自动完成您可以看到小部件，可组合对象的外观

And we have many more ideas of what we want to do for the tools.

而且，我们对如何利用这些工具还有很多想法

So stay tuned, the teams are hard at work

因此，请继续关注那些正在努力工作的团队

so there is a lot more coming in the future.

因此未来还会有更多更新

Alright, so first I want to talk about Modifiers.

好，首先我想谈谈关于Modifiers

So when we first launched Developer Preview 1

当我们首次启动Developer Preview时

[inaudible] modifiers were present,

是有[音频不清晰]修饰符的

but they were not used that much.

他们没有被太多地使用

And also they were a bit confusing because what you could do with modifiers

而且它们有点令人困惑因为您可以使用修饰符来处理的事情

you could also do with regular composables.

常规可组合对象也可做到

For instance, padding used to be a composable.

例如，填充曾经是可组合的

But we figured that using padding for instance as a composable

但是我们发现，例如使用填充作为可组合对象

was creating too much nesting.

会产生过多的嵌套

So now we've moved a lot of features to Modifiers.

因此，现在我们将许多功能移至了修饰符

Modifiers decorate a single element.

修饰符装饰单个元素

And those decorations can be layout parameters,

这些装饰可以是布局参数

metadata or additional behaviors.

元数据或其他行为

But the best way to understand modifiers is to look at an example.

但是了解修饰符的最好方法是来看看一个例子

So here, I have an image.

这里，我有一张图片

You can see at the top that I've created a state.

您可以在平板电脑上看到我已创建了一个声明

It's a simple circular shape and you can see I'm using

这是一个简单的圆形

a slightly different variant of the state function

您可以看到我正在使用与刚刚看到的声明函数稍微不同的变体

that we already saw. It uses destructuring assignment to get not only the value

正是这种解构赋值不仅可以获取值

but also a lambda that we can use to modify the value,

还可以获取用来修改值的<i>lambda</i>

and you will see why in a little bit.

您将很快了解其原因

So first, I use an image composable to display my image resource.

首先，我使用可组合的图像来显示我的图像资源

And then I have a single modifier called <i>size</i>, it sets the width and the height

然后，我有一个称为”尺寸“的单个修饰符它设置宽度和高度

and you can see on the right what the image looks like with its fixed dimensions.

您可以在右侧看到它固定尺寸的测量结果

Then we can add a second modifier, <i>padding.</i>

然后，我们可以添加第二个修饰符即<i>填充</i>

Now the image is in set within the bounds of the image composable.

现在，图像已设置在可组合图像的范围内

Then we can add a <i>drawShadow</i> modifier.

然后，我们可以添加<i>drawShadow</i>修饰符

So the <i>drawShadow</i> modifier is interesting

<i>drawShadow</i>修饰符很有趣

because it is made itself of multiple modifiers

因为它本身已由多个修饰符组成

and you can see it clips the image.

而且您可以看到它裁剪了该图像

So here I'm using my circle shape from my state at the top

因此，在这里，我从顶部的声明开始使用圆形

to not only draw a circular shadow but also to clip the content of the image

不仅要绘制圆形阴影还要将图像的内容裁剪到圆形上

to the circle. Then I can use <i>drawBorder</i> to draw a circular border

然后，我可以使用<i>drawBorder</i> 绘制圆形边框

so I still use the same shape.

因此我仍然使用相同的形状

I use one of the colors from my <i>MaterialTheme</i>.

我使用我的<i>MaterialTheme</i>中的一种颜色

But also I can stack multiple modifiers of the same type so I can add a second border or even a third border.

但是我也可以堆叠多个相同类型的修饰符以便可以添加第二个，甚至第三个边框

And already you can see that adds something

您已经可以看到它添加了一些更加有趣的东西

that's much more interesting. We started with this very simple rectangular image.

我们从这非常简单的矩形图像开始的

Now we have a shadow, we have circular clipping,

现在我们有了阴影，有了圆形裁剪

and we have multiple borders.

并且有多个边框

I can also make the composable interactive so here I use a <i>ripple</i>,

我还可以使可组合变为交互式的因此在这里我使用了涟漪图

a Material Design ripple.

一个Material Design涟漪图

So every time the user taps on the image, I will automatically get

因此，每次用户点击图像时我都会自动获得漂亮的涟漪效果

the nice ripple effect, the animation will be handled for me. and it's just a one line modifier.

动画将由我来处理而且它只是一个单行修饰符

I also use a clickable modifier to add interaction to my image.

我还使用可点击的修饰符将交互添加到图像中

So in this case, I call my set shape lambda that was given to me

因此，在这种情况下，我将调用由声明函数提供给我的设定形状<i>lambda</i>

by the state function to toggle back and forth between the original circle shape and this new cut-corner shape.

以在原本的圆形和这新的切角形状之间来回切换

So now, just using modifiers, I started from an image, a static image,

因此，仅使用修饰符我从图像，一个静态图像开始

and now I have this visually complex interactive piece of UI.

而现在我有了这个视觉上复杂的交互式用户界面

And that was super easy to do.

而且非常容易就能做到

Alright, one of the things that a lot of you have asked us about when we first announced Compose was what about Recycle View

好吧，当我们第一次宣布Compose时很多人问我们的一件事是Recycle View呢

or you know, for folks like me who started a long time ago,

或者对于像我这样早就入行的人来说

what about List View?

List View呢？

You called out rightly so that all of our examples

您说得正确因为我们所有的示例

were built without using one of the fundamental elements

都没有使用我们每天在手机上

of Android applications that we use everyday on our phones

使用的Android应用程序的基本元素之一

and that's this kind of Recycle List.

也就是这种的Recycle List来构建

You can see on the screen I have my demo where in my app, my shopping cart

您可以在屏幕上看到我的演示在我的应用程序里，我的购物车

is made of multiple items and I can scroll through them

是由多个项目组成的因此我可以滚动查看它们

and have this recycling list of items.

而且我有这个回收列表

We start with a composable function.

我们从<i>Composable</i>函数开始

You need to take a list as an input.

您需要将一个列表作为输入

In my case, I could take a simple Kotlin list

在我的示例里我可以选择一个简单的Kotlin列表

or a mutable list but I'm using LiveData.

或一个可变列表但我使用的是LiveData

We also provide support for RXJava and Flow.

我们还提供对RXJava和Flow的支持

So when you use LiveData or RXJava or Flow,

因此，当您使用LiveData 或RXJava或Flow时

you need to observe the data stream as a Compose state.

需要将数据流视为Compose状态

When we pull the extension function called <i>observeAsState</i>,

当我们展开名为<i>observeAsState</i> 的扩展功能时

you can see it in action here.

您可以在此处看到它的运行情况

I can call <i>observeAsState</i>, I give back a state object,

我可以调用<i>observeAsState</i> 然后给回一个在这里称为产品的声明对象

here called products and I can pass the state to my <i>AdapterList</i>, that's the name of the recycle view in compose.

然后可以将声明传递给我的<i>AdapterList</i> 这就是组合中回收视图的名称

And then using a trailing lambda, every time that the <i>AdapterList</i>

然后使用尾随<i>lambda</i>

needs a new item or to replace an item,

每当<i>AdapterList</i>需要一个新项目或替换一个项目时

I can just describe the UI I want to emit.

我都可以只是描述我要发出的UI

So in my case, I will create a shopping cart item based on the product that I received as an input.

那么，在我的示例中，我将根据收到的产品作为输入而创建一个购物车项目

And inside I want a 3D model viewer for the nice 3D animations.

在内部，我需要一个3D模型浏览器来展示漂亮的3D动画

And that's it, you don't need to write an adapter,

这样就好了，您无需编写一个适配器

you don't need to do anything more than that.

无需执行任何其他操作

As soon as the LiveData object changes,

一旦LiveData对象更改

if the number of items in your list increases or decreases,

如果列表中项目的数量增加或减少

or the value of any of the items changes we will automatically

或者任何项目的值更改我们将自动重新组合所有内容

recompose everything, re-invoke your trailing lambda for the <i>AdapterList</i>, and the UI will update.

为AdapterList重新调用尾随<i>lambda</i> 而UI将会更新

It's not more complicated than this.

不会比这更复杂了

ConstraintLayout is one of our most powerful

ConstraintLayout是我们功能最强大

and most popular layouts and that was one of the main questions

最受欢迎的布局之一这也是我们被问到的主要问题之一

we got, again, when we announced the Developer Preview 1

再次，当我们在IO宣布 Developer Preview 1和Compose时

and Compose at IO, you wanted to know what about ConstraintLayout,

您想知道那么ConstraintLayout呢

how will this work in Compose?

它将怎样在Compose中运作？

And that's actually a very good question.

这实际上是一个很好的问题

It stems from the fact that in Compose, because we use functions,

它源于以下事实：在Compose中，因为我们使用函数

you can't grab a reference to view, so how do you describe constraints

所以您无法获取要查看的引用那么您如何描述不同元素之间的约束？

between different elements? So I'm going to show you how to use ConstraintLayout with Compose.

我将向您展示如何在Compose中使用ConstraintLayout

Now we're going to use this small example in the bottom right.

现在，我们将使用在右下角的这个小例子

That row at the bottom has a couple of buttons,

底部的那一行有几个按钮

it's decrease and increase buttons.

分别是减少和增加的按钮

Then we have some text, we have a little color swatch

然后我们有一些文本有一个小色板

and we have another label.

还有另一个标签

So let's take a look at how it works.

那么，让我们看一下它是如何运作的

So first in <i>@Composable</i>, we create a ConstraintLayout

那么，首先在<i>@Composable</i>中我们创建一个ConstraintLayout

and that ConstraintLayout needs a <i>ConstraintSet</i>.

并且该ConstraintLayout 需要一个<i>ConstraintSet</i>

Those used to be defined an XML or in code

那些曾经被定义为XML或代码

but now they are entirely in code.

但是现在它们全部都在代码中

But because it's an object, you can of course make that a constant,

但是因为它是一个对象您当然可以使它成为一个<i>约束</i>

you can pass it around, you can do whatever it is you want.

可以将其传递开来您可以做任何您想做的事情

Here, we're going to create it inline.

在这里，我们将它创建在一条线上

So to create a new <i>constraint</i>, use this <i>tag function</i>.

因此，要创建新的<i>约束</i> 请使用此<i>标记函数</i>

You give it a tag, the tag can be anything you want,

您给它一个标签该标签可以是您想要的任何东西

it could be a string.

它可以是一个字符串

In that case, just a regular Kotlin object.

在这种情况下只有一个普通的Kotlin对象

And in that tag, we can declare the constraints themselves.

在该标签中我们可以自己声明该约束

So in this example, for the first button, the decrease button on the left,

因此，在此示例中，第一个按钮即左侧的递减按钮

I want to constrain the left edge to the left edge of the <i>parent</i>

我想将左边缘约束到<i>父级</i>的左边缘

and I also want to center it vertically.

并且我也想将它垂直居中

And then all that's left to do is emit the button, itself,

然后剩下要做的就是发出按钮本身

and to be able to map it to the constraint we just created,

并能够将其映射到我们刚刚创建的约束

we use a tag modifier.

我们使用标签修饰符

So we just assign a tag to the composable and ConstraintLayout will do the rest.

因此，我们只需将标签分配给可组合对象然后ConstraintLayout将完成其余的工作

Now because tag returns a constraint as an object, we can use that as a reference in other constraints.

由于标签返回一个约束作为对象因此我们可以将其用作其他约束中的引用

So for the next button that goes to the right of our first button, we create a new tag.

因此，对于位于第一个按钮右侧的下一个按钮，我们将创建一个新标签

And for the left constraint, we just use the right edge of the <i>decreaseConstraint</i> that we just created

对于左侧约束，我们就使用刚创建的<i> reduceConstraint</i>的右边缘

and the rest is exactly the same.

其余部分就完全相同

We create our button, we assign a tag and ConstraintLayout will match

我们创建按钮，分配标签

the constraint to the composable.

然后ConstraintLayout 会将约束与可组合对象匹配

What's really powerful about doing all of this from code

使用代码执行所有这些操作的真正强大之处在于

is that you can add a little bit of logic.

您可以添加一些逻辑

So if we fast forward a little bit, I've added the labels

因此，如果我们快进一点我添加了标签

and I have this little color swatch, that little red dot that you see at the bottom.

和这个小色板，您在底部看到的小红点

That red swatch is not visible in every item of my list.

该红色小色板不一定能在我的列表的每个项目中看见

It only appears on some items.

它仅出现在某些项目上

So then how do I align the last label to the right of that swatch

那么，如何将最后一个标签与该样本的右边对齐？

if that swatch is not always there?

该色板并不总是存在

So this is how you do it.

这就是您应该操作的方式

I create a new <i>Constraints</i> and for the left edge,

我创建一个新的<i>约束</i>，对于左边缘

I set <i>constrainTo</i> and here I can enter a complex expression.

我设置了<i>constrainTo</i> 且在这里我可以输入一个复杂的表达式

So here I say, "Okay, if I have a swatch, I want it to be constrained to the constraint of that swatch."

在这里我说：“如果我有一个色板我希望它受制于该色板的约束。”

Otherwise, I want to use the constraint of the label that came before.

否则，我想使用之前出现的标签的约束

So this is much more convenient than doing the equivalent using both XML and code.

因此，这比使用XML和代码编写代码要方便得多

Another thing a lot of you have asked about is Animations.

很多人问的另一件事是Animations

So I want to show you how animations work with Jetpack Compose.

因此，我想向您展示 Jetpack Compose动画的运作原理

On the screen right now, you can see some of animations I have built into my demo.

现在，在屏幕上您可以看到我加入演示中的一些动画

Whenever the user selects one of the items in the shopping cart,

例如，每当用户选择购物车中的一物品

for instance, to select multiple of them to be able to delete them quickly,

例如，选择多个物品以便能够快速将其删除

I animate the radius of the different corners,

我便会为不同角的半径设置动画效果

I animate an overlay on top of the item and I animate a little check mark.

为该物品顶部的覆盖层设置动画效果然后为勾号设置动画效果

So let me show you how this works with Compose.

因此，让我向您展示如何使用Compose做到这一点

So first we're going to create state inside our item to track the selected state of the item.

因此，首先我们将在项目内部创建状态以跟踪项目的选定状态

So once again, I use the destructuring assignment.

我再次使用解构赋值

So I have selected as my state value and I have <i>onSelected</i> my lamba

因此，我已经选择了我的状态值并且已经<i>onSelected</i>我的<i>lamba</i>

to be able to change and update that value.

来更改和更新该值

Then at the bottom, I could use a <i>Toggleable</i> composable function.

然后在底部，我可以使用<i> Toggleable</i> composable函数

This will just-- it's just a helper to be able to do this selection easily.

这只是为了帮助它能够轻松进行此选择

So I give it the selected state as the value,

因此，我将选定的状态指定为值

and whenever the value changes, I tell it invoke my <i>onSelected</i> lambda.

并且每当值更改时我就告诉它调用我的<i>onSelected lambda</i>

Then, for the ripple effect, that's built in

然后，对于涟漪效应，它是内置的

so I don't have anything to do, just <i>Modifier.ripple</i>.

因此我无须做什么，仅需要<i>Modifier.ripple</i>

Here's where things get interesting.

这是东西变得有趣的地方

To animate the radius of the different corners,

要为不同角的半径设置动画效果

all I have to do is use this <i>animate</i> function.

我要做的就是使用此<i>动画</i>功能

And I pass it a value, and as you can see, that value is itself based

然后我给它传递了一个值，如您所见该值本身就是基于我选择的状态

on my selected state so I say, "If the item is selected, I want a radius of 48 dp for the top left corner.

所以我说：“如果选择了该项目我想在左上角设置一个48dps的半径

Otherwise, I only want 8 dp.

否则，我只想要8dps

So whenever the selected state changes, recomposition will happen,

因此，只要选定的状态发生变化就会发生重新组合

a different value will be passed to the <i>animate</i> function,

将不同的值传递给<i>动画</i>函数

and the <i>animate</i> function will take care of everything else.

<i>动画</i>函数将处理其他所有事情

It will kick off the animation, picking up where you left off,

它将启动动画，从您上次中断的地方开始

it's fully interruptible and it's based on physics.

它完全可中断，并且基于物理学

So then after calling <i>animate</i>, I have another state value

因此，在调用<i>动画</i>之后我有了另一个状态值

that I can then pass to my rounded corner shape.

然后可以将其传递给我的圆角形状

I can just assign those values directly to the different corners,

我可以将这些值直接分配给不同的角

and that's it, you don't have to have listeners and callback,

就是这样，您不一定需要侦听器和回调

there's no set up and there's no clean up to do.

无需设置，也无需做任何清理工作

It's that simple.

就是这么简单

Of course, like I said, by default, we use physics-based animations.

当然，就像我说的在默认情况下我们使用基于物理的动画

We can use twin animations if you prefer and there's a lot of things you can control that I won't show you today.

如果您想要，我们可以使用双动画您可以控制的东西有很多，但我今天就不展示了

This is another example, same concept but this time to animate the <i>alpha</i>.

这是另外有一个例子，相同的概念但是这次是为了启动<i>alpha</i>

So instead of passing the value to the radius of the rounded corner shape, I just pass the <i>alpha</i>

我仅传递了要使用emit函数进行动画处理的<i>alpha</i>

that I'm animating with the animate function.

而没有将值传递到圆角形状的半径

I pass as it as a color of the surface.

我将它传递为表面的颜色

Alright, next up is Interop.

好，接下来是Interop

You can see here in the demo that I have this list of items

您可以在演示中看到我拥有该项目的列表

and in every item, there is a surface view to be able to render this complex 3D scene.

并且在每个项目中都有一个可以渲染此复杂3D场景的表面视图

They are also fully reactive.

它们也是完全响应式的

So whenever I click the swatch in the top item of the list,

因此，每当我单击列表顶部的色板时

you can see that the color of the 3D object

都可以看到3D对象的颜色的实时更新

updates in real time. And this is something that we really care about.

这是我们确确实实关心的事情

We got really inspired by Kotlin.

我们受到了Kotlin的很多启发

Kotlin is great because if you have your existing Java-based application,

Kotlin很棒因为如果您已有基于Java的应用程序

you can start adding Kotlin at your own pace.

则可以按照自己的节奏开始添加Kotlin

You don't have to rewrite the entire application.

您不必重写整个应用程序

And we wanted to do exactly the same for Compose.

我们希望对Compose进行完全相同的操作

When you want to adapt Compose, you can just start adding Compose

当您想修改Compose时您可以开始一点一点地添加Compose

bit by bit, a new screen, a new part of a UI, just however you want to do it,

一个新的屏幕，一个UI的新部分不管您想做什么，它都行得通

it's going to work. So let me show you how to put views inside of Compose.

因此，让我向您展示如何将视图放入Compose中

So we start by creating a new composable function.

因此，我们首先创建一个新的可组合函数

This is my 3D viewer, it takes my product as an input.

这是我的3D查看器，它将我的产品作为输入

Then I have a bit of state,

然后我有一点的状态

not all viewers, just the 3D viewer, itself.

不是所有查看器，只有3D查看器本身

You don't really have to worry about what it is exactly.

您不必担心它的确切来说是什么

What's interesting is at the bottom.

有趣的还在底部

I call this composable<i> AndroidView</i> function.

我称之为可组合的AndroidView函数

And I give it as a parameter,

我将其作为参数

an ID for an XML layout.

一个XML布局的ID

That XML layout contains a surface view.

该XML布局包含一个表面视图

When it's done inflating,<i> AndroidView</i> will invoke

完成充气后<i> AndroidView</i>将调用我的尾随<i>lambda</i>

my trailing lambda, it will give me a reference to the view that was inflated, and I can then cast it as a surface view,

它将为我提供对已充气视图的引用然后可以将其转换为表面视图

and from there, I can create my model viewer

然后从那里我可以创建模型查看器

and tell it render into that surface view.

并命令它渲染进入该表面视图

Of course, to render the 3D animations, I need to be able to refresh the content of the surface view in every frame.

当然，要渲染3D动画我需要能够刷新您可能重新构图的表面内容

So to do this, I can use <i>onActive</i> and <i>onDispose</i>.

因此为达此目的，我可以使用<i>onActive</i> 和<i>onDispose</i>

So <i>onActive</i> is going to be invoked the first time your composable is added to the UI Tree if you want.

因此，<i>onActive</i>将在您的可组合对象首次被添加到你想要的UI Tree时被调用

This is a great place where you can do some set ups

这里是您可以进行一些设置的好地方

or in my case, I'm going to set up a call back for the choreographers

或者在我的情况下我将为choreographer设置回调

so I can get it invoked on every frame every time the screen refreshes.

以便每次刷新屏幕时都可以在每个帧上调用它

Of course when the composable disappears from the tree,

当然，当可组合对象从Tree中消失时

I need to be able to stop that callback so I can use <i>onDispose</i>

我需要能够停止该回调以便可以使用<i>onDispose</i>进行清理

to do my clean up. So when you're part of a recycling list like <i>AdapterList</i>,

因此，当您属于<i>AdapterList</i> 这样的回收列表时

this is really powerful to make sure that you're doing the right thing.

它确实非常强大，可以确保您正在做正确的事情

Now to react to data changes, so when I change the color

现在要对数据更改做出反应因此当我更改产品的颜色时

of the product, I can use <i>onCommit</i>.

我可以使用<i>onCommit</i>

So <i>onCommit</i> takes as a parameter what I want to track.

<i>onCommit</i>将我要跟踪的内容作为参数

So I want to track my product, itself.

所以我想跟踪我的产品本身

And in <i>onCommit</i>, I'm just going to look at the 3D object in the scene

在<i>onCommit</i>中我仅将查看场景中的3D对象

and change its color based on the new value

并根据产品中的新值更改其颜色

from the product. And that's it. It's really simple.

就是这样，真的很简单

If you want to use a map view, a camera view, a surface you like I showed you or any type of view,

如果您要使用地图视图，相机视图如我展示给你的表面视图或任何类型的视图

you can incorporate them in your Compose UI

则可以通过这种方式将它们合并到您的Compose UI中

just in this way. Last but not least, Testing.

最后且很重要的一点是Testing

This was also one of the first questions we got.

这也是我们最先被问到的几个问题之一

So once again, in Compose, because you just invoked functions,

再一次，在Compose中由于您要适应于函数

you can't take a reference to the widgets and we don't have the concept of ID,

因此您无法将引用带到小部件中并且我们没有ID的概念

so you can't do a 'find you by ID.'

因此您无法使用“按ID找到您”

So in our example, how do we test, let's say, those two buttons

因此，在我们的示例中，打个比方

to increase and decrease the quantity of the product in our shopping cart?

我们如何测试增加和减少购物车中产品数量的那两个按钮？

So let's take a look.

让我们看一下

To do this, we use a concept called <i>semantics</i>.

为此，我们使用称为<i>语义</i>的概念

Semantics are a way to add metadata to the tree of composables.

语义是一种将元数据添加到可组合树的方法

This is what we use, for instance, to drive accessibility

例如，这就是我们用来驱动访问能力的方法

but this is also at the core of testing.

但这也是测试的核心

So for instance, here in my example in my shopping cart item,

打个比方，在我的购物车项目示例中

I use the <i>TestTag</i> composable.

我使用<i>TestTag</i>可组合

This creates a semantic node that contains a tag.

这将创建一个包含标签的语义节点

It's a way for me to identify that part of the UI

这是我识别UI某部分的一种方式

and you can see it just contains my button that I want to test.

您可以看到它仅包含我要测试的按钮

So once we have that semantic node, we can move over to the Unit test,

因此，一旦我们有了该语义节点我们就可以转到Unit测试

just a regular <i>@Test</i> function.

只是一个普通的<i>@Test</i>函数

I create some test data, so I have a product,

我创建了一些测试数据我有一个产品

I have the <i>quantity = 2</i>.

I also need to create my logic so this is a lambda

我还需要创建逻辑因此这是一个每次用户单击按钮时

that will simply decrease the quantity by 1 every time the user clicks the button.

数量会逐一减少的一个数据

Then I can set up my Test UI, I just invoke my shopping cart item

然后，我可以设置我的Test UI 只需调用购物车项目

and then give it the data and the lambda I just created.

然后将刚创建的数据和<i>lambda</i> 提供给它

Finally, here's the interesting part.

最后，这就是有趣的部分了

I can use <i>findByTag</i> to find the part of the tree that we just tagged inside our composable.

我可以使用<i>findByTag</i> 查找刚刚在可组合对象中标记的树的部分

And from then on I can do a lot of things.

从那里起，我可以做很多事情

I can query whether or not it's displayed,

我可以查询它是否被显示

I can check its state, I can check a value,

可以检查它的状态，可以检查一个值

or I can perform actions.

或者可以执行操作

So here I perform two clicks, and finally, at the end, I make sure that the quantity is now 0 instead of 2

在这里我单击两次，最后，在结束前要确保在两次单击之后，数量是0，不是2

after two clicks. The best part is Compose is designed with testing in mind

最好的一点是Compose设计时考虑了测试

so all those features come built in.

因此内置了所有这些功能

You don't need something like Espresso, for instance.

例如，您不需要像Espresso这样的东西

This <i>runOnIdleCompose</i> that you see that I use at the bottom

您在底部看到的<i>runOnIdleCompose</i>

is part of the default APIs.

是默认API的一部分

So that's it for today, that's everything we've been up to--

今天就到这里这就是我们今天所做的一切事情

well, of course, there's a lot more-- over the past few months.

当然，在过去的几个月中还有更多

But now I want to look ahead a little bit.

但现在我想向前看看

So we are releasing Developer Preview 2 today,

因此，我们今天将发布Developer Preview 2

and later this summer, we are going to release our Alpha release of Compose.

并且我们将在今年的夏天发布Compose的Alpha版本

For us, Alpha is when you start adopting Compose inside your application.

对于我们来说，Alpha始于您在应用程序中采用Compose的时候

Some features might be missing, we have to catch up with 15 years of development in the existing APIs, after all.

有些功能可能不存在毕竟我们必须赶上现有API 15年的发展

But there should be enough for most applications out there.

但是对于大多数应用程序来说应该足够了

Some of our APIs may still be experimental and there might be a few changes ongoing

我们的某些API可能仍处于试验阶段 Alpha之后可能还会有一些正在进行更改

after Alpha. But we really want to start playing with it

但是我们真的很想开始使用它

and give us all the feedback that you may have

请向我们提供你们的所有反馈

because next year, we want to release Jetpack Compose 1.0.

因为明年我们要发布 Jetpack Compose 1.0

So if you haven't done so already,

因此，如果您还没有给出反馈

please visit<i> developer.android.com/jetpack/compose</i>.

请访问<i> developer.android.com/jetpack/compose</i>

There you can find hwo to download and install the Developer Preview 2

您可以在那里找到如何以最新版本的Android Studio

with the latest version of Android Studio.

下载并安装Developer Preview 2

You will find tutorials, codelabs and so on.

您将找到教程，代码实验室等

You can also read the samples that we put on GitHub.

您还可以阅读我们放在GitHub上的示例

And more importantly, you can come chat with the team on Slack

更重要的是您可以与Slack上的团队进行交谈

so you should join the Compose channel on the Kotlin link Slack.

所以您应该在Kotlin Slack上加入Compose频道

You will be able to talk with various members

您将能够与工程团队的各个成员进行交谈

of the engineering team. This is a place where we gather a lot of your feedback.

这是我们收集大量反馈的地方

This has been immensely helpful to improve Compose

在过去的几个月中这对改进Compose很有帮助

in the past few months and it's so much better than it was

而且它比我们刚开始的时候要好得多

when we started. You'll also be able to chat with the rest of the community

您还可以与社区的其他成员聊天

and everybody's incredibly helpful there.

在社区中的每个人都很愿意提供帮助

If you have future requests or if you find bugs,

如果您将来有任何要求，或者如果您发现错误

as I'm sure you will, please use the Issue Tracker

我确信您会的请确保使用下面列出的问题跟踪器

that's listed here. This is the same Issue Tracker we use so we look at it all the time.

这与我们使用的Issue Tracker相同因此我们常常都会使用它

Finally, if you want to see what's coming,

最后，如果您想了解即将发生的事情

you can look at all the changes that we make daily on AOSP at <i>android-review.googlesource.com</i>.

可以访问<i>android-review.googlesource.com</i> 查看我们每天在AOSP上所做的所有更改

You can just watch everything happening, and if you want, you can even contribute.

您可以观看发生的一切事情如果您想要，您甚至可以做出贡献

So that's pretty much it for today and I would like to thank you,

因此，今天就差不多到这里结束了我要感谢大家

all of you, for all the feedback that you've been giving us.

感谢您一直以来给予我们的所有反馈

But before I let you go, I just wanted to say that I've been working on Android for close to 15 years

但是在让您们走之前我想说我已经在Android工作将近15几年了

and usually I do not use the word "excited" lightly

通常在演讲时我不会轻易使用“ 兴奋”一词

when I give a talk, but frankly, I don't think I've ever been as excited about the future of Android UI

但是实话实说我觉得我不曾对Android UI的未来

as I've pretty much ever been-- well, maybe on my first day on Android--

感到如此兴奋-- 或许在Android上班的第一天吧

so I'm really looking forward to what you're going to do with Compose

我非常期待您将如何使用Compose

so please keep the feedback coming.

所以请继续提出反馈

Similar videos:

Jetpack Compose: Lists
Android Developers
18.8K views 660 likes 9 dislikes 24 Feb 202167% match

Building Jetpack Compose
Android Developers
11.4K views 95 likes 8 dislikes 23 Oct 201967% match

Jetpack Compose: Screencasts
Android Developers
6K views 89 likes 5 dislikes 24 Feb 202167% match

Jetpack Compose: Beta overview
Android Developers
36.2K views 1.1K likes 18 dislikes 24 Feb 202144% match

Thinking in Compose
Android Developers
42.2K views 1.2K likes 29 dislikes 26 Aug 202042% match

Jetpack Compose: Animation
Android Developers
14.9K views 447 likes 12 dislikes 24 Feb 202141% match

Android Jetpack week preview
Android Developers
924K views 202 likes -1 dislikes 19 Jul 202041% match

Jetpack Compose: Testing
Android Developers
7.4K views 171 likes 4 dislikes 24 Feb 202140% match

Jetpack Compose: State
Android Developers
17.7K views 595 likes 12 dislikes 24 Feb 202139% match

Paging with Paging 3
Android Developers
20.7K views 652 likes 24 dislikes 21 Jul 202038% match

Announcing #TheAndroidShow: Jetpack Compose!
Android Developers
254.8K views 402 likes 36 dislikes 18 Feb 202138% match

What's New in Jetpack Compose (Android Dev Summit '19)
Android Developers
45.6K views 728 likes 22 dislikes 23 Oct 201938% match

Jetpack Compose: Accessibility
Android Developers
5.1K views 153 likes 2 dislikes 24 Feb 202138% match

#TheAndroidShow: Jetpack Compose Livestream
Android Developers
69.3K views 1.6K likes 33 dislikes 24 Feb 202138% match

Jetpack Compose: Now in Beta!
Android Developers
8.7K views 115 likes 14 dislikes 24 Feb 202137% match

Now in Android: 35 - Jetpack Compose Beta, Android 12, WorkManager, and more!
Android Developers
10.6K views 311 likes 10 dislikes 04 Mar 202135% match

What's new in Android Jetpack
Android Developers
42.5K views 1.3K likes 27 dislikes 10 Jun 202035% match

Announcing the #AndroidDevChallenge: Jetpack Compose
Android Developers
13.6K views 305 likes 5 dislikes 24 Feb 202135% match

#TheAndroidShow: Jetpack Compose, in 90 seconds!
Android Developers
2.3M views 203 likes -1 dislikes 24 Feb 202134% match

The next step in modern Android development: Jetpack Compose
Android Developers
6.6K views 109 likes 6 dislikes 24 Feb 202133% match

What's new in Compose Design Tools
Android Developers
13.8K views 410 likes 7 dislikes 27 Jul 202033% match

Fireside Q&A with Dave Burke
Android Developers
3.6K views 112 likes 4 dislikes 01 Mar 202129% match

Compose by example
Android Developers
18.6K views 580 likes 11 dislikes 26 Aug 202028% match

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

UI week preview
Android Developers
7.4K views 197 likes 6 dislikes 24 Aug 202028% match

Android 11 Compatibility week preview
Android Developers
694.9K views 163 likes -1 dislikes 05 Jul 202027% match

Assembling your Jetpack - Android Conference Talk
Android Developers
12.5K views 493 likes 9 dislikes 26 Mar 202026% match

State of Kotlin on Android
Android Developers
33.5K views 796 likes 19 dislikes 10 Jun 202026% match

Frictionless subscriptions
Android Developers
2.9K views 61 likes 3 dislikes 10 Aug 202026% match

Compose for existing apps
Android Developers
11.7K views 286 likes 5 dislikes 26 Aug 202026% match

Settings Privacy About Contact Donate