Alert Dialogs 是应用程序的重要组成部分。通常用于吸引用户注意重要事项。多亏了 Material Design 2.0，我们现在拥有更强大的 Dialog。首先，你需要添加 material components 依赖：

implementation 'com.google.android.material:material:1.1.0-alpha09'

不要忘记将 Activity Theme 继承为 MaterialComponent Theme 或其子主题。

基本实现

现在让我们使用 Builder 模式创建一个基本的 MaterialAlertDialog：

new MaterialAlertDialogBuilder(MainActivity.this)
                        .setTitle("标题")
                        .setMessage("你的消息放在这里。保持简短但清晰。")
                        .setPositiveButton("明白了", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i) {

                            }
                        })
                        .setNegativeButton("取消", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i) {

                            }
                        })
                        .show();

屏幕上的效果如下：

让我们与旧的 alert dialog 进行比较：

毫无疑问，新的 MaterialAlertDialog 看起来好多了。

AlertDialog 在配置更改时会丢失其内容。因此推荐使用 AppCompatDialogFragment。但为了本教程的简便性，我们将继续使用 MaterialAlertDialog。

样式化按钮

我们可以样式化 MaterialAlertDialog 的按钮，因为它们只是 MaterialButtons。可以设置轮廓按钮/无边框按钮、ripple 效果等。来看一个例子：

<style name="AlertDialogTheme">
        <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
        <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>
    </style>

    <style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="backgroundTint">@color/colorPrimaryDark</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>

    <style name="Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@android:color/darker_gray</item>
        <item name="android:textSize">14sp</item>
    </style>

new MaterialAlertDialogBuilder(MainActivity.this, R.style.AlertDialogTheme)
                .setTitle("标题")
                .setMessage("你的消息放在这里。保持简短但清晰。")
                .setPositiveButton("明白了", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .setNeutralButton("稍后", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .show();

切角形状对话框

现在我们可以在 Material Dialogs 上设置形状！让我们通过继承 ShapeAppearance 样式来创建一个切角形状的对话框。

<style name="CutShapeTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="shapeAppearanceMediumComponent">@style/CutShapeAppearance</item>
    </style>

    <style name="CutShapeAppearance" parent="ShapeAppearance.MaterialComponents.MediumComponent">

        <item name="cornerFamily">cut</item>
        <item name="cornerSize">10dp</item>
    </style>

现在只需在 builder 构造函数中设置样式：

new MaterialAlertDialogBuilder(MainActivity.this, R.style.CutShapeTheme)
                .setTitle("标题")
                .setMessage("你的消息放在这里。保持简短但清晰。")
                .setPositiveButton("明白了", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .setNeutralButton("稍后", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .show();

圆角形状对话框

<style name="RoundShapeTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="shapeAppearanceMediumComponent">@style/RoundShapeAppearance</item>
    </style>

    <style name="RoundShapeAppearance" parent="ShapeAppearance.MaterialComponents.MediumComponent">

        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">16dp</item>
    </style>

在之前的代码片段的 Dialog Builder 构造函数中设置上述样式，会得到如下效果：

这些设计是不是非常诱人！

自定义字体对话框

最后，我们也可以为按钮和标题设置自定义字体家族，如下所示：

<style name="CustomFont" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="fontFamily">@font/amatic</item>
        <item name="android:textAllCaps">false</item>
    </style>

这会给我们一个全新的外观对话框，如下所示：

本教程到此结束。上面使用的字体可在下方附带的源代码中获取。

AndroidMaterialComponentDialog

Github 项目链接