谷歌约束控件(ConstraintLayout)扁平化布局入门

序

在Google IO大会中不只仅带来了Android Studio 2.2预览版，同时带给咱们一个依赖约束的库。

简单来讲，她是相对布局的升级版本，可是区别与相对布局更增强调约束。何为约束，即控件之间的关系。
她能让你的布局更加扁平化，通常来讲一个界面一层就够了；同时借助于AS咱们能极其简单的完成界面布局。

准备

1.准备好Android Studio 2.2预览版，在这里给你们准备好了下载连接：

• https://dl.google.com/dl/android/studio/ide-zips/2.1.1.0/android-studio-ide-145.2878421-windows.zip
• https://dl.google.com/dl/android/studio/ide-zips/2.2.0.0/android-studio-ide-145.2878421-mac.zip
• https://dl.google.com/dl/android/studio/ide-zips/2.2.0.0/android-studio-ide-145.2878421-linux.zip

为何须要预览版，其实就库来讲并不须要AS最新版本，可是这样咱们只能使用代码来进行布局，而ConstraintLayout让布局回归原始，拖动便可。比起常规控件拖动基本是分分钟高潮的节奏。

2.首先在项目中添加依赖：

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

注意：正式版本还未发布。

初尝禁果

首先咱们创建 activity_start.xml 布局，并添加以下代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/lay_root" android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView  android:id="@+id/iv_head" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/dog" />

</android.support.constraint.ConstraintLayout>

在这个代码中咱们定义了根布局为ConstraintLayout，而后添加了一个ImageView。请注意在代码中尽可能为每个控件都加上id名称，由于约束布局须要知道每个控件之间的关系。
要让图片布局水平居中哪么咱们更改ImageView部分代码为：

<ImageView  android:id="@+id/iv_head" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/dog" app:layout_constraintLeft_toLeftOf="@+id/lay_root" app:layout_constraintRight_toRightOf="@+id/lay_root" />

若是要垂直居中，哪么咱们继续添加代码：

<ImageView
        android:id="@+id/iv_head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/dog"
        app:layout_constraintBottom_toBottomOf="@id/lay_root"
        app:layout_constraintLeft_toLeftOf="@+id/lay_root"
        app:layout_constraintRight_toRightOf="@+id/lay_root"
        app:layout_constraintTop_toTopOf="@id/lay_root" />

此时咱们的控件已经居中在最中央了。

固然为了证实水平居中，咱们限定图片宽度为100dp:

工做区

咱们先来看看 Android Studio 2.2 Preview1 提供的工做区。

在工做区中有两种预览，一种设计预览，一种叫作蓝图的东西。二者能够辅助进行布局预览，很是Nice。

眼睛图标：用来控制是否显示约束的东西。

磁铁图标：用来自动吸附的东西，就是说两个按钮放在一块儿的时候会自动按照必定的约束条件进行连接。

清理图标：用来清除全部的约束，当鼠标放倒一个控件上时也会有一个清理图标出现，点击能够清除当前选中的控件的约束。

灯泡图标：用来自动推断约束条件的东西，运用这个能够更加智能快速的完成布局。

基础

在布局引擎中，能为你的控件手动或者自动的建立必定的布局约束；为了更好的理解约束，下面来看一些案例（源于谷歌案例）。

约束

简单来讲约束能够帮助你按照某种相互关系进行布局，可让控件对齐等等操做，在这里咱们操做后面的按钮并连接到前一个按钮的右端，而且间隔56dp。哪么此时不管我移动按钮1到哪儿，按钮2都将在按钮1的右边并间距56dp。

手柄类型

在这个图中咱们看见有3种不一样的手柄。

调整手柄

拖动该手柄能帮助你调整整个控件的大小。

约束手柄

这个约束手柄位于控件的四边，在四边上有四个小圆点，拖动该圆点并指向另外的控件的一边，哪么可让该控件对其到指向的控件。
固然你能够设置margin来提供对应的间距。若是须要清理掉单个约束，点击该圆点便可。

手柄限制：

• 左右两边的手柄只能连接到另一个控件的左右两边，上下手柄一样。

基线手柄

该手柄仅仅出如今有文字的控件中使用，或者继承TextView的控件中使用，其做用是对齐两个控件的文字基线。

基线限制：

• 基线只能连接到另外一个控件的基线。
• 基线也不能与手柄进行连接。

谷歌的案例

1.首先选择一个约束手柄，并按住鼠标拖动到另一个控件的手柄原点上，当连接线变成绿色的时候松开鼠标便可建立一个约束。

2.添加图片控件，连接TextView控件的顶部手柄到ImageView底部手柄，并拖动必定间距。能够看出约束添加时文本控件自动吸附到了图片的底部。

