我的CSDN博客同步发布：抢先体验ConstraintLayout以及AS 2.2

转载请注明出处：【huachao1001的简书：http://www.jianshu.com/users/0a7e42698e4b/latest_articles】

今年的Google开发者大会上，google给我们带来了ConstraintLayout，这个Layout有啥不一样呢？你可以通过布局工具拖拽轻松实现布局，当然了，这必须得Android Studio 2.2以后才有这个工具，但ConstraintLayout这个类本身是兼容到Android 2.3 的，因此你可以放心大胆的用，只不过在Android Studio中必须升级到2.2才会有这个工具，这个工具如下截图：

layout editor

反正我第一眼看过去看起来就像是iOS里面的AutoLayout，事实上，就是模仿iOS（我猜的(* ^__ *) ）_{。目前，Google还没有发布API参考文档，说是要等到版本更稳定后再发布}，我们抢先体验一下ConstraintLayout吧~。

1 关于约束（Constraint）

约束是用来描述一个View在屏幕中相对其他的View的位置。等等~，ConstraintLayout看起来怎么跟RelativeLayout这么像啊？其实ConstraintLayout比RelativeLayout更灵活，通过定义约束，你可以

1. 将子View指定为与另一个子View边界对齐
2. 可以指定子View位置在ConstraintLayout中百分比
3. 可以指定子View之间文本对齐。
4. ...

接下来就开始使用ConstraintLayout吧~

2 准备工作

1.首先，在SDK Manager中把你的Android Support Repository更新到最新（版本最低为32）。

2.然后，在你的build.gradle中添加：

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

3.最后，把你的跟布局设置为：

<android.support.constraint.ConstraintLayout>

4.最后的最后，如果你想使用ConstraintLayout编辑器的话，你的Android Studio得升级到2.2。我似乎听到有人说下载不了了，我提供一份吧(真是操碎了心~)：http://pan.baidu.com/s/1b6jstg

3 开启ConstraintLayout

现在该有的你都有了，开始体验ConstraintLayout吧~。

3.1 认识图标

我们主要是在界面上拖拽布局，因此，很有必要对这些图标认识一下~

先看一组功能按钮图标

功能图标

1. 眼睛图标

   -->这个图标是用于显示约束，即各种约束参考线。

2. 开启自动连接

   -->这个图标是开启自动连接，即自动添加约参考线

3. 清除约束

   --->这个图标是清除所有的约束

4. 自动推断约束

   -->这个图标是自动推断约束，点击这个图标后，会自动添加约束，跟自动连接不同的是，这个是根据当前的布局情况，自动推断约束；而自动连接是，拖拽结束后根据用户的拖拽自动添加约束。

接下来我们看看在View边界约束中的相关图标

View约束

1.

调整View的大小

--->我们看到，View的四个边角都有这个图标，这个图标是用于调整View的大小的

2.

约束

--->我们看到，在View的四个边的中点有个圆图标，这个图标是用于添加约束的。

3.

百分比

--->图中还有个曲折的直线，这个图标分为水平和垂直，用于描述位置。注意，这里描述的位置并不是具体的值，而是百分比。比如，你想要一个View垂直居中（如上图），你只需要在View的top边和bottom边上添加这个约束（曲折的线）,并让上下的曲折直线高度一样大（可以通过输入数字设置一样大，后面在具体讲）。如果上下不一样大，则按照当前比例大小对应显示到屏幕。同理，水平方向也是一样的。

4.

绝对定位

-->实心的箭头，用于指定绝对位置，如上图中，就是相对屏幕位置，右边边距为192.

5.

文字基线

-->我们看到，在View内部，还有根“火腿肠”，它是干嘛的呢？注意，他是表示文字的基线，什么意思呢？就是指文字底部对齐的线。通过这个可以将两个TextView的文字对齐。一定要注意，只有TextView（及其子类）才会有这个图标。

3.2 自动添加连接

所谓的连接，其实就是添加参考一条线，比如说ViewB需要与ViewA水平对齐，那么ViewB就需要添加一条水平对齐参考线，默认下，Android Studio是开启自动连接的我们先看一个动态图

自动添加连接

开启自动连接

关闭自动连接

3.3 设定子View的位置

先看看如何实现居中，即上下比例为1:1，

居中显示

如果你不想让它居中，而是以比例的形式布局，该怎么办呢？比如，要实现子View的top距离父View的top与子类的bottom距离父类的bottom为1:2，那么，只需按住子View上下拖拽即可：

1:2比例布局

如果你不想拖拽子View，也可以通过属性窗口的垂直线设置比例，比如，我要实现上下比例为71:29：

71:29比例布局

我们接下来认识一下属性窗口

3.4 认识Properties窗口

先看看截图：

Properties窗口

其他的比较容易理解，我们只看一下Vie的宽高设置部分，即黄色部分。有如下几种设置 ，可以通过点击来切换：

1. wrap content

   ：表示Wrap Content

2. 固定尺寸

   ：表示固定尺寸

3. 填充父类

   ：Any Size，其实就是相当于FrameLayout中的match parent，即直接扩充到父类的大小。

3.5 TextView的文本对齐

还记得前面我们提到的TextView中的“火腿肠”吗？我们接下来看看gif动态图演示如何让TextView文本对齐，(注意，Button继承自TextView)。首先，把鼠标移动到“火腿肠”处，待提示“Drag to Create Baseline Constraint”时，开始拖拉。如果需要删除Baseline
Constraint，也是一样，点击这个“火腿肠”即可（鼠标移动到该图标位置，待提示“Click to
Delete Baseline Constraint”时点击）：

文本对齐

好啦，就先分享这么多_{，接下来几个月是找工作的季节了，我的重心会放在跟Android相关的基础上面，接下来一段时间我写的文章会比较基础，写的都是我每天的复习总结}