ConstraintLayout进阶：Guideline的使用及实例

Android里的ConstraintLayout是个非常强大的工具，它有效的解决了Android里Layout的层级嵌套的问题。使用一个ConstraintLayout可以实现之前多个Layout才能实现的效果。

本篇文章就介绍下ConstraintLayout里比较进阶用法之一：Guideline。

Guideline介绍

Guideline是一种特殊的控件，它在界面上是看不见的（被标记为View.Gone），只是用来做参考线。它一般有水平和垂直两种。

Guideline的定位有两种方法：
1.绝对定位：使用layout_constraintGuide_begin和layout_constraintGuide_end
2.百分比定位：使用layout_constraintGuide_percent

下面以两个实例来说明Guideline的用法。

使用Guideline实现控件对称布局

假如，我们想要实现如下的效果，控件A和控件B，在屏幕上对称显示。

两个控件在屏幕上对称显示

如果不用ConstraintLayout，至少要嵌套两级的Layout才能实现。而用ConstraintLayout里的Guideline，可以很容易的实现这种效果。

在这个例子里，我们可以先定义一个垂直的Guideline，然后用这行代码layout_constraintGuide_percent="0.5"让Guideline垂直居中:

 <android.support.constraint.Guideline
        android:id="@+id/guide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>

然后以这根Guideline为基准，左右各constraint一个控件，注意这两行代码app:layout_constraintRight_toLeftOf="@id/guide"和app:layout_constraintLeft_toRightOf="@id/guide"：

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="确定"
        app:layout_constraintRight_toLeftOf="@id/guide"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="200dp"
        android:layout_marginRight="50dp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="取消"
        app:layout_constraintLeft_toRightOf="@id/guide"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="200dp"
        android:layout_marginLeft="50dp"/>

效果如下图，在App真正运行的时候，中间那根线是看不见的。

对称效果

使用Guideline实现按百分比定位控件

假如我们要在屏幕上显示一行字，这行字距离屏幕上边缘200dp。这个效果虽然很容易实现，但是，因为现实中安卓手机的屏幕分辨率的差异，不同的手机上显示的效果可能会不同。比如，在屏幕比较长的手机上，感觉下面会比较空。如下图：

如果按照绝对定位的方法，不同分辨率的手机效果会不同
使用Guideline可以解决这个问题，因为Guideline支持百分比的定位。
首先，新建一个水平Guideline，设置为距离上边缘30%：app:layout_constraintGuide_percent="0.3"：

<android.support.constraint.Guideline
        android:id="@+id/guide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />

然后控件根据这个Guideline来定位，注意这句app:layout_constraintTop_toBottomOf="@id/guide"：

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这行文字距离上边缘30%"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guide"
        android:textSize="30sp"/>

最终的效果是这样的：

使用百分比的效果

因为使用了百分比来定位，所以能更好的适配不同分辨率。