Android如何让垂直排列的两个TextView等宽且背景无缝融合

最优实现方案 #

直接用ConstraintLayout作为外层容器，给外层设置统一的整体背景，从根源解决宽度适配和间隙问题：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dp"
    android:background="@drawable/bg_overlay_full" <!-- 替换为你的整体背景drawable -->
    android:paddingHorizontal="6dp"
    android:paddingTop="6dp"
    android:paddingBottom="6dp">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp" <!-- 0dp等于match_constraint，填充父容器宽度 -->
        android:layout_height="wrap_content"
        android:includeFontPadding="false"
        android:text="TextView1"
        android:textColor="?colorOnPrimary"
        android:textSize="13sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp" <!-- 可自定义两个文本的间距 -->
        android:layout_marginBottom="14dp"
        android:includeFontPadding="false"
        android:text="TextVie2 long"
        android:textColor="?attr/colorOnPrimary"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@id/tv1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

方案说明 #

• 外层ConstraintLayout宽度设为wrap_content，测量时会自动取两个子TextView的最大宽度作为自身宽度，无论哪个文本更长都能正确适配
• 两个子TextView宽度设为0dp（match_constraint），左右约束到父容器边缘，自然和父容器同宽，保证二者宽度完全一致
• 直接给外层容器设置统一背景，不需要给两个TextView分别设置上下背景，完全避免了间隙问题

如果你坚持使用LinearLayout方案 #

修复宽度适配问题 #

给LinearLayout添加android:measureWithLargestChild="true"属性，该属性会让LinearLayout测量时取所有子View的最大宽度作为自身宽度，不会出现短文本把整体宽度撑小、长文本被截断的问题。

修复间隙问题 #

1. 给两个TextView都添加android:includeFontPadding="false"属性，关闭文字自带的上下内边距
2. 检查bg_overlay_top和bg_overlay_bottom两个drawable，确认没有自带上下透明边距
3. 可以给下方TextView设置android:layout_marginTop="-1dp"抵消剩余微小缝隙

修改后的LinearLayout代码：

<androidx.appcompat.widget.LinearLayoutCompat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:measureWithLargestChild="true"
    android:layout_marginEnd="10dp">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_overlay_top"
        android:paddingStart="6dp"
        android:paddingTop="6dp"
        android:paddingEnd="6dp"
        android:includeFontPadding="false"
        android:text="TextView1"
        android:textColor="?colorOnPrimary"
        android:textSize="13sp"/>

    <TextView
        android:id="@+id/tv2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-1dp"
        android:layout_marginBottom="14dp"
        android:background="@drawable/bg_overlay_bottom"
        android:paddingStart="6dp"
        android:paddingEnd="6dp"
        android:paddingBottom="6dp"
        android:includeFontPadding="false"
        android:text="TextVie2 long"
        android:textColor="?attr/colorOnPrimary"
        android:textSize="16sp"
        android:textStyle="bold"/>

</androidx.appcompat.widget.LinearLayoutCompat>

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