ConstraintLayout链式布局下动态视图高度适配问题

这个需求可以通过**ConstraintLayout的Barrier（屏障）**结合垂直链式布局实现，纯XML就能完成适配，不需要任何代码逻辑：

核心实现思路 #

1. 用Bottom Barrier关联ImageView和描述TextView的底部，Barrier会自动定位到两者中更靠下的位置
2. 标题和描述采用垂直packed链式布局，保证短文本时描述紧贴标题
3. 按钮的顶部直接约束到Barrier的底部，自动适配两种场景

完整XML示例 #

<?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="wrap_content"
    android:padding="16dp">

    <!-- 左侧ImageView，可根据需求调整尺寸 -->
    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/ic_launcher_foreground"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 标题TextView -->
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="标题文本"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/iv_icon"
        app:layout_constraintTop_toTopOf="@id/iv_icon" />

    <!-- 描述TextView -->
    <TextView
        android:id="@+id/tv_desc"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="这里是描述文本，内容可长可短"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="@id/tv_title"
        app:layout_constraintStart_toStartOf="@id/tv_title"
        app:layout_constraintTop_toBottomOf="@id/tv_title"
        <!-- 链式布局保证短文本时标题与描述紧贴 -->
        app:layout_constraintVertical_chainStyle="packed" />

    <!-- 关键：Bottom Barrier，自动取ImageView和描述文本的最低底部位置 -->
    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="iv_icon,tv_desc" />

    <!-- 按钮，自动适配底部位置 -->
    <Button
        android:id="@+id/btn_action"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="操作按钮"
        app:layout_constraintStart_toStartOf="@id/iv_icon"
        app:layout_constraintTop_toBottomOf="@id/barrier_bottom" />

</androidx.constraintlayout.widget.ConstraintLayout>

关键细节说明 #

• Barrier的作用：当描述文本较短时，Barrier与ImageView底部对齐；当描述文本过长超出ImageView高度时，Barrier自动移动到描述文本的底部
• 垂直链式布局：constraintVertical_chainStyle="packed"确保短文本场景下标题与描述紧密贴合，无多余间距
• 宽度设置：标题和描述用layout_width="0dp"（match_constraint），保证它们占满右侧剩余空间，避免文本换行异常

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