如何自定义一个圆角 Material Design 样式的 Dialog

Material Design 是谷歌推出的一套设计语言，它主张平面化、响应式和科技感的设计风格，被广泛应用于安卓和 Web 应用的设计中。其中，Dialog 是 Material Design 中的重要组件之一，用于在当前界面上弹出一个小窗口，展示一些额外的信息或者实现某种操作。默认情况下，Dialog 的边角是直角的，但是有时候我们需要自定义 Dialog 的样式，让它的边角变为圆角，以适应更多场景的设计需求。

在本篇文章中，我们将介绍如何自定义一个圆角 Material Design 样式的 Dialog，包括具体的实现方法以及需要注意的事项。同时，我们还会提供一些示例代码，帮助读者更好地掌握相关技能。

实现方法

要实现一个圆角 Material Design 样式的 Dialog，我们需要自定义 Dialog 的样式和布局。具体方法如下：

1. 创建一个自定义的 Dialog 类，继承自 Android SDK 自带的 Dialog 类。

public class CustomDialog extends Dialog {
    public CustomDialog(Context context) {
        super(context);
    }
}

1. 在 CustomDialog 中设置主题，使其继承自 Material Design 的主题。

public class CustomDialog extends Dialog {
    public CustomDialog(Context context) {
        super(context, R.style.Theme_MaterialComponents_Light_Dialog);
    }
}

1. 在 CustomDialog 的布局文件中，添加一个圆角的背景。

-- -------------------- ---- -------
----- ------------- ------------------
------------- ----------------------------------------------------------
    -----------------------------------
    ------------------------------------
    --------------------------------------------------------
    -------------------------------

    ---- -- ------ --- ---

---------------

1. 创建一个具有圆角效果的背景 drawable 文件。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
    <corners android:radius="@dimen/dialog_corner_radius" />
</shape>

1. 在 CustomDialog 中，设置圆角背景文件的 drawable。

public class CustomDialog extends Dialog {
    public CustomDialog(Context context) {
        super(context, R.style.Theme_MaterialComponents_Light_Dialog);
        getWindow().setBackgroundDrawableResource(R.drawable.dialog_rounded_background);
    }
}

至此，一个圆角 Material Design 样式的 Dialog 就完成了。

注意事项

在实现自定义 Dialog 的过程中，我们需要注意以下事项：

1. 自定义 Dialog 所使用的主题必须继承自 Material Design 的主题。

2. 自定义 Dialog 的布局文件必须设置一个圆角的背景。

3. 背景 drawable 文件的圆角大小，应该根据具体的设计需求来适当地调整。

4. 自定义 Dialog 的宽度和高度应该根据具体的设计需求来适当地调整。

示例代码

下面是一个完整的圆角 Material Design 样式的 Dialog 的示例代码：

public class CustomDialog extends Dialog {

    public CustomDialog(Context context) {
        super(context, R.style.Theme_MaterialComponents_Light_Dialog);
        setContentView(R.layout.custom_dialog);
        getWindow().setBackgroundDrawableResource(R.drawable.dialog_rounded_background);
    }
}

-- -------------------- ---- -------
---- ----------------- ---
------------- ----------------------------------------------------------
    -----------------------------------
    ------------------------------------
    --------------------------------------------------------
    -------------------------------

    ---------
        ------------------------------
        -----------------------------------
        ------------------------------------
        ----------------------------
        -------------------- ------
        --------------------------------------------------------------------------- --

    -------------
        --------------------------------
        -----------------------------------
        ------------------------------------
        ----------------------------
        -------------------------------

        ---------
            -----------------------------------
            ------------------------------------
            -------------------- --------
            ----------------------------------------------------------------------- --

    ---------------

    -------
        -------------------------------
        -----------------------------------
        ------------------------------------
        ----------------------------
        ----------------- --

---------------

<!-- dialog_rounded_background.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
    <corners android:radius="@dimen/dialog_corner_radius" />
</shape>

其中，@dimen/dialog_corner_radius 表示圆角的半径大小，可以在 dimens.xml 文件中进行定义。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cdff3be46428fe9e7c5b71