ConstraintLayout水平紧凑排列控件，不设match_parent的实现方法

嘿，这个问题我太熟悉了！你遇到的情况是因为当前的约束设置让ConstraintLayout把两个TextView分别往父布局的两端推，导致它们之间出现了不必要的空隙。好消息是，完全不需要用match_parent，也不用把背景改成ImageView，有两种简单的方法可以解决：

方法一：使用ConstraintLayout的水平链（推荐） #

ConstraintLayout的链可以让一组控件紧凑排列，同时保持灵活的布局控制。只需要给两个TextView设置水平链，并把链的样式设为packed即可：

修改后的布局代码：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/upgradeTo"
        style="@style/NewText.H2.Primary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:text="UPGRADE TO"
        app:layout_constraintBaseline_toBaselineOf="@id/premium"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/premium"
        <!-- 添加链样式和偏移，控制整体对齐方向 -->
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0" />

    <TextView
        android:id="@+id/premium"
        style="@style/NewText.H2.Accent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:background="@drawable/round_rect_separator"
        android:backgroundTint="#fff3f8"
        android:paddingLeft="12dp"
        android:paddingTop="4dp"
        android:paddingRight="12dp"
        android:paddingBottom="4dp"
        android:text="PREMIUM"
        app:layout_constraintStart_toEndOf="@+id/upgradeTo"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

• layout_constraintHorizontal_chainStyle="packed"：让链内的控件紧凑排列，直接消除中间的空隙
• layout_constraintHorizontal_bias="0"：控制整个链的位置，0是左对齐，0.5是居中，1是右对齐，你可以根据需求调整这个值

方法二：嵌套LinearLayout #

如果觉得链的设置有点绕，也可以把两个TextView放进一个水平方向的LinearLayout里，这样它们默认就会紧凑排列：

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/upgradeTo"
            style="@style/NewText.H2.Primary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:text="UPGRADE TO" />

        <TextView
            android:id="@+id/premium"
            style="@style/NewText.H2.Accent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp" <!-- 加个小间距让排版更美观 -->
            android:background="@drawable/round_rect_separator"
            android:backgroundTint="#fff3f8"
            android:paddingLeft="12dp"
            android:paddingTop="4dp"
            android:paddingRight="12dp"
            android:paddingBottom="4dp"
            android:text="PREMIUM" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

这种方法更直观，LinearLayout的wrap_content会自动包裹两个TextView，既保证PREMIUM的背景不会被过度拉伸，又能让它们紧凑排列。

两种方法都能完美解决你的问题，选哪个取决于你后续的布局扩展需求——如果之后还要给这组控件加其他复杂约束，用链的方式更灵活；如果只是简单的水平排列，LinearLayout更省心。

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