如何在ConstraintLayout中实现两行TextView在图片间自适应换行（避免覆盖右侧视图）

Hey there, I see exactly what's going on here. The issue is that your two TextViews on the left don't have a maximum width constraint—they just keep expanding horizontally as the text grows, which pushes into the space reserved for your right-side undo button container.

Here's the fixed layout code, with key changes highlighted:

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatImageView 
        android:id="@+id/image_slider" 
        android:layout_width="40dp" 
        android:layout_height="40dp" 
        android:layout_margin="8dp" 
        android:scaleType="centerInside" 
        app:layout_constraintBottom_toBottomOf="parent" 
        app:layout_constraintStart_toStartOf="parent" 
        app:layout_constraintTop_toTopOf="parent" 
        tools:src="@drawable/ic_error" />

    <!-- 修改点：宽度设为0dp，添加右侧约束到undo按钮容器 -->
    <TextView 
        android:id="@+id/txt_title_animation_native_cart" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_marginStart="8dp" 
        android:layout_marginEnd="8dp" <!-- 可选，增加和右侧的间距 -->
        android:textColor="@color/app_primary_medium" 
        android:textSize="15sp" 
        app:layout_constraintStart_toEndOf="@+id/image_slider" 
        app:layout_constraintEnd_toStartOf="@+id/constraint_undo_button"
        app:layout_constraintTop_toTopOf="@+id/image_slider" 
        tools:text="Title" />

    <!-- 修改点：同样设置宽度为0dp，右侧约束到undo按钮容器 -->
    <TextView 
        android:id="@+id/txt_subtitle_animation_native_cart" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="4dp" 
        android:layout_marginEnd="8dp" <!-- 可选，增加和右侧的间距 -->
        android:maxLines="2" 
        android:textColor="@color/app_grey_medium" 
        android:textSize="12sp" 
        app:layout_constraintStart_toStartOf="@+id/txt_title_animation_native_cart" 
        app:layout_constraintEnd_toStartOf="@+id/constraint_undo_button"
        app:layout_constraintTop_toBottomOf="@+id/txt_title_animation_native_cart" 
        tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t" />

    <androidx.constraintlayout.widget.ConstraintLayout 
        android:id="@+id/constraint_undo_button" 
        android:layout_width="31dp" 
        android:layout_height="match_parent" 
        android:layout_marginEnd="24dp" 
        android:orientation="vertical" 
        app:layout_constraintBottom_toBottomOf="parent" 
        app:layout_constraintEnd_toEndOf="parent" 
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.AppCompatImageView 
            android:id="@+id/image_undo" 
            android:layout_width="14dp" 
            android:layout_height="16dp" 
            android:src="@drawable/icon_loop" 
            android:visibility="gone" 
            app:layout_constraintBottom_toBottomOf="parent" 
            app:layout_constraintEnd_toEndOf="parent" 
            app:layout_constraintStart_toStartOf="parent" 
            app:layout_constraintTop_toTopOf="parent" 
            tools:src="@drawable/icon_loop" 
            tools:visibility="visible" />

        <TextView 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginTop="4dp" 
            android:gravity="center" 
            android:text="Ree" 
            android:textColor="@color/app_primary_medium" 
            android:textSize="12sp" 
            app:layout_constraintEnd_toEndOf="parent" 
            app:layout_constraintStart_toStartOf="parent" 
            app:layout_constraintTop_toBottomOf="@+id/image_undo" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

关键修改说明： #

• 设置TextView宽度为0dp：在ConstraintLayout中，0dp表示"match constraint"，也就是让控件的宽度由两侧的约束来决定，而不是内容的长度。
• 添加app:layout_constraintEnd_toStartOf="@+id/constraint_undo_button"：这会限制TextView的右侧不能超过undo按钮容器的左侧，这样文本就会在这个范围内自动换行，而不会覆盖右侧的布局。
• 可选：添加android:layout_marginEnd="8dp"：给TextView和右侧按钮之间留一点间距，让布局看起来更美观。

这样修改后，不管标题和副标题的文本多长，都会在左边图片和右边按钮之间的区域自动换行，再也不会覆盖右侧的按钮容器啦！

内容的提问来源于stack exchange，提问作者S.P.