ConstraintLayout：如何展平此布局？

Posted 2023-04-18

【中文标题】ConstraintLayout：如何展平此布局？

【英文标题】：ConstraintLayout: How do I flatten this layout?

【发布时间】：2021-11-14 03:34:29

【问题描述】：

是否可以展平此布局（外部只有一个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_
    android:layout_>

    <com.google.android.material.card.MaterialCardView
        android:layout_
        android:layout_
        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_
            android:layout_
            android:padding="10dp">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/imageViewContainer"
                android:layout_
                android:layout_
                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_
                    android:layout_
                    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_
                android:layout_
                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>

【问题讨论】：

快速的方法是用简单的<View /> 替换ConstraintLayouts 并将孩子提升到与Views 相同的水平并将它们视为容器

【参考方案1】：

删除父级ContraintLayout，让MaterialCardview 成为父级。 然后只保留一个ConstraintLayout，因为如果您想在MaterialCardView 中拥有多个视图，则需要它。 第二个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_
    android:layout_
    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_
        android:layout_
        android:padding="10dp">

        <View
            android:id="@+id/imageViewContainer"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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>

【讨论】：

如果我让MaterialCardview 成为根，我如何使它具有 1:1 的比例？ layout_constraintDimensionRatio 仅在元素位于 ConstraintLayout 内时可用

你可能不需要这个比例