[译] ConstraintLayout 可视化[Design]编辑器（这究竟是什么）[第四部分]

• 原文地址：Constraint Layout Visual [Design] Editor ( What the hell is this )[Part4]

• 原文做者：Hafiz Waleed Hussain
• 译文出自：掘金翻译计划
• 译者：yazhi1992
• 校对者：phxnirvana，tanglie1993

哇哦，又是新的一天。为了避免浪费这宝贵的时光，让咱们来学点新知识吧 🙂 。

你们好，但愿各位都有所进步。在第一部分, 第二部分 和 第三部分这些文章中咱们已经学习了许多关于 ConstraintLayout 的知识。如今是时候来学习这个神奇布局的剩余内容了。顺便一提，本文是 Constraint Layout（这究竟是什么）系列的最后一篇文章了。

动机：

学习动机与先前在第一部分中讨论的是同样的。这篇文章里咱们将会学习如何使用可视化编辑器（Visual Editor）。有一些地方我会引用到第二部分的内容。我将会使用可视化编辑器来实现一些，咱们已经讨论过怎样在 XML 或者 Java 中实现的概念。经过这种方式咱们能够节省许多的时间。

咱们须要下载 2.3 版本的 Android studio。先前版本的可视化编辑器不太完善，有时会在 Design 面板上显示错误的信息。因此下载 2.3 beta 版是很是重要的，该版本在我写这篇文章时已经能够获取到了。

引言

在这篇文章里咱们大部分都是使用可视化编辑器，用到 XML 的机会比较少。那么让咱们开始吧！

在上图中我标出了五个红色的方框。这就是整个可视化编辑器了。在开始介绍以前有一个问题。那就是：了解各个组成部分以及它们的名字真的那么重要吗？在我看来，若是咱们只是想要独立完成某些工做，那么经过一遍又一遍地重复那些工做就能够掌握相应的技能，并不须要了解术语。但若是咱们想要帮助社区里的成员，或者说咱们想要成为一名优秀的团队合做者，咱们就应该学习全部相关的术语。这确实颇有用，我将会展现给大家看。

我知道大多数人不是很了解（或许有一些人了解 🙂）什么是 Palette, Component Tree, Properties 等等，可是我将会使用这些术语来描述流程。任何从事 UI 工做的开发人员都会遵循这些步骤。

从 Palette 窗口选取 UI 组件 -> 拖拽到 Design 编辑器中 -> 在 Property 窗口中改变组件的属性（宽度，高度，文字，外边距，内边距… 等等） -> 在 Design 编辑器中调整约束关系。

总共四个步骤，我再重复一遍。

Palette 窗口 -> Design 编辑器 -> Properties 窗口 -> Design 编辑器

咱们构建 UI 时 90% 都是这样的基本流程。若是你知道这些术语，你就能够轻易地想象出咱们说的是什么。接下来我会向你们介绍我刚刚提到的那些术语究竟是什么，以及咱们怎么在可视化编辑器中找到它们。

Palette:

提供了一系列的部件（widgets）和布局（layouts），你能够将其拖拽到位于编辑器中的布局里。（官方文档介绍）

在这里你能够获取到 Android 提供的全部 UI 组件。在右上角有一个搜索图标，你能够经过搜索节省寻找的时间。搜索图标的右边还有一个设置图标。点击这个酷炫的图标，你能够根据我的喜爱更改 UI 组件的外观。

Design 编辑器:

经过设计（Design）视图和蓝图（Blueprint）视图来预览你的布局。（官方文档介绍）

上图就是 Design 编辑器。在 Design 编辑器里咱们有两种模式可选，一种是设计模式（Design），另外一种是文本模式（Text）。首先咱们来看设计模式。

上图中咱们看到的两个布局实际上是同一个布局。左边那部分就是咱们将在设备中看到的 UI 界面。右边那部分称之为蓝图（blueprint）。当你在设计时这些都很是有用。你能够很轻易地看到每一个视图的外边距、边缘以及它们之间是否有冲突。我就看成大家已经知道了怎么去拖拽视图到 Design 编辑器中，而且知道怎么去建立与父布局或其余视图的约束关系。我要开始介绍下一个步骤了。

从上图中能够看到有许多的图标。是时候来介绍一下这些图标究竟是什么以及使用它们能够带来什么好处。

在开始以前，为了便于后面解释，我会给这些图标起个名。从左到右开始分别是：眼睛图标、磁铁图标、交叉箭头图标、星星图标、数字盒子、背包图标、对齐图标、指示线图标、放大图标、缩小图标、适应屏幕图标、平移缩放图标、警告和错误图标。

眼睛图标：

