Android ConstraintLayout属性简介（一、基础篇）

Android ConstraintLayout属性简介（一）

本篇文章介绍ConstraintLayout下面几个最基本的属性：

layout_constraintLeft_toLeftOf

layout_constraintLeft_toRightOf

layout_constraintRight_toLeftOf

layout_constraintRight_toRightOf

layout_constraintTop_toTopOf

layout_constraintTop_toBottomOf

layout_constraintBottom_toTopOf

layout_constraintBottom_toBottomOf

layout_constraintBaseline_toBaselineOf

layout_constraintStart_toEndOf

layout_constraintStart_toStartOf

layout_constraintEnd_toStartOf

layout_constraintEnd_toEndOf

这些属性是使用ConstraintLayout需要掌握的最基本属性，但是跟RelativeLayout相比，这些属性的含义一看可能不太好理解，比如为什么toLeftOf还有两个，一个是layout_constraintLeft_toLeftOf，一个是layout_constraintRight_toLeftOf，有何区别？本篇文章就以实际例子来展示一下以上属性的含义。

1、layout_constraintLeft_toLeftOf和layout_constraintLeft_toRightOf

先上一个布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="200dp"
        android:layout_height="40dp"
        tools:text="A"
        android:textSize="16sp"
        android:gravity="center"
        android:id="@+id/textview1"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="0dp"
        app:layout_constraintHorizontal_bias="0.5"/>

    <TextView android:layout_width="80dp"
        android:layout_height="wrap_content"
        tools:text="B"
        android:textSize="16sp"
        android:id="@+id/textview2"
        android:textColor="@color/black"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        app:layout_constraintRight_toLeftOf="@+id/textview1"/>

    <TextView android:layout_width="80dp"
        android:layout_height="wrap_content"
        tools:text="C"
        android:textSize="16sp"
        android:id="@+id/textview3"
        android:background="@android:color/holo_green_dark"
        android:gravity="center"
        app:layout_constraintRight_toRightOf="@+id/textview1"/>
</android.support.constraint.ConstraintLayout>
           

该布局文件中有三个TextView A、B、C，A位于水平中间的位置，我们对B使用layout_constraintLeft_toLeftOf属性，目标对象为A，对C使用layout_constraintLeft_toRightOf属性，目标对象为A，呈现的效果如下：

根据效果可知道，layout_constraintLeft_toLeftOf的含义就是使当前控件（此处为B）的左边跟目标控件（此处为A）的左边对齐，而layout_constraintLeft_toRightOf的含义就是当前控件（此处为C）的左边跟目标控件的右边对齐，此处对齐的意思就是x坐标值一样。

2、layout_constraintRight_toLeftOf和layout_constraintRight_toRightOf

根据1，我们猜测，layout_constraintRight_toLeftOf是不是让当前控件的右边对齐于目标控件的左边，layout_constraintRight_toRightOf是不是让当前控件的右边对齐于目标控件的右边，我们修改一下布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="200dp"
        android:layout_height="40dp"
        tools:text="A"
        android:textSize="16sp"
        android:gravity="center"
        android:id="@+id/textview1"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="0dp"
        app:layout_constraintHorizontal_bias="0.5"/>

    <TextView android:layout_width="80dp"
        android:layout_height="wrap_content"
        tools:text="B"
        android:textSize="16sp"
        android:id="@+id/textview2"
        android:textColor="@color/black"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        app:layout_constraintRight_toLeftOf="@+id/textview1"/>

    <TextView android:layout_width="80dp"
        android:layout_height="wrap_content"
        tools:text="C"
        android:textSize="16sp"
        android:id="@+id/textview3"
        android:background="@android:color/holo_green_dark"
        android:gravity="center"
        app:layout_constraintRight_toRightOf="@+id/textview1"/>
</android.support.constraint.ConstraintLayout>
           

最后呈现的效果如下图：

可见，我们的猜测是对的，layout_constraintRight_toLeftOf是让当前控件（B）的右边对齐于目标控件的左边，layout_constraintRight_toRightOf是让当前控件（C）的右边对齐于目标控件的右边，此处对齐的意思也是x坐标值一样。。

