android - RelativeLayout 有效，而 ConstraintLayout 失败

Question

这里是 RelativeLayout 的代码，

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:gravity="center">

        <ImageView
            android:id="@+id/imgIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:minWidth="200dp"
            android:minHeight="200dp"
            android:src="@drawable/ic_baseline_description_24px"
            android:tint="@color/grey" />
    </RelativeLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/txtInputLayoutCaption"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="@dimen/dp8"
        android:layout_toStartOf="@+id/imgSend"
        android:hint="@string/caption">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editTextCaption"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fontFamily="@font/trebuchet" />

    </com.google.android.material.textfield.TextInputLayout>

    <ImageView
        android:id="@+id/imgSend"
        android:layout_width="@dimen/dp36"
        android:layout_height="@dimen/dp36"
        android:layout_alignTop="@+id/txtInputLayoutCaption"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_baseline_send_24px"
        android:tint="?attr/colorPrimary" />
</RelativeLayout>

RelativeLayout 输出

这里是约束布局代码，

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imgIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:minWidth="200dp"
        android:minHeight="200dp"
        android:src="@drawable/ic_baseline_description_24px"
        android:tint="@color/grey"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/txtInputLayout"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/dp8"
        android:hint="@string/caption"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imgSend"
        app:layout_constraintStart_toStartOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </com.google.android.material.textfield.TextInputLayout>

    <ImageView
        android:id="@+id/imgSend"
        android:layout_width="@dimen/dp36"
        android:layout_height="@dimen/dp36"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_baseline_send_24px"
        android:tint="?attr/colorPrimary"
        app:layout_constraintBottom_toBottomOf="@+id/txtInputLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/txtInputLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

这里是约束布局代码的输出。

注意:我正在使用 androidx.constraintlayout:constraintlayout:2.0.0-beta2

Answer 1

ConstraintLayout 的目的是通过对每个 View 应用一些规则以避免嵌套来优化和展平布局的 View 层次结构。

规则让您想起 RelativeLayout，例如将左侧设置为其他 View 的底部。

app:layout_constraintBottom_toBottomOf="@+id/view1"

与 RelativeLayout 不同，ConstraintLayout 提供偏移值，用于根据相对于 handle (用圆圈标记)的 0% 和 100% 水平和垂直偏移来定位 View 。这些百分比(和分数)提供了跨不同屏幕密度和尺寸的 View 的无缝定位。

app:layout_constraintHorizontal_bias="0.33" <!-- from 0.0 to 1.0 -->
app:layout_constraintVertical_bias="0.53" <!-- from 0.0 to 1.0 -->