为什么我的卡片视图在 Android Studio 中超出了整个宽度？

Question

我正在使用此卡片视图（蓝色）和回收器视图中的另一个卡片视图来显示发送和接收的消息。

但是卡片视图（蓝色）覆盖了整个宽度，正如您在图片中看到的那样，我无法阻止它。

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

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        android:maxWidth="200dp"
        app:cardBackgroundColor="#147EFB"
        app:cardCornerRadius="25dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

            <TextView
                android:id="@+id/OutgoingSender"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:layout_marginTop="15dp"
                android:layout_marginEnd="90dp"
                android:text="No sender available"
                android:textColor="#FFFFFFFF"
                android:textStyle="bold"
                app:layout_constraintEnd_toStartOf="@+id/OutgoingDate"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/OutgoingDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:layout_marginEnd="15dp"
                android:text="No date"
                android:textColor="#FFFFFFFF"
                android:textStyle="italic"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/OutgoingContent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dp"
                android:layout_marginBottom="15dp"
                android:text="No message content available"
                android:textColor="#FFFFFFFF"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="@+id/OutgoingSender"
                app:layout_constraintTop_toBottomOf="@+id/OutgoingSender" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

我尝试更改根元素宽度，并限制卡片视图的 maxWidth，但都没有帮助。

Answer 1

尝试以下代码片段。它将把整个卡片视图移动到右侧并将内容包裹在其周围。我发现不必要地使用 ConstraintLayout 作为根。 CardView 本身可以作为父级，这也会稍微优化布局渲染。我希望这有帮助

<?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"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp"
    android:layout_gravity="end">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/OutgoingSender"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="90dp"
            android:text="No sender available"
            android:textColor="#FFFFFFFF"
            android:textStyle="bold"
            app:layout_constraintEnd_toStartOf="@+id/OutgoingDate"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/OutgoingDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="15dp"
            android:text="No date"
            android:textColor="#FFFFFFFF"
            android:textStyle="italic"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/OutgoingContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:layout_marginBottom="15dp"
            android:text="No message content available"
            android:textColor="#FFFFFFFF"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/OutgoingSender"
            app:layout_constraintTop_toBottomOf="@+id/OutgoingSender" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>