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的意图是通过对每个视图应用一些规则以避免嵌套来优化和展平布局的视图层次结构。

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

app:layout_constraintBottom_toBottomOf="@+id/view1"

[与RelativeLayout不同，ConstraintLayout提供偏差值，该偏差值用于相对于手柄（标有圆圈）以0％和100％的水平和垂直偏移定位视图。这些百分比（和分数）可在不同的屏幕密度和尺寸下无缝地定位视图。

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

Answer 2

将发送按钮开始约束条件赋予txtInputLayoutCaption

<?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">

    <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_share_active"
        android:tint="@color/gray"
        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="8dp"
        android:hint="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="36dp"
        android:layout_height="36dp"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_send"
        app:layout_constraintBottom_toBottomOf="@+id/txtInputLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/txtInputLayout"
        app:layout_constraintTop_toTopOf="@+id/txtInputLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>