Kotlin自定义Dialog显示拥挤怪异，布局预览正常求助

我为自定义Dialog设计了布局并展示，却出现如图所示的拥挤怪异问题。布局文件无异常，且布局预览显示正常，请问问题出在哪里？

我的布局代码如下：

<?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="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:cardCornerRadius="10dp">

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

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/calendarYellow"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/eventTitleText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="20dp"
                    android:layout_marginTop="30dp"
                    android:text="Play football with friends"
                    android:textColor="@color/white"
                    android:textSize="24sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/eventTimeText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="20dp"
                    android:layout_marginTop="5dp"
                    android:drawableStart="@drawable/ic_time"
                    android:paddingBottom="20dp"
                    android:text="  SS - SS"
                    android:textColor="@color/blumedWhite"
                    android:textSize="16sp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/eventTitleText" />

                <ImageView
                    android:id="@+id/eventTypeK"
                    android:src="@drawable/ic_event_white"
                    android:layout_width="35dp"
                    android:layout_height="35dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    android:layout_marginBottom="20dp"
                    android:layout_marginEnd="25dp"/>

            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintTop_toBottomOf="@id/constraintLayout2">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/cons"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_constraintTop_toTopOf="parent">

                    <TextView
                        android:id="@+id/textView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="20dp"
                        android:text="Hatırlatıcılar"
                        android:textColor="@color/noteTitleColor"
                        android:textSize="22sp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_goneMarginTop="20dp"
                        android:paddingBottom="10dp"
                        android:paddingTop="40dp"/>

                    <TextView
                        android:paddingBottom="10dp"
                        android:paddingTop="40dp"
                        android:id="@+id/remindersTextTouchable"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="25dp"
                        android:drawableEnd="@drawable/ic_drop_down"
                        android:text="5 dakika önce"
                        android:textColor="@color/categoriesLogoColor"
                        android:textSize="16sp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                </androidx.constraintlayout.widget.ConstraintLayout>

                <TextView
                    android:id="@+id/guestsText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="20dp"
                    android:text="Misafirler"
                    android:textColor="@color/noteTitleColor"
                    android:textSize="22sp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/cons"
                    android:layout_marginTop="40dp"/>

                <TextView
                    android:id="@+id/guestsReal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="null"
                    android:textColor="@color/categoriesLogoColor"
                    android:textSize="20sp"
                    android:layout_marginStart="20dp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/guestsText"
                    android:paddingBottom="30dp"/>

                <ImageView
                    android:layout_width="35dp"
                    android:layout_height="35dp"
                    android:layout_marginEnd="30dp"
                    android:src="@drawable/ic_delete"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/guestsReal"
                    android:layout_marginBottom="30dp"/>

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

调用Dialog的代码如下：

val dialog = Dialog(requireContext())
dialog.setContentView(R.layout.event_show_dialog)
dialog.setCancelable(true)
dialog.show()

我怀疑是ConstraintLayout约束的问题，尝试过调整但无法解决，提前感谢您的帮助。

问题原因及解决方法 #

问题根本不在ConstraintLayout的约束，而是默认Dialog的Window没有设置合适的宽度和边距，导致布局被强制压缩。布局预览正常是因为预览时按match_parent宽度渲染，而Dialog默认Window宽度会尽量缩小，不会自适应布局的合理宽度。

解决方法一：修改Dialog的Window参数

在Dialog显示前，手动设置Window的宽度，并去掉默认背景避免遮挡CardView圆角：

val dialog = Dialog(requireContext())
dialog.setContentView(R.layout.event_show_dialog)
dialog.setCancelable(true)

// 关键代码：设置Window布局参数
dialog.window?.let { window ->
    val displayMetrics = resources.displayMetrics
    // 设置宽度为屏幕宽度减去左右各20dp的边距
    val dialogWidth = displayMetrics.widthPixels - dpToPx(40)
    val layoutParams = window.attributes
    layoutParams.width = dialogWidth
    layoutParams.gravity = Gravity.CENTER // 居中显示
    window.attributes = layoutParams
    // 去掉默认背景，让CardView的圆角正常显示
    window.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
}

dialog.show()

// 辅助工具方法：dp转像素
private fun dpToPx(dp: Int): Int {
    return (dp * resources.displayMetrics.density).toInt()
}

解决方法二：使用AlertDialog.Builder创建

用AlertDialog.Builder更方便控制布局，同样设置Window参数即可：

val dialogView = LayoutInflater.from(requireContext()).inflate(R.layout.event_show_dialog, null)
val dialog = AlertDialog.Builder(requireContext())
    .setView(dialogView)
    .setCancelable(true)
    .create()

dialog.window?.let { window ->
    val displayMetrics = resources.displayMetrics
    val dialogWidth = displayMetrics.widthPixels - dpToPx(40)
    val layoutParams = window.attributes
    layoutParams.width = dialogWidth
    window.attributes = layoutParams
    window.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
}

dialog.show()

补充说明

• 若需要Dialog宽度占满屏幕，直接把dialogWidth设为displayMetrics.widthPixels即可
• 也可以通过给布局根节点设置android:minWidth属性来限制最小宽度，但不如直接设置Window参数灵活

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