这个图标颇有用，尤为是当咱们的界面上有大量的视图时。若是这个图标处于打开状态，这意味着咱们同时能够看到全部视图的约束关系。好比当我只在调整一个按钮时，我却能够看到其余全部视图的约束关系。若是关闭了该功能，你就仅仅只能看到选中视图的约束，以下图所示。

磁铁图标：

若是你了解了这个图标会节省许多的时间。老实说我不太擅长使用这个图标，可是我会把我所知道的都告诉你。若是这个图标处于关闭状态，你在 Design 编辑器里能够拖拽或移动你的视图，但你必须手动构建约束。若是这个图标处于打开状态，这时编辑器就会自动构建与父视图的约束。

如上图所示。一开始图标处于关闭状态，我将个人 ImageView 移动到居中的位置，但什么都没有发生。以后我将磁铁图标打开了，神奇的事情发生了。我将个人 ImageView 移动到居中的位置，编辑器自动为我构建了约束。哇哦！

交叉箭头图标：

这个图标很是简单也很是酷炫。若是我想要清空全部的约束，只要点击这个图标，而后全部的约束都会被移除掉。以下图所示。

如上图所示，自动约束（磁铁图标）是打开的，这就是为何当我将视图移动到水平居中时会自动构建约束，可是当我点击了这个图标，全部的约束都被移除掉了。

星星图标：

这又是一个酷炫的图标。与交叉（清空约束）图标正好相反。我能够随意地拖拽视图而不用为它们构建约束。当我操做完成时只要点击一下这个图标，就能够自动构建出全部的约束，以下图所示。我很喜欢这个功能。

数字盒子：

做用是为你的父布局设置默认的外边距。

背包图标：

这个图标包含了许多功能。我会一个个地解释。

由于没有选中任何视图，因此一开始在 Design 编辑器中全部的图标都是不可点击的。有一些图标在选中了单个视图后可用，另一些图标在选中多个视图后可用。首先我来解释一下那些选中单个视图后可用的图标。

当我选中了一个视图，有两个图标会变为可用的，以下图所示。让咱们来看一下它们能够作些什么。

我点击了左边的图标，能够看到视图的宽度扩展到了屏幕边缘，可是请记住，这只是以 dp 为单位使用数值实现的效果而不是所谓的 match_parent(parent)。这就意味着若是在屏幕宽度更大的设备上，这个视图就没法扩展到屏幕边缘了。右边的图标也是同样的功能，只不过是做用于垂直方向的。以下图所示。

还有一件事别忘了。若是你点击了扩展宽度或高度的图标，而选中视图的宽高却只扩展到了相邻的视图边缘。不要感到困惑。由于在上面的例子中布局里只有一个视图，因此它填充满了父布局的宽高。下面的例子中我会给你看点不同的。

在开始介绍那些与多选视图有关的图标以前，还有一点是值得注意的，你在选中多个视图时仍然可使用那些单选视图时可用的图标，以下图所示。

如今让咱们开始学习那些多选视图后可用的图标吧。

当我在 Design 编辑器里选中多个视图后，剩下的几个图标就都变为可用的了。以下图所示。

这两个图标功能是同样的的，只不过一个用于水平方向，另外一个用于垂直方向。当我点击了水平方向的图标后，全部视图都会水平方向对齐。那么随之而来的问题是：这和上面刚学习过的那对图标有什么区别呢？

区别在于，上面的图标经过扩展尺寸（来对齐）。而这两个图标并不会扩展尺寸，而是将视图平移至互相对齐。另外值得注意的是，这只是在 Design 编辑器中设定了值，若是你运行到设备上你是没法得到在 Design 编辑器中显示的效果的。你须要本身去构建约束。但其实你能够先经过使用这些图标来对齐视图，这样能够节省不少时间，而后再构建约束，这样你就能够在设备上获得适当的效果。让咱们来看一下点击这些图标以后会发生什么吧。

接着再来解释剩下的两个图标。

一样的，这两个图标也有着同样的功能，只不过做用的方向不同。

用不着去移动位置或者改变数值，我只要点击左边的图标，就能够为全部选中的视图构建水平方向的约束。以下图所示。

还能够经过双击图标将视图连接成链。若是你对链不太了解，你能够去阅读该系列博客的第二部分。那篇文章里介绍了什么是链以及使用链带来的好处。

在下图中你能够看到如何使用编辑器构建链。

对齐图标：

这个图标的弹出菜单里包含了多达 11 个图标。其中 4 个图标在选中单个视图时可用，其他的在选中多个视图时可用。

首先我来介绍一下底部那四个在选中单个视图时可用的图标吧。

第一个图标的做用是将视图相对于相邻视图水平居中并构建约束。

第二个图标的做用是将视图相对于相邻视图垂直居中并构建约束。

第三个图标的做用是将视图相对于父布局水平居中并构建约束。

第四个图标的做用是将视图相对于父布局垂直居中并构建约束。

这些图标实现的效果以下图所示。

