ConstraintLayout：如何展平此布局？

Question

是否可以展平此布局（外部只有一个ConstraintLayout）并保留以下内容：

• MaterialCardView 保持方形，整体内边距为 10dp
• ImageView 居中于一些正方形 View 上（背景设置为填充椭圆形，实现其圆形外观）
• ImageView 具有相对于平方 View 的固定宽度/高度比率
• TextView 位于平方 View 下方，垂直距离为 10dp
• 平方的View 在MaterialCardView 内部水平居中（或者可能在上方？）

它现在的样子和应该继续看起来的样子：

当前布局：

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

    <com.google.android.material.card.MaterialCardView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        app:cardCornerRadius="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:strokeColor="@color/primaryColor"
        app:strokeWidth="2dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="10dp">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/imageViewContainer"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:background="@drawable/round_bg"
                app:layout_constraintBottom_toTopOf="@id/textView"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHeight_default="percent"
                    app:layout_constraintHeight_percent=".58"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_default="percent"
                    app:layout_constraintWidth_percent=".58"
                    app:tint="@color/primaryTextColor"
                    tools:src="@drawable/ic_qrcode" />

            </androidx.constraintlayout.widget.ConstraintLayout>

            <TextView
                android:id="@+id/textView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:textAlignment="center"
                android:textColor="@color/primaryColor"
                android:textSize="17sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/imageViewContainer"
                tools:text="ItemName" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

1. 删除父级ContraintLayout，让MaterialCardview 成为父级。
2. 然后只保留一个ConstraintLayout，因为如果您想在MaterialCardView 中拥有多个视图，则需要它。
3. 第二个ConstraitLayout aka imageViewContainer 可以转换为View，它仍然会伪装成一个容器。

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView 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="wrap_content"
    android:layout_margin="10dp"
    app:cardCornerRadius="10dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:strokeColor="@color/colorPrimary"
    app:strokeWidth="2dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp">

        <View
            android:id="@+id/imageViewContainer"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/background_rounded"
            app:layout_constraintBottom_toTopOf="@id/textView"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_default="percent"
            app:layout_constraintHeight_percent=".58"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_default="percent"
            app:layout_constraintWidth_percent=".58"
            app:tint="@color/gray"
            tools:src="@drawable/ic_close" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:textAlignment="center"
            android:textColor="@color/colorPrimary"
            android:textSize="17sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/imageViewContainer"
            tools:text="ItemName" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>