ConstraintLayout的理解和相关术语的解释

ConstraintLayout已经出来很久了, 但一直没怎么对她进行研究, 现在终于可以写项目了.

听说布局很优美, 提高性能!

听说代码很简单, 很容易懂!

听说一学就会, 那么现在开整:

前期准备:

在项目的build.gradle中添加依赖: 

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

然后xml文件的根布局改成: 

androidx.constraintlayout.widget.ConstraintLayout

 

代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <!--
          如果报错   可以把鼠标的光标放在报错的标签   然后点击布局视图上方的魔法棒
    -->

    <!-- 在左边是left  -->
    <Button
        android:id="@+id/btn_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="在左边"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 在右边是right -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="在右边"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 水平居中是left和right -->
    <Button
        android:id="@+id/btn_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平居中"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 垂直居中是top和bottom -->
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="垂直居中"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- Center居中是top, bottom, left, right  -->
    <Button
        android:id="@+id/btn_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 右下角是right和bottom -->
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右下角"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <!-- 先居左left(也可以start), 在居下 即此button的顶部和btn_1的底部对齐 -->
    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="在左边的下面"
        app:layout_constraintStart_toStartOf="@+id/btn_1"
        app:layout_constraintTop_toBottomOf="@+id/btn_1" />

    <!-- 先水平居中, 在居下  即此button的顶部和btn_3的底部对齐 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平居中下面"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_3" />

    <!-- 先让此button在Center的上面  然后左对齐 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center Top"
        app:layout_constraintBottom_toTopOf="@id/btn_4"
        app:layout_constraintLeft_toLeftOf="@id/btn_4" />

    <!--
        先让此button在Center的左边 然后再对齐
        可以: app:layout_constraintTop_toTopOf="@id/btn_4"
        也可以: app:layout_constraintBaseline_toBaselineOf="@id/btn_4"
     -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center Left"
        app:layout_constraintBaseline_toBaselineOf="@id/btn_4"
        app:layout_constraintRight_toLeftOf="@id/btn_4"/>

    <!-- 先让此button在Center的下面  然后右对齐 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center Bottom"
        app:layout_constraintTop_toBottomOf="@id/btn_4"
        app:layout_constraintRight_toRightOf="@id/btn_4" />

    <!-- 先让此button在Center的右边  然后再对齐 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center Right"
        app:layout_constraintLeft_toRightOf="@id/btn_4"
        app:layout_constraintTop_toTopOf="@id/btn_4" />


</androidx.constraintlayout.widget.ConstraintLayout>

以上, 只是一部分的解释, 面对一般布局要求完全够用了, 后面据需添加!!!