如今就剩下那些选中多个视图后可用的图标了。

先来介绍上面的三个：

第一个图标的做用是将全部选中视图左对齐于所选中视图的左边缘并构建约束。

第二个图标的做用是将全部选中视图都水平居中并构建约束。

第三个图标的做用是将全部选中视图右对齐于所选中视图的右边缘并构建约束。

这些图标实现的效果以下图所示。

下面的四个图标的做用是同样的，只不过是做用于垂直反向。

指示线图标：

咱们已经在第二部分中讨论过什么是指示线以及使用它会带来什么好处了。这里我就再也不多介绍了。你能够放心地在 UI 中添加指示线由于它不算做视图。如今有了这个图标，咱们可使用它来添加指示线，以下图所示。

放大、缩小、适应屏幕图标：

这个你们应该都懂就不用多说了吧。

平移缩放图标：

当我处理一些要放大不少倍，而且还须要拖动界面的工做时，这个图标就很是有用了。以下图所示。

警告和错误图标：

当我在构建个人 UI 时，这个图标很是有用。只要点击一下这个图标，就能够看到是否有任何错误或者警告发生。

到这里，咱们终于结束了对可视化编辑器设计模式（Design mode）的学习。是时候开始看看我是怎么在文本模式（Text mode）里工做的了。

除了经过编辑器来改变属性外，刚刚咱们在设计模式中作的全部事情均可以在文本模式中作到。除此以外，咱们还能够编写 XML。

工具栏：

提供了一些按钮用来配置编辑器中的布局外观以及编辑布局的属性。（官方文档介绍）

我只准备介绍工具栏中的前三个和最后一个图标。其余的图标之前就有了，我相信你们对它们都很是熟悉。

设计视图模式（Design View Mode）图标：

第一个会显示纯粹的 UI 布局。

第二个会显示咱们的 UI 布局的蓝图。

第三个则两种都显示。

这些图标实现的效果以下图所示。

多布局图标：

当我想要为不一样的布局建立不一样的布局文件时这个图标就能够帮上大忙。就好比我想要单首创建一个横屏的布局。使用这个图标我能够很快地建立好而不用进入文件夹中。以下图所示。

组件树（Component Tree）：

展现你的布局的界面层级。单击某一项能够将其在编辑器中选中。（官方文档介绍）

这个窗口颇有用，尤为是当我在 Design 编辑器中而且有大量的图标层层堆叠时，这时很难去选中某些视图旁边的一些视图。在这种状况下，我通常都会使用它来选中我想要的视图。以下图所示。

Properties：

提供了对当前选中视图的属性控制。（官方文档介绍）

面板由上图所示的两部分组成。这里我只介绍第一张图里的东西，由于第二张图里的东西在 Android Studio 诞生之初就已经存在了，因此应该不用我多说了吧。至于如何切换这两种视图，以下图所示。

让咱们开始学习第一个属性窗口里的新东西吧！以下图所示。

咱们要探索的主要分为两大部分。第一部分是方形内部，这部分是用来设置视图的尺寸。另外一部分是方形外部的蓝色的线条，这些是用来调整视图的约束关系的。

方形内部：

在方形内部咱们能够看到三种形态。

1.Wrap content:

全部的视图都有 wrap_content 的概念，这里也是同样。如今咱们能够在 Design 编辑器中设定该属性了。以下图所示。

这里我将一个本来属性为 match_parent，match_parent 的按钮修改成了 wrap_content，wrap_content。

2.固定尺寸：

固定尺寸指的是像咱们给宽度和高度设定 dp 值同样，如今咱们能够直接在 UI 界面里作到。以下图所示。

这里我将一个属性为 wrap_content，wrap_content 的按钮更改为了固定尺寸，并经过拖拽来设定值。

3.任意尺寸：

任意尺寸在咱们构建约束时很是有用。就好比我没有给视图设置任何约束，并将其设置为任意尺寸，视图就会变为 0 dp，0 dp。以下图所示。

如今我要对这个按钮施加左右约束，以后将其宽高设置为任意尺寸，这时按钮会填充全部剩余的空间。以下图所示。

如今是时候学习有关如何设置视图的约束值了。

上图中全部红色的方形区域包含了选中视图的全部约束设置。

这些线条的做用以下图所示。

上图中有一个按钮，我为该按钮构建了左侧值为 24 dp 的约束。以后我将值修改成 207 dp，最后我经过点击小圆点将约束移除。有一点值得注意的是，这些值不是约束，而是外边距。你只能在构建约束后设置该值。

但愿大家喜欢个人 Constraint Layout（这究竟是什么） 这一系列教程。今天咱们完成了全部我对 Constraint Layout 了解的内容的介绍。

下次咱们再一块儿学点新的知识吧。再见。周末愉快 🙂 。