乐趣区

关于android:Constraint-Layout-20-用法详解

jiezi

Constraint Layout 是最受欢迎的 Jetpack 库之一，它的 2.0 正式版本也公布啦 (目前最新版本 2.1.0-alpha1)！兴许您已相熟了 Constraint Layout 1.1 版本中的性能，并开始用它来疾速构建简单的页面布局，而新版本除了蕴含 1.1 版本中的所有性能之外，还在 Android Studio 中集成了能够间接预览 XML 的工具，甚至能够间接在预览界面中对布局进行编辑。

Constraint Layout 2.0 带来了许多对于 Contraint Layout 的新个性，您能够通过在 build.gradle 中更改版本来降级应用。

implementation“androidx.constraintlayout:constraintlayout:2.0.1”

随着 2.0 版本的公布，咱们专门在 github 上创立了 Constraint Layout 的 代码库，但目前该代码库是只读状态，咱们会逐渐凋谢 pull request 的权限。

Flow

Flow 是一种新的虚构布局，它专门用来构建链式排版成果，当呈现空间有余的状况时，它可能主动换行，甚至是主动延展到屏幕的另一区域。当您须要对多个元素进行链式布局，但不确定在运行时布局空间的理论大小是多少，那么 Flow 对您来说就十分有用。您能够应用 Flow 来实现让布局随着利用屏幕尺寸的变动 (比方设施产生旋转后呈现的屏幕宽度变动) 而动静地进行自适应。

图片 : 该动画展现了 Flow 创立多个链将布局元素富余地填充一整行

Flow 是一种虚构布局。在 Constraint Layout 中， 虚构布局 (Virtual layouts) 作为 virtual view group 的角色参加束缚和布局中，然而它们并不会作为视图增加到视图层级构造中，而是仅仅援用其它视图来辅助它们在布局零碎中实现各自的布局性能。

图片 : flow 三种模式 "none", "chain" 和 "align" 的可视化成果

在 Constraint Layout 2.0 中，您能够用 Flow 标签来应用这一性能。Flow 会通过您传递的 constraint_referenced_ids 参数来获取到要援用的所有视图，而后依据这些视图创立一个虚构的 virtual view group，再对这些视图进行链式布局。

<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"
   />

在 Constraint Layout 中应用 Flow 的用例

Flow 中最重要的一个配置选项是 wrapMode，它能够决定在内容溢出 (或呈现换行) 时的布局行为。

您能够对 wrapMode 指定三种模式:

  • none – 所有援用的视图以一条链的形式进行布局，如果内容溢出则溢出内容不可见；
  • chain – 当呈现溢出时，溢出的内容会主动换行，以新的一条链的形式进行布局；
  • align – 同 chain 相似，然而不以行而是以列的形式进行布局。

若您想要理解更多无关 Flow 的内容，请查阅 官网文档。

Layer

Layer 作为一种新的辅助工具，能够让您在多个视图上创立一个虚构的图层 (layer)。同 Flow 不同，它并不会对视图进行布局，而是对多个视图同时进行变换 (transformation) 操作。

如果您想对多个视图整体进行旋转 (rotate)、平移 (translate) 或缩放 (scale) 操作，那么 Layer 将会是最佳的抉择。

图片 : 应用 Layer 对多个视图同时进行变换操作

图层 (layer) 在布局期间会调整大小，其大小会依据其援用的所有视图进行调整。

您能够应用 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"
   />

在 Constraint Layout 中应用 Layer 的示例

Motion Layout

动画 : 集成 Motion Layout 示例 运行后的界面截图

Motion Layout 是 Constraint Layout 2.0 中最令人期待的性能之一。它提供了一个丰盛的动画零碎来协调多个视图之间的动画成果。MotionLayout 基于 ConstraintLayout，并在其之上进行了扩大，容许您在多组束缚 (或者 ConstraintSets) 之间进行动画的解决。您能够对视图的挪动、滚动、缩放、旋转、淡入淡出等一系列动画行为进行自定义，甚至能够定义各个动画自身的自定义属性。它还能够解决手势操作所产生的物理挪动成果，以及管制动画的速度。应用 MotionLayout 构建的动画是可追溯且可逆的，这意味着您能够随便切换到动画过程中任意一个点，甚至能够倒着执行动画成果。

Android Studio 集成了 Motion Editor (动作编辑器)，能够利用它来操作 MotionLayout 对动画进行生成、预览和编辑等操作。这样一来，在协调多个视图的动画时，就能够做到对各个细节进行精密操控。

您能够通过浏览 Scott Swarthout 的这篇文章《Android Studio 中的 Motion Editor 用法详解》来取得更多对于 Motion Editor 的内容。

想要手把手通过教程学习 Motion Layout，您能够查看这个 codelab:

  • 应用 Kotlin 开发 Android 利用的进阶教程 03.2: 应用 MotionLayout 生成动画成果

Motion Layout 是一个通用的动画工具 – 您简直能够应用它在 Android 上构建任意一种动画成果。尤其是在以下两种状况下，MotionLayout 会比其它动画构建工具更胜一筹:

  • 可追溯的动画 – 由其它输出驱动的动画，例如工具栏在滚动时会呈现的折叠成果
  • 状态转换 – 由状态更改驱动的动画，例如用户进入某一界面后，随着该界面状态的转换而呈现的不同动画成果

新的 集成 Motion Layout 示例 展现了如何应用 Motion Layout 在不同的场景下进行动画成果的构建。每个界面都旨在向您展现在某些场景下如何应用 Motion Layout 构建实用的动画成果，以及如何将这些成果集成到其它视图上。

Constraint Layout 2.0 还有很多新性能。您能够通过查看文档、codelab 和代码示例，在您的利用中应用它。

期待看到您应用 Constraint Layout 2.0 构建的利用！

退出移动版