Android新布局ConstraintLayout的使用

在2016年的Google I/O大会中，Google为Android开发者带来了新的福利——ConstraintLayout（约束布局）和layout editor（布局编辑器）。使用ConstraintLayout，能够让我们应用的布局更加“扁平化”，提升我们的开发体验。而layout editor是Android Studio 2.2新增的一个可视化布局工具，使用它可以通过拖动UI控件来进行“约束布局”，还可以实时显示ConstraintLayout的布局效果。

译者注：使用ConstraintLayout并不需要Android Studio 2.2或以上版本，但是要使用layout editor需要将Android Studio先升级到2.2或以上版本。使用ConstraintLayout需要我们添加如下依赖：

compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha4'

本篇文章会介绍如何使用ConstraintLayout的各种特性。在下篇文章中，我们会分析ConstraintLayout的工作原理，理解了工作原理，我们对它的运用也会更加得心应手。

先让我们从约束（constraint）是什么开始...

约束的类型

根据官方的介绍，一个对View的约束描述的是"View在布局中相对于其他元素的位置是怎样的"。在一个约束关系中，至少有两个主角，一个我们称之为source（源），另一个我们称之为target（目标）。其中source的位置依赖于target。我们可以这样理解：约束以某种方式将source与target连接了起来，这样source相对于target的位置便是固定的了。 我们可以将source和target看作是位于View上的点，称之为“锚点（anchor point）”。ConstraintLayout中的每个View都支持将如下锚点作为约束关系中的source或target：

• top, bottom, left(start), right(end)

• centerX, centerY

• baseline

在XML文件中，是这样描述一个约束的：

layout_constraint[SourceAnchor]_[TargetAnchor]="[TargetId]"

上面的描述可能比较抽象，我们来看一个例子。这个例子建立了button_cancel的最右端（end）和button_next的最左端（start）的约束。相应的XML文件如下：

<Button 
  android:id="@+id/button_cancel" 
  … />

<Button 
  android:id="@+id/button_next"   
  app:layout_constraintStart_toEndOf="@+id/button_cancel" 
  … />

上面的描述的约束会使得button_cancel和button_next布局在同一水平线上，并且button_next位于button_cancel的右边。

在定义一个约束时，我们需要注意为约束关系中涉及到的View指定一个id属性，ConstraintLayout通过id属性才能定位到约束关系中的target或是source。

我们来看一个完整的描述约束关系的XML文件：

<ConstraintLayout
  xmlns:android="..."
  xmlns:app="..."    
  android:id="@+id/constraintLayout"
  android:layout_width="match_parent" 
  android:layout_height="match_parent">  <Button 
    android:id="@+id/button_cancel" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" *  
    app:layout_constraintStart_toStartOf="@+id/constraintLayout"
    android:layout_ma