然后，在工具栏中同步 Gradle 文件。

创建布局

接下来，我们创建一个布局，根布局就用 ConstraintLayout：

<android.support.constraint.ConstraintLayout
xmlns:android=“http://schemas.android.com/apk/res/android”
xmlns:app=“http://schemas.android.com/apk/res-auto”
xmlns:tools=“http://schemas.android.com/tools”
android:layout_width=“match_parent”
android:layout_height=“match_parent”>

</android.support.constraint.ConstraintLayout>

添加约束

添加约束十分简单，我们首先从 Design 界面的 Palette 操作栏拖动一个 Button 到蓝图中，添加完后，点击选中它，效果是这样的：

可以看到，上下左右都有一个小圆圈，这个圆圈就是用来添加约束的。 四个角的矩形，是用来扩大或缩小控件的。

：删除选中控件的所有约束。
：编辑基线，用于基线对齐（下面会说）。

现在我们来为这个 Button 添加约束：

看这个效果，有没有一种「五马分尸」的感觉？当只有一条边拉这个 Button 时，Button 马上就被拉过去了，但是当四个边都开始拉这个 Button 时，Button 就在中间动弹不得了。

看完了动图，我们再来看看 XML 布局中的变化：

因为我们的目的是想让这个 Button 居中，但是它却默认给我们添加了 margin，这个显然是多余的。
如果不想每次添加约束后都在这条边的约束上添加 margin，我们可以在上面的工具栏中进行设置：

抛去 margin 相关的属性，那么约束父控件的相关属性就是如下这些了：

app:layout_constraintTop_toTopOf=“parent”
app:layout_constraintLeft_toLeftOf=“parent”
app:layout_constraintRight_toRightOf=“parent”
app:layout_constraintBottom_toBottomOf=“parent”

在上面的图中我们已经看到了，每个控件的上下左右都有一个圆圈，用于添加约束的。
那么这些属性的 constraintXXX 就是指定的当前控件的约束位置的，而 toXXX 就是目标约束位置。
这个位置