3.拖动图片控件顶部手柄到根布局顶部。

4.最后咱们同时添加图片左边与右边的约束使其居中对齐。

5.添加基线约束。

是否是很简单？从未感受布局如此简单，若是使用传统布局进行拖动一定不能作到多屏幕适配的问题，而约束布局却不会，约束强调相互关系，并不固定位置。

属性面板

上面的是一些基本用法，下面来看看属性面板。在这里将学到更加Nice的自定义化设置。

首先咱们在屏幕上添加一个图片控件，并添加四边约束到根布局，此时咱们看见的界面是这样的：

在属性面板的上面部分是咱们的检查员（Inspector），在这个视图中显示了当前选中的控件的约束状况。

• Margins：间距，在这个面板中咱们能够看见当前图片控件相对约束的控件来讲四边都具备16dp的间距。

• 删除约束：鼠标放到检查器上中间正方形边上会出现一个删除按钮，点击此按钮便可删除当前方向的约束。

• 百分比定位：当你同时建立了左右两边的约束的时候，你会在监视器上看见一个水瓶的进度条，默认状况是50的值，意味着相对你的左右两边的控件约束进行居中对齐。你能够拖动这个进度条进行更改；同理上下同时建立约束后也将有一个垂直方向的进度条出现。
  

• 控件自身尺寸：对于控件自身的大小控制有3种不一样的类型，你能够经过点击中间正方形上的线来进行切换。
  
  
  Fixed: 该模式下为固定尺寸，你能够设置控件的width/height属性来控制高和宽。
  
  AnySize: 该模式可让控件占据全部可用的空间来知足约束。换句话说，这更像是匹配约束。不一样于match_parent，是占据父视图的全部可用空间；AnySize模式下是知足约束的状况下尽可能知足控件的大小空间。
  
  Wrap Content: 在该模式下，控件所占有的空间是可缩放的，至关于“wrap_content“属性。

  咱们来看一个从Fixed模式调整为AnySize模式的对比图：
  
  调整图片的宽度占有属性为AnySize模式以后：
  

到这里基本是使用是OK了，下面再说两点额外的操做。

更多

自动连接

还记得上面说到工做区的时候说的自动连接磁铁图标么？

首先咱们启用该功能。而后新建界面而且拖动一个图片控件到中心部分，而后放开，此时会看见编辑器自动为咱们添加了图片四边的约束。

自动推断

自动推断也是用来辅助用户建立控件约束的；其原理是综合控件之间的关系建立对应的约束条件。

与自动连接的区别：
自动连接，自动推断都是辅助建立约束。可是自动连接是在用户拖动一个控件后为当前拖动的控件建立约束；而自动推断不一样，自动推断会综合考虑所有控件之间的关系，而后根据布局建立控件之间的相互约束关系。

要测试自动推断，首先咱们关闭自动连接功能，此时咱们添加一些控件，控件的布局以下，由于咱们关闭了自动连接，而且采用拖动关系进行建立，此时界面上控件之间是没有约束关系的。

此时咱们在手机上看见的是这样：

所有被挤压到了一起。
此时咱们点击顶部的��图标，自动推断约束，而后能够看见咱们的布局变了：

此时再看看咱们的手机上的效果：

Very Nice～～

总结

在本篇文章中仅仅只是说明了约束布局的操做，详细的约束布局建立的XML内容以及原理并无在这一章中进行讲解，会在后续章节中讲解；固然说到布局XML，在约束布局中并不建议直接操做XML文件来完成布局，而建议使用鼠标拖动来添加对应的约束。

经过本篇文章的学习，基本上一个简单的不须要滚动的布局均可以使用约束布局来完成，也仅仅只须要一层就能够了，全部的控件不管在多一层足够了。

这是否意味着抛弃其余控件？并非的！约束布局仅仅只是一种新的思路，其适用于界面不太复杂，而且不滚动的界面中布局，若是界面元素不少甚至超过屏幕，哪么并不建议使用约束布局。

另外约束布局仅仅是简单快捷的布局，其性能负担随着界面中的控件数量以及约束条件的增长而增长；因此使用时还须要多多考究。

文章的末尾处附上一份谷歌的案例效果：

文章中的项目托管到Github：

https://github.com/qiujuer/BeFoot/tree/master/blog/sample/ConstraintLayout

========================================================
做者：qiujuer
博客：http://my.oschina.net/qiujuer/blog
网站：www.qiujuer.net
开源库：github.com/qiujuer/Genius-Android
开源库：github.com/qiujuer/Blink
转载请注明出处：http://blog.csdn.net/qiujuer/article/details/51462471
—— 学之开源，用于开源；初学者的心态，与君共勉！

========================================================