Android ConstraintLayout双水平链布局：如何避免视图放大时重叠

我完全理解你的困扰——想要用ConstraintLayout实现左侧可变视图组和右侧固定视图组的分离布局，同时避免重叠或右组左移的问题。核心思路是把左右两组视图当作两个独立的水平链，通过组与组之间的约束来保证间距，而不是把所有视图串成一条全局链。

具体解决方案步骤： #

• 左侧4个视图组成紧凑链：保持它们的水平packed链，设置链的宽度为自适应内容（layout_constraintWidth_default="wrap"），这样左侧组只会占用自身内容所需的宽度，不会强行挤压右侧空间。
• 右侧2个视图组成固定位置链：同样将它们设为packed链，直接约束到父布局的右侧（layout_constraintEnd_toEndOf="parent"），同时让这个链的起始位置指向左侧链的结束位置，并添加固定间距。
• 移除全局链的隐含约束：确保左侧链的结束约束只关联到右侧链的起始，而不是让单个视图跨组直接约束，这样Android不会误判为全局链。

修改后的布局代码： #

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- 左侧4个视图组成的水平链 -->
    <TextView android:id="@+id/distance"
        style="@style/helveticaRoman15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:background="@drawable/bg_gray_car_location"
        android:gravity="center"
        android:maxLines="1"
        android:paddingStart="5dp"
        android:paddingTop="3dp"
        android:paddingEnd="5dp"
        android:paddingBottom="3dp"
        android:textColor="@color/gray"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap"
        tools:text="1,7 km" />

    <TextView android:id="@+id/freeKm"
        style="@style/helveticaRoman15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:autoSizeTextType="uniform"
        android:background="@drawable/bg_gray_car_location"
        android:gravity="center"
        android:maxLines="1"
        android:minWidth="82dp"
        android:paddingStart="5dp"
        android:paddingTop="3dp"
        android:paddingEnd="5dp"
        android:paddingBottom="3dp"
        android:text="@string/resource_view_free_km"
        android:textColor="@color/gray"
        app:layout_constraintEnd_toStartOf="@+id/yearOfConstruction"
        app:layout_constraintStart_toEndOf="@+id/distance"
        app:layout_constraintTop_toTopOf="@+id/distance"
        tools:text="100 vrije km" />

    <TextView android:id="@+id/yearOfConstruction"
        style="@style/helveticaRoman15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:autoSizeTextType="uniform"
        android:background="@drawable/bg_gray_car_location"
        android:gravity="center"
        android:maxLines="1"
        android:paddingStart="5dp"
        android:paddingTop="3dp"
        android:paddingEnd="5dp"
        android:paddingBottom="3dp"
        android:textColor="@color/gray"
        app:layout_constraintEnd_toStartOf="@+id/newIndicator"
        app:layout_constraintStart_toEndOf="@+id/freeKm"
        app:layout_constraintTop_toTopOf="@+id/distance"
        app:layout_constraintWidth_max="50dp"
        tools:text="bouwjaar" />

    <TextView android:id="@+id/newIndicator"
        style="@style/helveticaMedium15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp" <!-- 这里的margin就是左右组之间的固定间距 -->
        android:background="@drawable/bg_gray_car_location"
        android:fontFamily="@font/helvetica_neu_bold"
        android:gravity="center"
        android:paddingStart="5dp"
        android:paddingTop="3dp"
        android:paddingEnd="5dp"
        android:paddingBottom="3dp"
        android:text="@string/resource_view_free_km"
        android:textColor="@color/black"
        app:layout_constraintEnd_toStartOf="@+id/thumbImage"
        app:layout_constraintStart_toEndOf="@+id/yearOfConstruction"
        app:layout_constraintTop_toTopOf="@+id/yearOfConstruction"
        tools:text="nieuw" />

    <!-- 右侧2个视图组成的水平链 -->
    <ImageView android:id="@+id/thumbImage"
        android:layout_width="24dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:gravity="center_vertical"
        android:src="@drawable/ic_thumb"
        android:tint="@color/gray"
        app:layout_constraintBottom_toBottomOf="@+id/distance"
        app:layout_constraintEnd_toStartOf="@+id/numberOfBookings"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@+id/newIndicator"
        app:layout_constraintTop_toTopOf="@+id/distance" />

    <TextView android:id="@+id/numberOfBookings"
        style="@style/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:background="@color/yellow"
        android:textSize="@dimen/button_textview"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/distance"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/thumbImage"
        app:layout_constraintTop_toTopOf="@+id/distance"
        tools:text="100%" />

</android.support.constraint.ConstraintLayout>

关键修改说明： #

1. 给左侧链的第一个视图distance添加了app:layout_constraintWidth_default="wrap"，让左侧组整体宽度自适应内容，不会强行拉伸占满空间。
2. 移除了原有的Guideline和Barrier，因为右侧组直接约束到父布局右侧，不需要额外参考线。
3. 右侧两个视图组成了独立的packed链，通过layout_constraintEnd_toEndOf="parent"固定在右侧，同时layout_constraintStart_toEndOf="@+id/newIndicator"确保和左侧组保持固定间距。
4. 左侧组的最后一个视图newIndicator的layout_constraintEnd_toStartOf="@+id/thumbImage"，直接和右侧组的第一个视图关联，保证了两组之间的间距始终存在，且不会触发全局链的判定。

这样调整后，不管左侧显示几个视图，右侧的两个视图都会一直固定在屏幕右侧；当左侧视图内容变宽时，会被限制在右侧组左边的空间内，不会覆盖右侧视图，完美解决你的问题。

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