3、layout_constraintTop_toTopOf和layout_constraintTop_toBottomOf

就应该是，layout_constraintTop_toTopOf是让当前控件的上边对齐于目标控件的上边，layout_constraintTop_toBottomOf是让当前控件的上边对齐于目标控件的下边。

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="200dp"
        android:layout_height="40dp"
        tools:text="A"
        android:textSize="16sp"
        android:gravity="center"
        android:id="@+id/textview1"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="0dp"
        app:layout_constraintHorizontal_bias="0.5"/>

    <TextView android:layout_width="80dp"
        android:layout_height="wrap_content"
        tools:text="B"
        android:textSize="16sp"
        android:id="@+id/textview2"
        android:textColor="@color/black"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        app:layout_constraintTop_toTopOf="@+id/textview1"/>

    <TextView android:layout_width="80dp"
        android:layout_height="wrap_content"
        tools:text="C"
        android:textSize="16sp"
        android:id="@+id/textview3"
        android:background="@android:color/holo_green_dark"
        android:gravity="center"
        app:layout_constraintTop_toBottomOf="@+id/textview1"/>
</android.support.constraint.ConstraintLayout>
           

最后呈现的效果如下图：

果然，B的上边跟A的上边是对齐的，C的上边是跟A的上边对齐的，此处对齐的意思是y坐标值一样。

4、layout_constraintBottom_toTopOf和layout_constraintBottom_toBottomOf

应该就是，layout_constraintBottom_toTopOf是让当前控件的下边对齐于目标控件的上边，layout_constraintBottom_toBottomOf是让当前控件的下边对齐于目标控件的下边。

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="200dp"
        android:layout_height="40dp"
        tools:text="A"
        android:textSize="16sp"
        android:gravity="center"
        android:id="@+id/textview1"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="40dp"
        app:layout_constraintHorizontal_bias="0.5"/>

    <TextView android:layout_width="80dp"
        android:layout_height="wrap_content"
        tools:text="B"
        android:textSize="16sp"
        android:id="@+id/textview2"
        android:textColor="@color/black"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        app:layout_constraintBottom_toTopOf="@+id/textview1"/>

    <TextView android:layout_width="80dp"
        android:layout_height="wrap_content"
        tools:text="C"
        android:textSize="16sp"
        android:id="@+id/textview3"
        android:background="@android:color/holo_green_dark"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="@+id/textview1"/>
</android.support.constraint.ConstraintLayout>
           

最后呈现的效果如下：

5、layout_constraintBaseline_toBaselineOf

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="200dp"
        android:layout_height="40dp"
        tools:text="A"
        android:textSize="26sp"
        android:gravity="center"
        android:id="@+id/textview1"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="40dp"
        app:layout_constraintHorizontal_bias="0.5"/>

    <TextView android:layout_width="80dp"
        android:layout_height="wrap_content"
        tools:text="B"
        android:textSize="16sp"
        android:id="@+id/textview2"
        android:textColor="@color/black"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        app:layout_constraintBaseline_toBaselineOf="@+id/textview1"/>
</android.support.constraint.ConstraintLayout>
           

呈现效果如下图：

这个属性应该是为需要显示文字的控件提供的，绘制文字的时候有个baseline的概念，这个属性的作用就是让当前控件的文字的baseline和目标控件的文字的baseline对齐，即处于一条水平线上。

6、layout_constraintStart_toEndOf和layout_constraintStart_toStartOf

这个应该是和layout_constraintLeft_toLeftOf和layout_constraintLeft_toRightOf效果一样的。

7、layout_constraintEnd_toStartOf和layout_constraintEnd_toEndOf

这个应该是和layout_constraintRight_toLeftOf和layout_constraintRight_toRightOf效果一样的。

好了，本文就先了解ConstraintLayout这几个最基本属性的含义吧，其他属性都需要这些属性来辅助的，等有时间在进行拓展讲述。