如何用ConstraintLayout实现两个价格TextView并排且均可见？

需求说明 #

我需要实现两个价格TextView的布局，左侧为主价格TextView，右侧为副价格TextView，具体要求：

• 副价格TextView始终可见，末端锚定父布局末端
• 主价格TextView宽度随内容变化，末端对齐副价格TextView的起始端
• 副价格TextView始终紧邻主价格TextView末端

原布局代码 #

<TextView
    android:id="@+id/primary_price_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="@id/body"
    app:layout_constraintTop_toBottomOf="@+id/body"
    app:layout_constraintStart_toEndOf="@+id/image"
    app:layout_constraintEnd_toStartOf="@id/secondary_price_view"
    app:layout_constraintHorizontal_bias="0"
    android:maxLines="2"
    android:ellipsize="end"
    android:textAppearance="?android:attr/textAppearanceMedium"
    />
<TextView
    android:id="@+id/secondary_price_view"
    android:layout_marginStart="8dp"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_marginEnd="16dp"
    app:layout_goneMarginEnd="16dp"
    app:layout_constraintTop_toBottomOf="@+id/body"
    app:layout_constraintTop_toTopOf="@id/primary_price_view"
    app:layout_constraintStart_toEndOf="@id/dot"
    app:layout_constraintBottom_toBottomOf="@id/primary_price_view"
    app:layout_constraintVertical_bias="0"
    app:layout_constraintHorizontal_bias="0"
    app:layout_goneMarginStart="16dp"
    android:maxLines="1"
    android:ellipsize="end"
    android:visibility="gone"
    android:textAppearance="?android:attr/textAppearanceSmall"
    />

解决方案 #

你的布局存在约束冲突和错误配置，调整方案如下：

1. 修正副价格TextView的核心约束 #

• 移除错误的app:layout_constraintStart_toEndOf="@id/dot"，改为app:layout_constraintStart_toEndOf="@id/primary_price_view"，确保它紧跟主价格View
• 添加app:layout_constraintEnd_toEndOf="parent"（若父布局为指定ID则替换为对应ID，如@id/body），锚定父布局末端
• 将android:visibility="gone"改为visible，满足始终可见的需求
• 移除app:layout_constraintHorizontal_bias="0"，无需偏置干扰末端锚定

2. 调整主价格TextView的约束 #

• 移除重复的起始约束，保留正确的一条（比如主价格在image右侧则保留app:layout_constraintStart_toEndOf="@+id/image"）
• 保留app:layout_constraintEnd_toStartOf="@id/secondary_price_view"，确保末端对齐副价格起始端
• 保留0dp宽度，让它自动填充起始端到副价格之间的空间

3. 整理冗余约束 #

• 确保主副价格的垂直约束统一，保持上下边缘对齐，移除重复的app:layout_constraintTop_toBottomOf="@+id/body"（副价格只需对齐主价格的上下边缘即可）

修改后的完整布局代码 #

<TextView
    android:id="@+id/primary_price_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@+id/image"
    app:layout_constraintTop_toBottomOf="@+id/body"
    app:layout_constraintEnd_toStartOf="@id/secondary_price_view"
    android:maxLines="2"
    android:ellipsize="end"
    android:textAppearance="?android:attr/textAppearanceMedium"
    />

<TextView
    android:id="@+id/secondary_price_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="16dp"
    app:layout_constraintTop_toTopOf="@id/primary_price_view"
    app:layout_constraintBottom_toBottomOf="@id/primary_price_view"
    app:layout_constraintStart_toEndOf="@id/primary_price_view"
    app:layout_constraintEnd_toEndOf="parent"
    android:maxLines="1"
    android:ellipsize="end"
    android:visibility="visible"
    android:textAppearance="?android:attr/textAppearanceSmall"
    />

关键逻辑说明 #

• 副价格View通过constraintEnd_toEndOf="parent"固定在父布局右侧，constraintStart_toEndOf="@id/primary_price_view"保证和主价格View的间距
• 主价格View通过0dp宽度+两端约束，自动占据剩余空间，内容过长时触发ellipsize省略，同时始终对齐副价格的起始端

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