android -------- ConstraintLayout 約束屬性（二）

ConstraintLayout 介紹 （一）

 

ConstraintLayout 最基本的屬性控制有如下幾個，即 layout_constraintXXX_toYYYOf 格式的屬性，即將「View A」的方向 XXX 置於 「View B」的方向 YYY 。當中，View B 能夠是父容器即 ConstraintLayout ，用「parent」來表示

相對位置屬性以下:

layout_constraintLeft_toLeftOf :當前View的左側和另外一個View的左側位置對齊，與RelativeLayout的alignLeft屬性類似

layout_constraintLeft_toRightOf :當前view的左側會在另外一個View的右側位置 與RelativeLayout的toRightOf屬性類似

layout_constraintRight_toLeftOf :當前view的右側會在另外一個View的左側位置 與RelativeLayout的toLeftOf屬性類似

layout_constraintRight_toRightOf :當前View的右側和另外一個View的右側位置對齊，與RelativeLayout的alignRight屬性類似

layout_constraintTop_toTopOf :頭部對齊，與alignTop類似

layout_constraintTop_toBottomOf :當前View在另外一個View的下側 與below類似

layout_constraintBottom_toTopOf :當前View在另外一個View的上方 與above類似

layout_constraintBottom_toBottomOf ：底部對齊，與alignBottom屬性類似

layout_constraintBaseline_toBaselineOf :文字底部對齊,與alignBaseLine屬性類似

layout_constraintStart_toEndOf :同left_toRightOf

layout_constraintStart_toStartOf :同left_toLeftOf

layout_constraintEnd_toStartOf :同right_toLeftOf

layout_constraintEnd_toEndOf :同right_toRightOf

 

舉例：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <!--當前View的右側和另外一個View的右側位置對齊，與RelativeLayout的alignLeft屬性類似-->
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Button1"
        app:layout_constraintLeft_toLeftOf="parent" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:text="Button2"
        app:layout_constraintLeft_toRightOf="@id/btn1" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="15dp"
        android:layout_marginTop="56dp"
        android:text="Button3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="56dp"
        android:text="Button4"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="底部左下角"
        app:layout_constraintBottom_toBottomOf="parent" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:text="底部右下角"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />


</android.support.constraint.ConstraintLayout>

效果圖：

              

 

 

layout_constraintBaseline_toBaselineOf （View A 內部文字與 View B 內部文字對齊）

舉例：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Button1" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="15dp"
        android:layout_marginTop="56dp"
        android:text="Button3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <!--底部 當前View在另外一個View的下側 與below類似-->
    <Button
        android:id="@+id/mmmna"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="15dp"
        android:text="Buttonnnnnnnnnn1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn2" />
    <!--layout_constraintTop_toTopOf :頭部對齊，與alignTop類似-->
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Buttonnnnnnnnnn2"
        app:layout_constraintTop_toTopOf="@+id/btn2" />


    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent" />


    <!--layout_constraintBottom_toBottomOf底部對齊-->
    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />


    <!--layout_constraintBottom_toTopOf:當前View在另外一個View的上方 與above類似-->
    <Button
        android:id="@+id/btn9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="15dp"
        android:layout_marginEnd="5dp"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/button8"
        app:layout_constraintRight_toRightOf="parent" />

    <!--文字底部對齊,與alignBaseLine屬性類似-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Buttonmmmmm"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn9" />


</android.support.constraint.ConstraintLayout>

效果圖：

            

    

 

幾個屬性的聯繫