为什么在测量自定义 view/layout 时 MaterialAlertDialog 这么慢?

Why is MaterialAlertDialog so slow when measuring a custom view/layout?

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

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

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

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,就像我也在我的 Fragments.

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
注意:我在 运行 此跟踪之前重新启动了我的 phone 以确保尽可能少的应用程序在后台 运行 不影响结果.

为了更好的衡量(双关语)和性能比较,我在单独的 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
    }
}

并且 systrace 导航到此 Fragment
注意:我从“设置”中 force-stopped 应用程序,然后 运行 在再次清理和构建之后


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

为什么在 AlertDialog 中膨胀和测量自定义布局比使用 Fragment 慢得多?

我知道我的 XML 中可能有一些优化可能,但它仍然需要超过一秒钟才能首次显示 AlertDialog,而使用 Fragment 时则需要一半.
这是一个 best-case 场景,因为我看到它在后台运行某些应用 运行 时高达 1.7 秒。这远高于 700 毫秒 Android 'jank' 阈值,因此我也收到 Davey! 日志消息、跳帧、暂停的波纹动画等

P.S。我知道这是一个很长的问题,感谢您的阅读:)


编辑 1
添加我的 styles.xmlthemes.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>

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

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