如何在Android Studio中用XML+Java实现Adobe XD设计的自定义Dialog

别担心，自定义Dialog其实没你想的那么复杂，我一步步教你把Adobe XD里的设计转成可运行的Android代码～

首先你需要把XD里的Dialog结构拆解成Android的布局控件，比如标题文本、内容区域、按钮组这些，然后用XML实现出来。举个常见的例子，假设你的XD设计是一个带圆角、自定义标题、内容文本和两个操作按钮的Dialog：

1. 先创建一个自定义的Dialog背景drawable（比如res/drawable/dialog_custom_bg.xml），用来实现XD里的圆角、阴影效果：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 对应XD里的背景色 -->
    <solid android:color="#FFFFFF"/>
    <!-- 对应XD里的圆角半径 -->
    <corners android:radius="16dp"/>
    <!-- 可选：添加阴影 -->
    <padding android:bottom="8dp" android:left="8dp" android:right="8dp" android:top="8dp"/>
</shape>

2. 然后创建Dialog的布局文件（比如res/layout/dialog_custom.xml），对应XD里的控件位置和样式：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/dialog_custom_bg"
    android:orientation="vertical"
    android:padding="24dp">

    <!-- XD里的标题文本 -->
    <TextView
        android:id="@+id/tv_dialog_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="自定义标题"
        android:textSize="20sp"
        android:textStyle="bold"
        android:textColor="#333333"/>

    <!-- XD里的内容文本 -->
    <TextView
        android:id="@+id/tv_dialog_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="这里是Dialog的内容区域，对应你XD里的设计"
        android:textSize="16sp"
        android:textColor="#666666"
        android:layout_marginTop="16dp"/>

    <!-- XD里的按钮组，用横向布局排列 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="24dp"
        android:gravity="end">

        <Button
            android:id="@+id/btn_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="取消"
            android:textColor="#999999"
            android:background="@null"
            android:layout_marginRight="16dp"/>

        <Button
            android:id="@+id/btn_confirm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="确认"
            android:textColor="#007AFF"
            android:background="@null"/>
    </LinearLayout>
</LinearLayout>

你只需要把上面的文本、颜色、尺寸、控件位置改成你XD设计里的参数就行。

接下来在你的Activity或者Fragment里，就可以调用这个自定义Dialog了，步骤如下：

// 在Activity的某个方法里（比如点击按钮触发）
public void showCustomDialog() {
    // 1. 创建Dialog实例，传入当前上下文
    Dialog customDialog = new Dialog(this);
    // 2. 去掉默认的标题栏（如果你的XD设计里没有默认标题栏的话）
    customDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    // 3. 设置自定义布局
    customDialog.setContentView(R.layout.dialog_custom);
    // 4. 找到布局里的控件，设置点击事件
    Button btnCancel = customDialog.findViewById(R.id.btn_cancel);
    Button btnConfirm = customDialog.findViewById(R.id.btn_confirm);
    TextView tvTitle = customDialog.findViewById(R.id.tv_dialog_title);
    TextView tvContent = customDialog.findViewById(R.id.tv_dialog_content);

    // 可以动态修改文本内容（如果需要的话）
    tvTitle.setText("你的自定义标题");
    tvContent.setText("你的自定义内容");

    // 取消按钮点击事件
    btnCancel.setOnClickListener(v -> {
        customDialog.dismiss(); // 关闭Dialog
    });

    // 确认按钮点击事件
    btnConfirm.setOnClickListener(v -> {
        // 这里写你点击确认后的逻辑
        Toast.makeText(MainActivity.this, "确认按钮被点击", Toast.LENGTH_SHORT).show();
        customDialog.dismiss(); // 关闭Dialog
    });

    // 5. 设置Dialog的一些属性，比如点击外部是否关闭
    customDialog.setCanceledOnTouchOutside(false);
    // 6. 设置Dialog的宽高（可选，根据你的XD设计调整）
    Window window = customDialog.getWindow();
    if (window != null) {
        WindowManager.LayoutParams params = window.getAttributes();
        params.width = WindowManager.LayoutParams.MATCH_PARENT; // 宽度占满屏幕
        params.height = WindowManager.LayoutParams.WRAP_CONTENT; // 高度自适应
        window.setAttributes(params);
    }

    // 7. 显示Dialog
    customDialog.show();
}

• 如果你的XD设计里有特殊的样式（比如按钮圆角、渐变背景），可以单独创建drawable文件来实现，然后给控件设置android:background
• 如果你想让Dialog的样式更统一，可以在styles.xml里定义自定义Dialog样式，然后在创建Dialog的时候传入这个样式，比如Dialog customDialog = new Dialog(this, R.style.CustomDialogStyle)
• 注意适配不同屏幕尺寸，尽量用dp作为单位，避免固定像素值
• 如果需要在Dialog里处理复杂逻辑（比如加载数据、输入框），可以把Dialog封装成一个单独的类，方便复用

内容的提问来源于stack exchange，提问作者Suraj Giri