求助：用ConstraintLayout实现带固定宽高比的三ImageView布局

我来帮你搞定这个布局问题～ConstraintLayout完全能满足你的所有要求，之前的方案没成功大概率是约束和链的细节没调整到位，下面是具体的实现思路和代码：

核心逻辑拆解 #

• 高度控制：用垂直方向的百分比Guideline把父布局切成三等分，让三个ImageView各自占1/3的高度；
• ImageView B的宽高比：给B设置固定宽高比约束，确保它的宽高始终保持1:3（这里要注意，1:3代表宽度:高度=1:3，如果你的需求是高度:宽度=1:3，改成3:1就行）；
• A和C宽度相等：把三个ImageView设为水平链，给A和C设置相同的宽度权重，让它们自动平分B之外的剩余空间。

完整布局代码 #

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

    <!-- 垂直Guideline，将父布局高度三等分 -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.333" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.666" />

    <!-- ImageView A -->
    <ImageView
        android:id="@+id/img_a"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF6347"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/guideline_1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/img_b"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintWidth_weight="1" />

    <!-- ImageView B -->
    <ImageView
        android:id="@+id/img_b"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#4682B4"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toBottomOf="@id/guideline_1"
        app:layout_constraintBottom_toTopOf="@id/guideline_2"
        app:layout_constraintStart_toEndOf="@id/img_a"
        app:layout_constraintEnd_toStartOf="@id/img_c"
        app:layout_constraintDimensionRatio="1:3" />

    <!-- ImageView C -->
    <ImageView
        android:id="@+id/img_c"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#32CD32"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toBottomOf="@id/guideline_2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/img_b"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintWidth_weight="1" />

</androidx.constraintlayout.widget.ConstraintLayout>

关键细节说明 #

1. 高度约束：每个ImageView的高度设为0dp（match_constraint），通过top和bottom绑定到Guideline或父布局，确保高度严格占父布局的1/3；
2. B的宽高比：app:layout_constraintDimensionRatio="1:3"会让B的宽度始终是高度的1/3，系统会自动根据高度计算宽度；
3. 宽度分配：三个ImageView通过首尾约束形成水平链，spread_inside样式让A、C贴紧父布局左右边缘。给A和C设置layout_constraintWidth_weight="1"后，它们会平分B之外的剩余空间，自然保证宽度相同；
4. 背景色：我给三个ImageView加了不同背景色，方便你直观看到布局效果，实际使用时替换成你需要的图片即可。

为什么之前的方案没生效？ #

你之前的问题应该是没给A和C设置宽度权重，导致ConstraintLayout默认让三个View平分宽度，没有优先满足B的宽高比约束。加上权重后，系统会先确定B的宽度，再把剩余空间分给A和C，就能达到你想要的效果啦～

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