如何在CardView的ConstraintLayout中实现TextView上下排布并垂直居中

你的问题核心是左侧的text1和text2没有形成统一的垂直居中布局单元，导致布局计算时要么被挤压出边界，要么出现文字重叠。可以通过以下调整解决：

1. 让text1和text2组成垂直约束链，作为整体垂直居中于父布局
2. 增加text1与text2的间距，避免文字重叠
3. 适当增大内边距，避免内容贴近CardView边界

修改后的完整XML代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    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"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="10dp"
    app:cardBackgroundColor="@color/material_dynamic_neutral30"
    app:cardCornerRadius="20dp"
    app:cardElevation="10dp"
    app:cardMaxElevation="12dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="12dp"> <!-- 增大内边距避免内容贴边 -->

        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text1"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@id/text2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" <!-- 设置垂直链为紧凑模式 -->
            app:layout_constraintVertical_bias="0.5" /> <!-- 链整体垂直居中 -->

        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text2"
            android:layout_marginTop="4dp" <!-- 增加与text1的间距 -->
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/text1" />

        <TextView
            android:id="@+id/text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text3"
            android:textSize="30sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toLeftOf="@id/text4"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/text4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="text4"
            android:textSize="15sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

关键调整说明： #

• 通过app:layout_constraintVertical_chainStyle="packed"和app:layout_constraintVertical_bias="0.5"，让text1和text2组成的垂直链整体垂直居中于父布局
• 给text2添加android:layout_marginTop="4dp"，确保和text1之间保留足够间距，避免文字重叠
• 把ConstraintLayout的内边距从4dp增大到12dp，防止内容贴近CardView圆角边界造成视觉上的"超出"效果

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