android - 为什么在测量自定义 View /布局时 MaterialAlertDialog 这么慢？

Question

我正在从事一个业余爱好项目，我正在构建一个可以使用配套的 native Android 应用程序进行配置的自定义蓝牙 Remote 。一切正常，但我在使用自定义布局和 View 绑定(bind)的 MaterialAlertDialog 中遇到了这个奇怪的性能问题。
具体来说，在第一次显示对话框时，膨胀、测量、然后绘制对话框需要相当长的时间。根据我记录的一些 systrace，在启动 MaterialAlertDialogBu​​ilder 逻辑后，UI 在渲染下一帧之前挂起大约 1 到 2 秒。

对于上下文，Android Studio 的这张屏幕截图显示了我构建的 UI，这是 AlertDialog 的自定义 View 。

这些是我正在使用的相关库及其各自的版本

Kotlin 1.4.30
AndroidX AppCompat 1.3.0-beta01
AndroidX ConstraintLayout 2.0.4
AndroidX Fragment KTX 1.3.0
Material Components 1.3.0

这是这个布局的 XML

<?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="wrap_content"
    android:paddingHorizontal="24dp"
    android:paddingTop="24dp">

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/dialogEditPresetHotkeyButtonPosition"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:textAppearance="@style/TextAppearance.ctrl.Overline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textview.MaterialTextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:text="@string/edit_hotkey"
        android:textAppearance="@style/TextAppearance.ctrl.Headline6.Emphasis"
        app:layout_constraintEnd_toEndOf="@id/dialogEditPresetHotkeyButtonPosition"
        app:layout_constraintStart_toStartOf="@id/dialogEditPresetHotkeyButtonPosition"
        app:layout_constraintTop_toBottomOf="@id/dialogEditPresetHotkeyButtonPosition" />

    <androidx.appcompat.widget.AppCompatSpinner
        android:id="@+id/dialogEditPresetHotkeyGroup"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_marginTop="40dp"
        android:layout_marginEnd="1dp"
        android:background="@drawable/bg_spinner_key_groups"
        app:layout_constraintEnd_toStartOf="@id/dialogEditPresetHotkeyKeyContainer"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dialogEditPresetHotkeyButtonPosition" />

    <FrameLayout android:id="@+id/dialogEditPresetHotkeyKeyContainer"
        android:layout_width="0dp"
        android:layout_height="48dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/dialogEditPresetHotkeyGroup"
        app:layout_constraintTop_toTopOf="@+id/dialogEditPresetHotkeyGroup">

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/dialogEditPresetHotkeyKeyAlphanumeric"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingHorizontal="16dp"
            android:background="@drawable/bg_key"
            android:digits="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
            android:inputType="textCapCharacters"
            android:maxLength="1" />

        <androidx.appcompat.widget.AppCompatSpinner
            android:id="@+id/dialogEditPresetHotkeyKey"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_spinner_keys"
            android:visibility="gone" />

    </FrameLayout>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/dialogEditPresetHotkeyModifierShift"
        style="@style/Widget.ctrl.Button.Outline.Narrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:checkable="true"
        android:text="@string/shift"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dialogEditPresetHotkeyGroup" />

    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/dialogEditPresetHotkeyModifiers"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dialogEditPresetHotkeyModifierShift">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/dialogEditPresetHotkeyModifierCtrl"
            style="@style/Widget.ctrl.Button.Outline.Narrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ctrl" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/dialogEditPresetHotkeyModifierMeta"
            style="@style/Widget.ctrl.Button.Outline.Narrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/meta" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/dialogEditPresetHotkeyModifierAlt"
            style="@style/Widget.ctrl.Button.Outline.Narrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/alt" />

    </com.google.android.material.button.MaterialButtonToggleGroup>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/dialogEditPresetHotkeyModifierRShift"
        style="@style/Widget.ctrl.Button.Outline.Narrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkable="true"
        android:text="@string/rshift"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/dialogEditPresetHotkeyModifierShift" />

    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/dialogEditPresetHotkeyRModifiers"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dialogEditPresetHotkeyModifiers">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/dialogEditPresetHotkeyModifierRAlt"
            style="@style/Widget.ctrl.Button.Outline.Narrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ralt" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/dialogEditPresetHotkeyModifierRMeta"
            style="@style/Widget.ctrl.Button.Outline.Narrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rmeta" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/dialogEditPresetHotkeyModifierRCtrl"
            style="@style/Widget.ctrl.Button.Outline.Narrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rctrl" />

    </com.google.android.material.button.MaterialButtonToggleGroup>

</androidx.constraintlayout.widget.ConstraintLayout>

为了帮助保持我的 Fragment 的代码干净，我编写了一些 Kotlin 扩展函数来设置 MaterialAlertDialog，使用 ViewBinding，就像我也是在我的 Fragment 中使用。

