如何在ConstraintLayout中让两个TextView排版连贯如整句文本？

可以实现你要的效果，以下是两种实用方案，既能保证两个TextView的数据绑定独立性，又能实现连贯的整句排版效果：

方案一：ConstraintLayout 2.0+ 自带Flow控件 #

ConstraintLayout从2.0版本开始支持Flow流式布局，专门用来处理这类需要自动换行的多控件排版需求：

1. 确保依赖ConstraintLayout 2.0及以上版本（gradle中添加）：

implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

2. 布局示例：

<?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">

    <TextView
        android:id="@+id/tv_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{viewModel.firstText}"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/tv_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{viewModel.secondText}"
        android:textSize="16sp" />

    <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="tv_first,tv_second"
        app:flow_wrapMode="chain"
        app:flow_horizontalStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

关键属性说明：

• app:flow_wrapMode="chain"：当两个TextView总宽度超过父容器时，自动换行
• app:flow_horizontalStyle="packed"：让两个TextView紧密排列，视觉上完全像一段连贯文本

方案二：使用FlexboxLayout库 #

如果需要更灵活的流式排版控制，可以用Google官方的FlexboxLayout：

1. 添加依赖：

implementation 'com.google.android:flexbox:3.0.0'

2. 布局示例：

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout 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"
    app:flexWrap="wrap"
    app:alignItems="flex_start">

    <TextView
        android:id="@+id/tv_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{viewModel.firstText}"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/tv_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{viewModel.secondText}"
        android:textSize="16sp" />

</com.google.android.flexbox.FlexboxLayout>

关键属性说明：

• app:flexWrap="wrap"：内容超出父容器宽度时自动换行
• app:alignItems="flex_start"：保持两个TextView在同一基线对齐，排版连贯自然

注意事项 #

• 两个TextView的字体大小、颜色、行高要保持一致，避免视觉上的割裂感
• 不要给TextView设置左右margin，如需留白直接给父布局设置padding即可

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