Android-0.Android Studio布局中ConstraintLayout及designer简介

文章目录

• 更改预览外观
• 将布局转换为 ConstraintLayout
• 基本操作
• 添加约束
• 对齐
• 删除约束
• 视图的inspector
• GuideLine
• 基线约束
• 自动添加约束

ConstraintLayout适合使用可视化的方式来编写界面，但并不太适合使用XML的方式来直接进行编写。

更改预览外观

参考：https://developer.android.com/studio/write/layout-editor

1. Design and blueprint：用于选择在编辑器中查看布局的方式。Design视图显示布局的彩色预览，而 Blueprint视图仅显示每个视图的轮廓。
2. Screen orientation：用于在横屏和竖屏方向之间旋转设备。
3. Device type and size：用于选择设备类型（手机/平板电脑、Android TV 或 Android Wear）和屏幕配置（尺寸和密度）。您可以从多个预配置的设备类型和您自己的 AVD 定义中进行选择，或从列表中选择 Add Device Definition 新建 AVD 定义。
4. API version：用于选择要在上面预览布局的 Android 版本。
5. 应用主题背景：用于选择将应用到预览的 UI 主题背景。注：此按钮仅对支持的布局样式有效；因此，此列表中的许多主题背景会导致错误。
6. Language：用于选择显示 UI 字符串的语言。此列表仅显示字符串资源中可用的语言。如果您要编辑译文，请从下拉菜单中点击 Edit Translations（请参阅使用 Translations Editor 对 UI 进行本地化）。

将布局转换为 ConstraintLayout

低版本的andriod studio 自动创建的这个布局默认使用的是RelativeLayout，我们可以通过如下操作将它转换成ConstraintLayout:

1. 在 Android Studio 中打开现有布局并点击编辑器窗口底部的 Design 标签。
2. 在 Component Tree 窗口中，右键点击布局，然后点击 Convert layout to ConstraintLayout。

转换完成之后，原RelativeLayout中的内容也会自动转换到ConstraintLayout中，比如图中的TextView。如果你不需要它的话，可以选中这个控件，然后按键盘上的Delete键即可删除。

基本操作

ConstraintLayout的基本用法很简单，比如我们想要向布局中添加一个按钮，那么只需要从左侧的Palette区域拖一个Button进去就可以了，如下图所示。

添加约束

虽说现在Button已经添加到界面上了，但是由于我们还没有给Button添加任何的约束，因此Button并不知道自己应该出现在什么位置。
我们在预览界面上看到的Button位置并不是它最终运行后的实际位置，如果一个控件没有添加任何约束的话，它在运行之后会自动位于界面的左上角。在Component Tree处有警告，如上图所示。
那么下面我们就来给Button添加约束，如下图所示:

上图中Button的上下左右各有一个圆圈，这圆圈就是用来添加约束的，我们可以将约束添加到ConstraintLayout，也可以将约束添加到另一个控件。比如说，想让Button位于布局的右下角，就可以这样添加约束，如下图所示。

我们来看看约束的规则：

1. 每个视图必须至少有两个约束：一个水平和一个垂直。
2. 只能在约束控键和共享相同平面的锚点之间创建约束。因此，视图的垂直平面（左侧和右侧）可以仅限于另一个垂直平面; 基线只能限制在其他基线上
3. 每个约束控键只能用于一个约束，但可以创建多个约束（从不同的视图）到相同的锚点’

类似地，如果我们想要让Button居中显示，那么就需要给它的上下左右都添加约束，如下图所示。类似地，如果我们想要让Button居中显示，那么就需要给它的上下左右都添加约束，如下图所示。

对齐

ConstraintLayout该如何对齐呢？我们先了解对齐的概念，对齐就是将视图的边缘对齐另一个视图的相同边缘，或者是视图的中心对齐另一个视图的中心。

在上图图中，B的左侧与A的左侧对齐，我们只需要将B左侧约束到A的左侧即可：

刚才，只是将两个视图的一侧对齐了，如果想两个视图的中心对齐，应该怎么做呢？比如说，我们希望再添加一个Button，让它位于第一个Button的正下方，并且间距76dp，那么操作如下所示。

刚才只是，做了两个视图的对齐，如果是多个视图对齐，是不是就需要两两作对分别做约束呢，不用说也是特别的繁琐，必然不合理。既然不合理，那不用说也有工具了。 在Component Tree中选择所需对齐的视图，然后在Component Tree里右键点击被选择的视图，多选使用shift配合，在Align中选择视图中心对齐：

删除约束

删除约束的方式一共有三种:

1. 删除一个单独的约束，将鼠标悬浮在某个约束的圆圈上，然后该圆圈会变成红色，这个时候单击一下就能删除了
2. 删除某一个控件的所有约束，选中一个控件，然后它的左下角会出现一个删除约束的图标，点击该图标就能删除当前控件的所有约束了
3. 点击工具栏中的删除约束图标

视图的inspector

首先可以看到，在Inspector中有一个纵向的轴和一个横向的轴，这两个轴也是用于确定控件的位置的。我们刚才给Button的上下左右各添加了一个约束，然后Button就能居中显示了，其实就是因为这里纵横轴的值都是50。如果调整了纵横轴的比例，那么Button的位置也会随之改变，如下图所示。

