Android ConstraintLayout图文并茂详解(一)

不知道从什么时候开始，创建的layout默认的layout是ConstraintLayout，一直不知道这是啥鬼东西，总是将其手动的改成LinearLayout，也就是说习惯了靠编写XML代码完成界面。偶然的一次机会，朋友推荐了一篇介绍ConstraintLayout的博客，一发不可收拾的出来了这篇博客。下面跟着我来了解ConstraintLayout。

LayoutEditor

后来了解到，ConstraintLayout是Android Studio 2.2中主要的新增功能之一，也是Google在去年的I/O大会上重点宣传的一个功能。在Android Stuido中有个可视化工具 - Layout Editor（布局编辑器），自从接触Android Studio以来(beat 0.6)，它一直都存在，，鉴于种种原因，我们一直都是习惯于编写xml来完成界面。其最根本的原因还是视图的拖动，并不能完美的解决屏幕适配。

自从ConstLayout出现，我们可以放弃编写xml了，为什么呢？ConstraintLayout的所有功能都可以直接从可视化工具 - Layout Editor中实现，因为布局API和Layout Editor是专门为彼此构建的。因此，可以完全通过拖放使用ConstraintLayout来构建布局而不是编辑XML。

俗话说，工欲善其事必先利其器，接下来我们揭开Layout Editor的庐山真面目。

Layout Editor全景

1. 工具栏(Toolbar)：提供在编辑器中配置布局外观和编辑布局属性的按钮
2. Palette：提供小部件和布局的列表，您可以将它们拖动到编辑器内的布局中
3. Component Tree：显示布局的视图层次结构。在此处点击某个项目将看到它在编辑器中被选中
4. 设计视图：用来显示界面
5. blueprint视图：在该视图中可以清晰的看到布局相关信息，约束关系、边距等
6. 属性(Attributes)：针对当前选择的视图提供属性控件

Design和Text选项卡

• Design:可以在LayoutEditor中配置布局的外观
• Text :查看xml中的布局代码，同时在Preview窗口中查看当前界面显示

在”Design”选项中，如果没有选中任何视图，按着ctrl然后点击鼠标左键UI视图的任何位置，将会切换到Text；如果选中了某个视图，按着ctrol然后点击鼠标左键UI视图的任何位置，不仅会切换到Text，同时定位到选中的视图的code在XML的位置。

更改预览外观

1. Design and blueprint：用于选择在编辑器中查看布局的方式。Design 视图显示布局的彩色预览，而 Blueprint 视图仅显示每个视图的轮廓。或者，您可以并排查看 Design + Blueprint 。
   

   提示：您可以通过按 B 在这些视图之间进行切换。

2. Screen orientation：用于在横屏和竖屏方向之间旋转设备。
3. Device type and size：用于选择设备类型（手机/平板电脑、Android TV 或 Android Wear）和屏幕配置（尺寸和密度）。您可以从多个预配置的设备类型和您自己的 AVD 定义中进行选择，或从列表中选择 Add Device Definition 新建 AVD 定义。
   提示：您可以通过拖动布局的右下角来调整设备尺寸。
4. API version：用于选择要在上面预览布局的 Android 版本。
5. App Theme：用于选择将应用到预览的 UI 主题背景。注：此按钮仅对支持的布局样式有效；因此，此列表中的许多主题背景会导致错误。
6. Language：用于选择显示 UI 字符串的语言。此列表仅显示字符串资源中可用的语言。如果您要编辑译文，请从下拉菜单中点击 EditTranslations（请参阅使用 Translations Editor 对 UI 进行本地化）。
7. Layout Variants：用于切换到此文件的一个备用布局，或创建一个新布局（请参阅下文的创建布局变体）。

视图的inspector

“Attributes”窗口在顶部显示视图的inspector，位于src和contentDescription的视图属性上方。inspector显示UI元素的约束和边距，以及用于调整元素沿水平和垂直轴的位置偏差的进度条。

1. hide：使用此按钮关闭“Attributes”窗口
2. margin:通过单击值并选择不同的值来更改边距
3. height/width类型：表示控件的宽度和长度
4. Bias：使用进度来改变具有相反约束的元素的水平和垂直约束偏移
5. 尺寸比(ratio)：尺寸大小的比例
6. 约束：表示当前侧面的约束，单击后可以删除约束

工具栏

1. Align：设置UI视图和blueprint视图中是否显示约束、边距等
2. Autoconnect：设置是否自动设置约束
3. 删除所有视图的约束
4. 自动推断所有视图的约束
5. 设置默认边距
6. 设置视图填充可用空间
7. 设置对齐方式
8. 添加GuideLine

ConstraintLaytout概述

对于传统布局而言，比如说，RelativeLayout以控件之间相对位置或相对父容器位置进行排列，还有LinearLayout以控件之间的线性关系进行排列。传统布局完全可以完成任意界面，ConstraintLayout又有什么优势呢？

对于复杂的的布局，使用传统布局，我们最多的解决办法是各种嵌套，尽管有include可以使用，但并没有在根源上解决，除非这样的界面，通过自定义View来实现，又有点得不偿失。而，ConstraintLayout,即约束布局，可以在平面视图层次结构创建大而复杂的布局(无嵌套视图组)，减少布局的层级, 优化渲染性能。它类似于RelativeLayout，因为所有视图都是根据兄弟视图和父容器之间的关系来布局的，但它比RelativeLayout更灵活，并且更易于与Android Studio的Layout Editor一起使用。至于，在ConstraintLayout中如何完成界面编写，后续讲解。

前面我们已经详细讲解了Layout Editor界面，了解到可以完全通过拖放使用ConstraintLayout来构建布局而不是编辑XML，这样大大的提高了编写界面的效率，这种优雅的的方式，后续展现。

在这里又有一个疑问，ConstraintLaytout对于低版本是否兼容呢？ConstraintLaytout本事是由support库来提供的，它可适用于与Android 2.3（API级别9）及更高版本兼容的API库。当然，要使用ConstraintLayout，首先需要在app/build.gradle文件中添加ConstraintLayout的依赖：

dependencies {
  ...
  compile 'com.android.support.constraint:constraint-layout:1.0.2'
}

美中不足的是，它对buildTools还有一定的要求，必须在25.0.3以上。如果配置低的话，升级下即可。

buildToolsVersion &