class ViewBindingMaterialAlertDialogBuilder<VB : ViewBinding>(
    context: Context,
    viewBindingInflater: (LayoutInflater, ViewGroup?, Boolean) -> VB
) : MaterialAlertDialogBuilder(context) {
    val viewBinding: VB by lazy {
        viewBindingInflater(LayoutInflater.from(context), null, false)
    }
}
inline fun <VB: ViewBinding> Context.customViewAlertDialogBuilder(
    noinline viewBindingInflater: (LayoutInflater, ViewGroup?, Boolean) -> VB,
    cancelable: Boolean = false,
    showManually: Boolean = false,
    init: ViewBindingMaterialAlertDialogBuilder<VB>.() -> Unit
) = ViewBindingMaterialAlertDialogBuilder(this, viewBindingInflater).apply {
    setCancelable(cancelable)
    init()
    if (!showManually) show()
}
inline fun <VB : ViewBinding> ViewBindingMaterialAlertDialogBuilder<VB>.initCustomView(
    init: VB.() -> Unit
) = setView(viewBinding.apply(init).root)
inline fun MaterialAlertDialogBuilder.positiveButton(
    @StringRes text: Int,
    automaticallyDismiss: Boolean = true,
    crossinline action: () -> Unit
) = setPositiveButton(text) { dialog, _ -> if (automaticallyDismiss) dialog.dismiss(); action() }
inline fun MaterialAlertDialogBuilder.negativeButton(
    @StringRes text: Int,
    automaticallyDismiss: Boolean = true,
    crossinline action: () -> Unit
) = setNegativeButton(text) { dialog, _ -> if (automaticallyDismiss) dialog.dismiss(); action() }
inline fun MaterialAlertDialogBuilder.neutralButton(
    @StringRes text: Int,
    automaticallyDismiss: Boolean = true,
    crossinline action: () -> Unit
) = setNeutralButton(text) { dialog, _ -> if (automaticallyDismiss) dialog.dismiss(); action() }
inline fun MaterialAlertDialogBuilder.show(
    crossinline onShow: AlertDialog.() -> Unit
) = create().apply {
    setOnShowListener { onShow(it as AlertDialog) }
}.show()

然后我在我的 Fragment 中按如下方式使用它们。
注意:在进一步记录systrace 时，下面注释中描述的实际代码已被注释掉。这样做是为了确保初始化代码不会影响性能或扭曲数据。

context.customViewAlertDialogBuilder(DialogEditPresetHotkeyBinding::inflate, showManually = true) {
    initCustomView {
        //Populate TextView and set two adapters for the Spinners
    }
    positiveButton(R.string.save) {
        //Persist entered value to device
    }
    negativeButton(R.string.discard) {} //Simply dismisses
    neutralButton(R.string.clear) {
        //Persists default value to device
    }
    show {
        /*
        Set OnItemSelectedListeners for Spinners
        Add TextWatcher for EditText
        Check if entered values are valid (else disable Save button)
         */
    }
}

然后在物理设备 (LG G6 H870) 上清理、构建和运行我的应用程序后，我得到以下 systrace。
注意:我在运行此跟踪之前重新启动了手机，以确保在后台运行的应用程序数量尽可能少，以免影响结果。

为了更好地衡量(双关语)和性能比较，我在单独的 Fragment 中使用了相同的布局

class TestFragment : Fragment() {
    private var viewBinding: DialogEditPresetHotkeyBinding? = null

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        viewBinding = DialogEditPresetHotkeyBinding.inflate(inflater, container, false)
        return viewBinding?.root
    }

    override fun onDestroyView() {
        super.onDestroyView()
        viewBinding = null
    }
}

以及导航到此 Fragment 时的 systrace。
注意:我从“设置”中强制停止了该应用程序，然后在再次清理和构建后运行它

---

所以，毕竟，我的问题归结为:

为什么在 AlertDialog 中扩展和测量自定义布局比在使用 Fragment 时慢得多？

我知道在我的 XML 中可能有一些优化，但它仍然需要超过一秒的时间来首次显示 AlertDialog，而使用 Fragment 时需要花费一半时间.
这是最好的情况，因为我已经看到它在后台运行的某些应用程序时高达 1.7 秒。这远高于 700 毫秒的 Android“卡顿”阈值，因此我也收到了 Davey! 日志消息、跳帧、停止的涟漪动画等。

附言我知道这是一个很长的问题，感谢您的阅读:)

---

编辑 1
添加我的 styles.xml 和 themes.xml，只有颜色和一些尺寸，我喜欢保持简单，而且我不是设计师 :)

styles.xml

