如何基于宽度调整View高度？ConstraintLayout实现ImageView均分布局

嘿，这个需求我熟！要在ConstraintLayout里实现类似LinearLayout权重的均分宽度，同时让每个ImageView保持正方形（宽高一致），其实用几个核心属性就能轻松搞定，下面给你详细方案：

核心思路 #

我们需要两个关键约束来达成目标：

• 让每个ImageView的宽度均分父布局的可用空间（替代LinearLayout的layout_weight）
• 强制ImageView的宽高比为1:1，确保高度随宽度自动调整为正方形

方案一：使用百分比宽度（直观易理解） #

这种方式直接给每个ImageView设置父宽度的25%（因为4个），再配合宽高比约束：

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/img1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/your_image_resource"
        <!-- 宽度占父布局的25% -->
        app:layout_constraintWidth_percent="0.25"
        <!-- 强制宽高比1:1，高度自动等于宽度 -->
        app:layout_constraintDimensionRatio="1:1"
        <!-- 横向约束：左贴父布局，右贴第二个ImageView -->
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/img2"/>

    <ImageView
        android:id="@+id/img2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/your_image_resource"
        app:layout_constraintWidth_percent="0.25"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/img1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/img3"/>

    <ImageView
        android:id="@+id/img3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/your_image_resource"
        app:layout_constraintWidth_percent="0.25"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/img2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/img4"/>

    <ImageView
        android:id="@+id/img4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/your_image_resource"
        app:layout_constraintWidth_percent="0.25"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/img3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

关键属性解释 #

• android:layout_width="0dp"：让ConstraintLayout根据layout_constraintWidth_percent来计算宽度，而不是固定值
• app:layout_constraintWidth_percent="0.25"：每个ImageView占用父布局宽度的25%，4个刚好填满横向空间
• app:layout_constraintDimensionRatio="1:1"：强制视图的宽高比为1:1，这样高度会自动匹配宽度，形成正方形
• 横向约束：通过left_toRightOf和right_toLeftOf将四个ImageView串联起来，确保它们紧密排列

方案二：使用约束链（更灵活，适合动态调整数量） #

如果以后可能需要修改ImageView的数量（比如改成3个），用约束链会更方便，不用调整百分比：

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/img1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/your_image_resource"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/img2"
        <!-- 设置横向约束链样式为spread，自动均分空间 -->
        app:layout_constraintHorizontal_chainStyle="spread"/>

    <ImageView
        android:id="@+id/img2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/your_image_resource"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/img1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/img3"/>

    <ImageView
        android:id="@+id/img3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/your_image_resource"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/img2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/img4"/>

    <ImageView
        android:id="@+id/img4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/your_image_resource"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toRightOf="@+id/img3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</android.support.constraint.ConstraintLayout>

约束链优势 #

• app:layout_constraintHorizontal_chainStyle="spread"：让链内的视图自动均分横向可用空间，无需手动设置百分比
• 后续修改视图数量时，只需调整约束关系，不用修改百分比参数，更灵活

注意事项 #

• 如果你使用的是AndroidX库，记得把android.support.constraint.ConstraintLayout替换为androidx.constraintlayout.widget.ConstraintLayout
• 确保ImageView的src设置了正确的图片资源，或者用background也可以，不影响布局逻辑

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