Android自定义Dialog

最新推荐文章于 2021-05-25 15:47:04 发布

原创最新推荐文章于 2021-05-25 15:47:04 发布 · 704 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#AlertDialog #Dialog #自定义Dialog

Android 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Android应用中自定义Dialog样式，包括创建MyDialog类继承Dialog，实现通用Dialog模板，定制标题、消息、按钮，并提供客户端使用方法及进一步优化建议。

简单说明下为什么要自定义Dialog

因为之前项目用的都是Android系统提供的AlertDialog来做对话框。那么问题就来了，如果这时需求要改变弹出框的样式呢？哈哈，恭喜你中奖了。

首先，你可能会想到使用Android的Style样式去自定义弹出框的样式，这样可以不改变Java代码，只需要改Style样式文件就可以了，想法很不错，现实很残酷。（我自己摸索大半天这种配制，改样式很难控制，而且很难达到效果，也可能是我水平有限，若有大神有好的办法，还请指教）

基于以上说的几点，在项目开始的时候，我们就应该写好通用的Dialog。

好吧，不多扯，开工！

先看效果图：

首先我们要写个MyDialog类继承Dialog，代码如下：

public class MyDialog extends Dialog {

    private TextView tv_title;
    private TextView tv_msg;
    private Button btn_cancel;
    private Button btn_ok;

    private View.OnClickListener btn_ok_listener;
    private View.OnClickListener btn_cancel_listener;

    private String title;
    private String msg;
    private String ok;
    private String cancel;

    public MyDialog(Context context) {
        super(context, R.style.MyDialogTheme);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.view_my_alert_dialog);
        getWindow().setBackgroundDrawableResource(android.R.color.transparent); //注意，我们是有圆角的，设置透明，可以将四个角透明掉。
        this.setCancelable(false);

        //初始化控件
        tv_title = (TextView) findViewById(R.id.tv_title);
        tv_msg = (TextView) findViewById(R.id.tv_msg);
        btn_cancel = (Button) findViewById(R.id.btn_cancel);
        btn_ok = (Button) findViewById(R.id.btn_ok);

        btn_ok.setText(ok);
        btn_cancel.setText(cancel);
        tv_title.setText(title);
        tv_msg.setText(msg);

        //设置 OK And Cancel OnClickListener
        btn_ok.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (btn_ok_listener != null) {
                    btn_ok_listener.onClick(btn_ok);
                }
            }
        });

        btn_cancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (btn_cancel_listener != null) {
                    btn_cancel_listener.onClick(btn_cancel);
                }
            }
        });
    }

    /**
     * 设置OnOKClickListener
     *
     * @param ok
     * @param onClickListener
     * @return
     */
    public MyDialog setButtonOK(String ok, View.OnClickListener onClickListener) {
        this.ok = ok;
        btn_ok_listener = onClickListener;
        return this;
    }

    /**
     * 设置OnCancelClickListener
     *
     * @param cancel
     * @param onClickListener
     * @return
     */
    public MyDialog setButtonCancel(String cancel, View.OnClickListener onClickListener) {
        this.cancel = cancel;
        btn_cancel_listener = onClickListener;
        return this;
    }

    /**
     * 设置标题
     *
     * @param title
     * @return
     */
    public MyDialog setTitle(String title) {
        this.title = title;
        return this;
    }

    /**
     * 设置消息
     *
     * @param msg
     * @return
     */
    public MyDialog setMsg(String msg) {
        this.msg = msg;
        return this;
    }
}

然后我们来实现布局（很简单不用多说） R.layout.view_my_alert_dialog

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

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:textColor="#000"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/tv_msg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:textSize="16sp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:layout_marginTop="10dp"
        android:background="#222" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_cancel"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_weight="1"
            android:background="@null" />

        <View
            android:layout_width="0.1dp"
            android:layout_height="match_parent"
            android:background="#222" />

        <Button
            android:id="@+id/btn_ok"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_weight="1"
            android:background="@null" />
    </LinearLayout>
</LinearLayout>

圆角背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp" />
    <solid android:color="#FFF" />
    <stroke
        android:width="0.1dp"
        android:color="#222"></stroke>
</shape>

还有个简单的样式（用来设置Dialog不显示系统默认的标题） R.style.MyDialogTheme

<style name="MyDialogTheme" parent="Base.Theme.AppCompat.Light.Dialog">
    <item name="android:windowNoTitle">true</item>
</style>

客户端使用方法跟也很简单：

myDialog = new MyDialog(MainActivity.this);
myDialog
        .setTitle("温馨提示：")
        .setMsg("您的智商余额不足，请及时充值！")
        .setButtonCancel("取消", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myDialog.dismiss();
            }
        }).setButtonOK("立即充值", new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               myDialog.dismiss();
            }
        });