<resources>
    <style name="Widget.ctrl.AlertDialog" parent="MaterialAlertDialog.MaterialComponents">
        <item name="backgroundInsetTop">@dimen/mtrl_alert_dialog_background_inset_start</item>
    </style>

    <style name="Widget.ctrl.Button.Outline.Narrow" parent="Widget.MaterialComponents.Button.OutlinedButton">
        <item name="android:minWidth">64dp</item>
    </style>
    <style name="Widget.ctrl.Button.Dialog" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
    </style>
    <style name="Widget.ctrl.Button.Dialog.Positive">
        <item name="android:textColor">@color/dialog_button_positive</item>
        <item name="rippleColor">@color/colorPrimary</item>
    </style>
    <style name="Widget.ctrl.Button.Dialog.Negative">
        <item name="android:textColor">@color/colorError</item>
        <item name="rippleColor">@color/colorError</item>
    </style>
    <style name="Widget.ctrl.Button.Dialog.Neutral">
        <item name="android:textColor">@color/colorOnSurface</item>
        <item name="rippleColor">@color/colorOnSurface</item>
    </style>

    <style name="TextAppearance.ctrl.Headline6" parent="TextAppearance.MaterialComponents.Headline6">
        <item name="android:textColor">@color/colorTextNormal</item>
    </style>
    <style name="TextAppearance.ctrl.Headline6.Emphasis">
        <item name="android:textColor">@color/colorTextEmphasis</item>
    </style>
    <style name="TextAppearance.ctrl.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
        <item name="android:textColor">@color/colorTextNormal</item>
    </style>
    <style name="TextAppearance.ctrl.Subtitle1.Emphasis">
        <item name="android:textColor">@color/colorTextEmphasis</item>
    </style>
    <style name="TextAppearance.ctrl.Body1" parent="TextAppearance.MaterialComponents.Body1">
        <item name="android:textColor">@color/colorTextNormal</item>
    </style>
    <style name="TextAppearance.ctrl.Body1.Emphasis">
        <item name="android:textColor">@color/colorTextEmphasis</item>
    </style>
    <style name="TextAppearance.ctrl.Body2" parent="TextAppearance.MaterialComponents.Body2">
        <item name="android:textColor">@color/colorTextNormal</item>
    </style>
    <style name="TextAppearance.ctrl.Overline" parent="TextAppearance.MaterialComponents.Overline">
        <item name="android:textColor">@color/colorTextNormal</item>
    </style>

    <style name="ShapeAppearance.ctrl.40dpCircle" parent="ShapeAppearance.MaterialComponents">
        <item name="cornerSize">20dp</item>
    </style>
</resources>

主题.xml

<resources>
    <style name="Theme.ctrl" parent="Theme.MaterialComponents.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryVariant">@color/colorPrimaryVariant</item>
        <item name="colorOnPrimary">@color/colorOnPrimary</item>
        <item name="colorSecondary">@color/colorSecondary</item>
        <item name="colorSecondaryVariant">@color/colorSecondaryVariant</item>
        <item name="colorOnSecondary">@color/colorOnSecondary</item>
        <item name="android:colorBackground">@color/colorBackground</item>
        <item name="colorOnBackground">@color/colorOnBackground</item>
        <item name="colorSurface">@color/colorSurface</item>
        <item name="colorOnSurface">@color/colorOnSurface</item>
        <item name="colorError">@color/colorError</item>
        <item name="colorOnError">@color/colorOnError</item>
        <item name="android:statusBarColor">@color/colorBackground</item>

        <item name="materialAlertDialogTheme">@style/ThemeOverlay.ctrl.MaterialAlertDialog</item>
    </style>

    <style name="ThemeOverlay.ctrl.MaterialAlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
        <item name="elevationOverlayEnabled">false</item>
        <item name="alertDialogStyle">@style/Widget.ctrl.AlertDialog</item>
        <item name="buttonBarPositiveButtonStyle">@style/Widget.ctrl.Button.Dialog.Positive</item>
        <item name="buttonBarNegativeButtonStyle">@style/Widget.ctrl.Button.Dialog.Negative</item>
        <item name="buttonBarNeutralButtonStyle">@style/Widget.ctrl.Button.Dialog.Neutral</item>
    </style>
</resources>

---

编辑 2:
我尝试使用 AndroidX AsyncLayoutInflater 来查看它是否有所作为。它确实...
……但感觉更糟。最终发生的是波纹动画不再中途挂起，而是完成，一秒钟后，对话框终于弹出。我觉得这让用户感到困惑，因为界面的一部分感觉响应迅速，但由于长时间测量，对话框显示有很多滞后。所以我不认为这是解决方法。

Answer 1

最后，事实证明我测试的设备非常慢......我从 LG G6 切换到 OnePlus 8T，现在对话框几乎瞬间弹出，哦好吧......