Constraint Layout 2.0 介绍

2020-08-31 本文已影响0人 JeffreyWorld

本文为 Sean McQuillan 发布于 Medium 的文章译文
原文链接为 Introducing Constraint Layout 2.0
本文仅作为个人学习记录所用。如有涉及侵权，请相关人士尽快联系译文作者。

Constraint Layout 是最受欢迎的 jetpack 库之一，我们很高兴地分享 Constraint Layout 2.0的发布！它具有您熟悉的 Constraint Layout 1.1的所有功能，可快速构建复杂的布局，并与 Android Studio 集成了工具来预览 XML 甚至编辑布局。

Constraint Layout 2.0为 Constraint Layout 带来了几个新功能。要使用它，请在 build.gradle 中修改版本。
implementation “androidx.constraintlayout:constraintlayout:2.0.1”
在2.0版本中，我们还为 Constraint Layout 创建了一个 github 存储库。当前是只读存储库，我们正在准备去开启 pull requests。

Flow

Flow 是用于构建链的新虚拟布局，当链用完时可以缠绕到下一行甚至屏幕的另一部分。当您在一个链中布置多个项目时，这很有用，但是您不确定容器在运行时的大小。您可以使用它来根据应用程序中的动态尺寸（例如旋转时的屏幕宽度）构建布局。

动画显示Flow创建了多个链作为元素过量填充一行

Flow 是虚拟布局。约束布局中的虚拟布局是参与约束和布局的虚拟视图组，但不将层次添加到层次结构中。而是，它们在“约束布局”中引用其他视图以完成布局。

Visualization of flow modes "none", "chain", "align"

您可以使用 Flow 标签在 Constraint Layout 2.0中添加 Flow。 Flow 将围绕您在 constraint_referenced_ids 中传递的视图创建一个虚拟视图组，并将参考视图按链排列。

<androidx.constraintlayout.helper.widget.Flow
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintTop_toTopOf="parent"
   app:flow_wrapMode="chain"
   app:constraint_referenced_ids="card1, card2, card3"
   />

Flow 最重要的选项之一是 wrapMode，它允许您配置内容溢出（或换行）时的处理方式。
您可以为 wrapMode 指定三个选项：

none：创建单个链，如果内容不合适，则溢出
chain：溢出时，为溢出元素添加另一个链
align：类似于链，但将行对齐为列

要了解有关 Flow 的更多信息，请阅读官方文档。

Layer

新的助手：Layer，可以让你从多个视图创建虚拟图层。与 Flow 不同，它不会展示视图。取而代之的是，Layer 使你可以一次将变换应用于多个视图。
如果要构建动画以一起旋转，平移或缩放多个视图，这将很有用。

使用图层，一起将变换，应用于多个视图

图层在布局期间会调整大小，并将根据其引用的所有视图进行调整。
要在 Constraint Layout 2.0 中添加图层，请使用 Layer 标签：

<androidx.constraintlayout.helper.widget.Layer
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:constraint_referenced_ids="card1, card2, card3"
   />

Motion Layout

新的MotionLayout的集成示例
集成示例代码在 Github 仓库。
MotionLayout 是 ConstraintLayout 2.0中最令人期待的功能之一。它提供了一个丰富的动画系统来协调多个视图的动画。 MotionLayout 基于 ConstraintLayout 并对其进行扩展，以允许您在多组约束（或ConstraintSets）之间进行动画处理。您可以自定义视图如何移动，滚动，缩放，旋转，淡化甚至设置自定义属性动画。它还可以处理基于物理的手势并控制动画的速度。使用 MotionLayout 构建的动画是可搜索且可逆的。这意味着您可以跳到动画中的任何点，甚至可以向后播放。
动作编辑器集成在 Android Studio 中，可让您使用 MotionLayout 生成，预览和编辑动画。在协调多个视图时，可以轻松调整动画的精细细节。
了解有关运动编辑器的更多信息，请阅读 Scott Swarthout 的博客文章。
通过动手指南学习 MotionLayout，请查看运动布局代码实验室。
Motion Layout 是一种通用的动画工具。你可以使用它在 Android 上构建几乎所有动画。但是，在两种情况下，与其他选项相比，Motion Layout 在构建动画方面更胜一筹。

Seekable animations —— 由其他输入驱动的动画，例如响应滚动的折叠工具栏
State transitions（状态转换） —— 由状态更改驱动的动画，例如用户进入屏幕

新的Motion Layout Integrations示例展示了如何使用Motion Layout为这些用例构建丰富的动画。每个屏幕都旨在展示您可以使用Motion Layout构建的实用动画效果，以及如何与其他视图建立集成。

Constraint Layout 2.0有很多新功能。查看文档，代码实验室和示例，以开始在您的应用中使用它。

We can’t wait to see what you build!(我们迫不及待的想看看你，用 Motion Layout 去创造一些东西！)

Constraint Layout 2.0 介绍

Flow

Layer

Motion Layout

猜你喜欢

热点阅读