如何在ConstraintLayout中实现高度与宽度相等的并排CardView正方形布局

没问题，这个需求用ConstraintLayout自带的宽高比例约束就能轻松搞定，完全不需要硬编码数值，具体操作如下：

核心修改点 #

只需要对两个CardView做两处关键修改：

• 将android:layout_height从wrap_content改为0dp（让约束系统接管高度计算）
• 添加app:layout_constraintDimensionRatio="1:1"（指定宽高比例为1:1，即正方形）

修改后的完整布局代码 #

<androidx.cardview.widget.CardView 
    android:id="@+id/cvOne" 
    style="@style/Tile" 
    android:layout_width="0dp" 
    android:layout_height="0dp" <!-- 改为0dp，交给约束控制高度 -->
    android:layout_marginStart="24dp" 
    android:layout_marginTop="8dp" 
    android:clickable="true" 
    android:clipChildren="false" 
    android:clipToPadding="false" 
    android:focusable="true" 
    android:visibility="visible" 
    app:layout_constraintEnd_toStartOf="@+id/cvTwo" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/cvChargeScheduleLayout"
    app:layout_constraintDimensionRatio="1:1"> <!-- 添加1:1比例约束 -->

    <androidx.constraintlayout.widget.ConstraintLayout 
        android:id="@+id/clOne" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:background="@color/white_screen_bg" 
        android:clipChildren="false" 
        android:clipToPadding="false" 
        android:padding="8dp">

        <TextView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="this is a fixed text"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView 
    android:id="@+id/cvTwo" 
    style="@style/Tile" 
    android:layout_width="0dp" 
    android:layout_height="0dp" <!-- 改为0dp，交给约束控制高度 -->
    android:layout_marginTop="8dp" 
    android:layout_marginEnd="24dp" 
    android:clipChildren="false" 
    android:clipToPadding="false" 
    android:visibility="visible" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintStart_toEndOf="@+id/cvOne" 
    app:layout_constraintTop_toBottomOf="@+id/cvChargeScheduleLayout"
    app:layout_constraintDimensionRatio="1:1"> <!-- 添加1:1比例约束 -->

    <androidx.constraintlayout.widget.ConstraintLayout 
        android:id="@+id/clTwo" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:background="@color/white_screen_bg" 
        android:clipChildren="false" 
        android:clipToPadding="false" 
        android:padding="8dp">

        <TextView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="this is a fixed text a bit longer....."/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

原理说明 #

你的CardView宽度已经通过Start和End约束设置为均分父布局宽度（layout_width=0dp），此时添加1:1的宽高比例约束后，ConstraintLayout会自动将高度计算为与宽度完全相等的数值，从而实现正方形效果。这个方案是自适应的——不管屏幕宽度怎么变化，两个CardView都会保持均等宽度的正方形，完全不需要关心具体像素值。

另外，你已经把内部ConstraintLayout的高度设为match_parent，这样内部的TextView会在正方形范围内显示，不会出现内容溢出的问题，这个设置是正确的。

内容的提问来源于stack exchange，提问作者BRDroid