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這幾個最基本屬性的含義吧，其他屬性都需要這些屬性來輔助的，等有時間在進行拓展講述。