动态ConstraintLayout布局适配求助：多文本场景对齐与截断

需求说明 #

需要实现如下动态布局，满足文本长度变化时的自适应调整：

| textviewX icon textviewY                   textviewZ |
| longlonglonglong_textviewX… icon textviewY textviewZ |
| textviewX icon longlonglonglong_textviewY… textviewZ |
| longlon_textviewX… icon longlon_textviewY… textviewZ |
| textviewX icon textviewY  longlonglonglong_textviewZ |

核心规则：

• textViewX、icon、textViewY组成左侧区域，整体左对齐
• textviewZ固定右对齐
• 文本过长时自动截断（显示“…”），适配5种场景：
  • 所有文本内容较短时
  • textviewX内容过长时
  • textviewY内容过长时
  • textviewX和textviewY内容均过长时
  • textviewZ内容过长且textviewX、textviewY内容较短时

现有问题 #

尝试过使用Guideline及app:layout_constraintHorizontal_chainStyle="packed"方案未成功，现有布局代码如下：

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_end="96dp" />
    <TextView
        android:id="@+id/from_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/iv_arrow"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_chainStyle="packed"
        tools:text="Long Long Long Long" />

    <ImageView
        android:id="@+id/iv_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/from_name"
        app:layout_constraintEnd_toStartOf="@id/to_name"
        app:layout_constraintTop_toTopOf="@id/from_name"
        app:layout_constraintBottom_toBottomOf="@id/from_name"
        app:layout_constraintHorizontal_chainStyle="packed" />

    <TextView
        android:id="@+id/to_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        app:layout_constraintStart_toEndOf="@id/iv_arrow"
        app:layout_constraintEnd_toStartOf="@+id/guideline_status"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constrainedWidth="true"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Longlonglong longlong" />

<androidx.appcompat.widget.AppCompatTextView
    android:id="@+id/status"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:ellipsize="end"
    android:gravity="center_vertical|end"
    android:maxLines="1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/guideline_status"
    tools:text="statussssssss" />

解决方案 #

问题核心是固定宽度的Guideline限制了左侧区域的动态调整，应通过横向约束链+权重分配实现空间的自适应分配，以下是修正后的布局代码：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingHorizontal="16dp"
    android:paddingVertical="8dp">

    <!-- 左侧区域：textviewX + icon + textviewY 组成紧凑横向链 -->
    <TextView
        android:id="@+id/from_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/iv_arrow"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_weight="1"
        tools:text="Long Long Long Long Long Long Long" />

    <ImageView
        android:id="@+id/iv_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="8dp"
        app:layout_constraintStart_toEndOf="@id/from_name"
        app:layout_constraintEnd_toStartOf="@id/to_name"
        app:layout_constraintTop_toTopOf="@id/from_name"
        app:layout_constraintBottom_toBottomOf="@id/from_name"
        app:srcCompat="@drawable/ic_arrow_right" />

    <TextView
        android:id="@+id/to_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        app:layout_constraintStart_toEndOf="@id/iv_arrow"
        app:layout_constraintEnd_toStartOf="@id/status"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintHorizontal_chainStyle="packed"
        tools:text="Longlonglong longlong longlong longlong" />

    <!-- 右侧textviewZ：自适应宽度，过长时截断 -->
    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:minWidth="60dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/to_name"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="statusssssssssssssssssssss" />

</androidx.constraintlayout.widget.ConstraintLayout>

关键调整说明 #

• 移除固定Guideline：以textviewZ作为左侧区域的终点约束，让左侧区域根据右侧剩余空间动态调整
• 横向约束链配置：textviewX、icon、textviewY、textviewZ形成完整横向链，packed样式保证左侧区域紧凑排列
• 权重分配：给textviewX和textviewY设置layout_constraintHorizontal_weight="1"，空间不足时按比例分配宽度并触发截断
• 约束宽度控制：保留layout_constrainedWidth="true"，确保TextView遵守约束限制并显示省略号
• 右侧textviewZ优化：设置wrap_content加minWidth，内容过长时自动截断，同时避免被压缩到不可见
• 间距优化：给icon添加水平margin，保证文本与图标间的合理间距

此布局可完美适配你提出的5种场景。

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