不过，虽然我们将横轴的值拖动到了100，但是Button并没有紧贴到布局的最右侧，这是为什么呢？实际上，Android Studio给控件的每个方向上的约束都默认添加了一个16dp的间距，从Inspector上面也可以明显地看出来这些间距的值。如果这些默认值并不是你想要的，可以直接在Inspector上进行修改，如下图所示：

可以看到，修改成0之后Button右侧的间距就没了。 接下来我们再来学习一下位于Inspector最中间的那个正方形区域，它是用来控制控件大小的。一共有三种模式可选，每种模式都使用了一种不同的符号表示，点击符号即可进行切换。

1. 表示wrap content
2. 表示Fixed，也就是给控件指定了一个固定的长度或者宽度值。
3. 表示Match Constraint
   三者的变化如下，单击正方形内即可切换：

Match Constraint有点类似于match parent，但和match parent并不一样，是属于ConstraintLayout中特有的一种大小控制方式，下面我们来重点讲解一下。 最大的区别在于，match parent是用于填充满当前控件的父布局，而Match Constraint是用于填充满当前控件的约束规则。举个例子更好理解，如果我们有一个新的Button，它的其中一个约束是添加到当前这个Button上的，那么Match Constraint的效果也会发生改变，如下图所示。

GuideLine

Guideline是ConstraintLayout的Guideline辅助对象的实用程序类，该辅助对象不会显示在设备上，它被默认是View.GONE，而且不可改。另外，Guideline仅用用于ConstraintLayou布局。

如果你想创建一个GuideLine，可以点击工具栏的，然后在弹出框中选择水平的还是垂直的：

Guideline可以是水平或垂直的：

• 垂直Guideline的宽度为0，高度为ConstraintLayout的高度
• 水平Guideline的宽度为ConstraintLayout的宽度，高度为0

GuideLine也可以认为是视图，其可以根据相对于布局边缘的dp或百分比，将GuideLine定位在布局中，位置确定有三种方式：

• layout_constraintGuide_begin：指定与布局左侧或顶部的固定距离(dp)
• layout_constraintGuide_end：指定与布局右侧或底部的固定距离(dp)
• layout_constraintGuide_percent：指定与布局的宽度或高度的百分比

GuideLine默认的位置确认方式是layout_constraintGuide_begin,我们可以拖动虚线来重新指定它的位置。如果你想改变它的定位方式，单击GuideLine边缘的圆圈以切换位置确认方式。如下图所示。

我们来实现一个登录和注册两个按钮在水平方向上居中显示，在垂直方向上都距离底部64dp，那么就需要先添加一个垂直方向上的Guideline，如下图所示。

接下来我们开始实现让两个按钮在水平方向上居中显示，并距离底部72dp的功能，如下图所示。

我们给登录按钮的右边向Guideline添加约束，登录按钮的下面向底部添加约束，并拖动按钮让它距离底部72dp。然后给注册按钮的左边向Guideline添加约束，注册按钮的下面向登录按钮的下面添加约束。这样就实现了让两个按钮在水平方向上居中显示，在垂直方向上都距离底部72dp的功能了。

到这里，我们知道GuideLine其实就是一种约束规则，供其他视图使用，以统一处理距离ConstraintLayout边缘的距离，而不用单独处理约束偏差。

基线约束

不管是英语还是其他语言(汉语除外)，为了规范书写会设有四条线，从上至下第三条就是基线，以保证书写更整齐。如下所示：

在ConstraintLayout中，使用基线约束来对齐使用不同文本大小的视图。即使视图中的文本元素大小不一，依然可以使用基线约束来对齐元素。这里我们来做个输入账号的界面：

将一个TextView从Palette拖到布局，其文本为”ID”,字体大小为18sp 将“Plain
Text”元素从“Palette”拖到布局（纯文本元素是EditText视图）,其hint为”Please input the
id”,字体大小为14sp

1.单击TextView“id”元素并将其指针悬停在其上。元素下方出现基线对齐的ab按钮，因为元素中包含文本：

2.单击ab按钮显示文本基线。然后从TextView“id”的基线（绿色闪烁的小椭圆，不是边框的圆）中单击并拖动到lain Text的基线，如下图所示：

自动添加约束

自动添加约束的方式主要有两种，一种叫Autoconnect，一种叫Inference
想要使用Autoconnect，首先需要在工具栏中将这个功能启用，默认情况下Autoconnect是不启用的，如下图所示。

Autoconnect可以根据我们拖放控件的状态自动判断应该如何添加约束，如下图所示。

Inference也是用于自动添加约束的，但AutoConnect只能给当前操作的控件自动添加约束，而Inference会给当前界面中的所有元素自动添加约束。因而Inference比较适合用来实现复杂度比较高的界面，它可以一键自动生成所有的约束。

参考：
https://blog.csdn.net/guolin_blog/article/details/53122387
https://blog.csdn.net/io_field/article/details/77894191
https://developer.android.com/studio/write/layout-editor
https://developer.android.com/training/constraint-layout/#constrain-chain
https://developer.android.com/reference/android/support/constraint/ConstraintLayout
https://codelabs.developers.google.com/codelabs/constraint-layout/#0