[译] 带你领略 ConstraintLayout 1.1 的新功能

时间 2019-11-07

标签领略 constraintlayout 1.1 功能繁體版

原文原文链接

原文地址：Introducing Constraint Layout 1.1

原文做者：Sean McQuillan

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：Moosphon

校对者：androidxiao LeeSniper

约束布局（ConstraintLayout）经过使用 Android Studio 中的可视化编辑器来为您生成绝大多数的 UI，进而达到简化 Android 中建立复杂布局的目的。它一般被咱们描述为更增强大的 RelativeLayout。经过使用约束布局，您能够定义一些复杂的布局而不须要建立复杂的视图层级。html

约束布局最近发布了 1.1 稳定版本，并迅速得到大量好评。全面的优化改进可让多数布局的运行速度比之前更快，屏障和群组等新功能使现实生活的设计变得简单！前端

Android Gradle

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.1.0'
}
复制代码

若是您想要在项目中使用新特性，须要添加 ConstraintLayout 1.1 版本做为依赖。android

1.1 版本中的新特性

百分比

在约束布局 1.0 版本中，须要使用两条引导线才能让视图根据百分比来占据屏幕。而在约束布局 1.1 版本中，经过容许您轻松地将任何视图限制为百分比宽度或高度，一切将变得很简单。ios

使用百分比指定按钮的宽度，以便在保持设计效果的同时适应可用空间。git

全部视图都支持 layout_constraintWidth_percent 和 layout_constraintHeight_percent 属性。这些将致使约束被固定在可用空间指定百分比位置。所以，使用几行 XML 代码就可使 Button 或 TextView 展开并以百分比填充屏幕。github

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintWidth_percent="0.7" />
复制代码

链条

经过链条功能来放置多个元素可让你配置它们该如何填充可用空间。在 1.1 版本中，咱们已经修复了链条的一些问题，并使它们可以处理更多的视图。您能够经过在两边添加约束来生成一个链条。例如在下面这个动画中，每一个视图之间都有一个约束。后端

经过 spread，spread_inside 和 packed，链条可以让您配置如何布置多个相关的视图。bash

app:layout_constraintVertical_chainStyle 属性能够做用于链条中的任何视图。您能够设置它的值为 spread，spread_inside 或者 packed。app

spread：均匀分配链中的全部视图
spread_inside：将第一个元素和最后一个元素放置在边缘上，并均匀分布其他元素
packed：将元素包裹在链条的中心

屏障

若是您有几个视图会在运行时更改大小，则可使用屏障功能来约束元素。您能够将屏障放置于几个元素的开始，顶部，末尾或底部。您能够将其视为制做虚拟组的一种方式，由于它不会将此组添加到视图层次结构中。编辑器

在布置国际化字符串或显示用户生成的没法预测大小的内容时，屏障很是有用。

屏障容许您经过几个视图来建立一个约束。

屏障将始终将本身置于虚拟群组以外，而且您可使用它来限制其余视图。在上面这个例子中，右视图被限制为始终处于最大文本视图的末尾。

群组

有时您须要一次显示或隐藏多个元素。为了支持这个，约束布局增长了群组功能。

一个群组并无增长视图的层级——这实际上只是一种标记视图的方式。在下面的示例中，咱们将标记 profile_name 和 profile_image 以供 id 配置文件引用。

当您有多个须要显示或陈列在一块儿的元素时，这将颇有用。

<android.support.constraint.Group
    android:id="@+id/profile"
    app:constraint_referenced_ids="profile_name,profile_image" />
复制代码

当定义名为 profile 的群组后，您能够为该群组设置可见性，并将其应用于 profile_name 和 profile_image。

profile.visibility = GONE

profile.visibility = VISIBLE
复制代码

圆形约束

在约束布局中，大多数约束由屏幕尺寸指定——水平和垂直。在约束布局 1.1 版本中，有一个新的类型约束 constraintCircle，它容许您指定沿着一个圆形进行约束。您没必要提供水平和垂直边距，而是指定圆的角度和半径。这对于像径向菜单这样的角度偏移的视图将很是有用！

您能够经过指定要偏移的半径和角度来建立径向菜单。

建立圆形约束时，请注意，角度从顶部开始并顺时针进行。在这个例子中，你将按以下方式指定中间的 fab：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/middle_expanded_fab"
    app:layout_constraintCircle="@+id/fab"
    app:layout_constraintCircleRadius="50dp"
    app:layout_constraintCircleAngle="315" />
复制代码

约束集与动画

您能够将 ConstraintLayout 随同 ConstraintSet (约束集)一块儿使用来一次实现多个元素的动画效果。

一个 ConstraintSet 仅持有一个 ConstraintLayout 的约束。你能够在代码中建立一个ConstraintSet，或者从一个布局文件中加载它。而后，您能够将 ConstraintSet 应用于 ConstraintLayout，更新全部约束以匹配 ConstraintSet 中的约束。

要使其具备动画效果，请使用 support library 中的 TransitionManager.beginDelayedTransition() 方法。此功能将使您的 ConstraintSet 中的全部布局的更新都经过动画来呈现。

这是一个更深刻地涵盖了这个话题的视频：

YouTube 视频连接：https://youtu.be/OHcfs6rStRo

新的优化

约束布局 1.1 版本中添加了几个新的优化点，可加快您的布局速度。这些优化点做为一个单独的通道运行，并尝试减小布局视图所需的约束数量。

总的来讲，它们是经过在布局中寻找常量并简化它们来运做的。

有一个名为 layout_optimizationLevel 的新标签，用于配置优化级别。它能够设置为如下内容：

barriers：找出屏障所在，并用简单的约束取代它们
direct：优化那些直接链接到固定元素的元素，例如屏幕边缘或引导线，并继续优化直接链接到它们的任何元素。
standard：这是包含 barriers 和 direct 的默认优化级别。
dimensions：目前处于实验阶段，而且可能会在某些布局上出现问题——它会经过计算维度来优化布局传递。
chains：目前正在实验阶段，并计算出如何布置固定尺寸的元素链。

若是你想尝试试验性的优化上述中的 dimensions 和 chains，你能够在 ConstraintLayout 中经过以下代码来启用它们：

<android.support.constraint.ConstraintLayout 
    app:layout_optimizationLevel="standard|dimensions|chains"
复制代码

喜欢这篇文章？不如给 Sean McQuillan 一点鼓励。

了解更多

想要了解有关约束布局 1.1 版本的更多信息，请查看文档和代码实验室！

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。