UI设计之Dialog

Dialog概述

dialog是应用向用户展示信息并提供一些的操作的一种通知形式，与toast不同，dialog会获取界面焦点，中断用户操作，这种方式比较突兀，用户体验不是很好，除了像登录场景、检测到用户作弊等情况，其他情况下还是要谨慎使用，更加推荐使用snackbar。

---

dialog的常见类型

1.默认dialog

Android封装了一个默认的AlertDialog,主要包括title、message、icon、积极/消极/中立三个按钮。示例代码如下：

AlertDialog.Builder normalDialog = new AlertDialog.Builder(this);
normalDialog.setTitle("普通Dialog");
normalDialog.setMessage("This is a normal dialog");
normalDialog.setNegativeButton("确认", null);
normalDialog.setPositiveButton("取消", null);
normalDialog.create()
.show();

2.列表dialog

经常有一个需求，弹出一个列表，让用户选择，很简单。示例代码如下：

        final String[] items = {"item1", "item2", "item3"};
        final AlertDialog.Builder listDialog = new AlertDialog.Builder(this);
        listDialog.setTitle("列表Dialog");
        listDialog.setItems(items, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.dismiss();
                Toast.makeText(MainActivity.this, items[which], Toast.LENGTH_SHORT)
                     .show();
            }
        });
        listDialog.create()
                  .show();

3.单选dialog

这个跟列表dialog所要实现的功能很像，只是列表项的监听器不一样。示例代码如下：

        final String[] items = {"后端", "前端", "移动端", "运维", "安全", "产品", "技术支持", "测试"};
        AlertDialog.Builder singleCheckDialog = new AlertDialog.Builder(this);
        singleCheckDialog.setTitle("单选Dialog");
        singleCheckDialog.setSingleChoiceItems(items, 0, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Toast.makeText(MainActivity.this, items[which], Toast.LENGTH_SHORT)
                     .show();
                dialog.dismiss();
            }
        });
        singleCheckDialog.setNegativeButton("取消", null);
        singleCheckDialog.create()
                         .show();

4.多选dialog

没啥好说的，直接上代码：

        final String[] items = {"后端", "前端", "移动端", "运维", "安全", "产品", "技术支持", "测试"};
        final boolean[] selected = {false, false, false, false, false, false, false, false,};
        AlertDialog.Builder multiCheckDialog = new AlertDialog.Builder(this);
        multiCheckDialog.setTitle("多选");
        multiCheckDialog.setIcon(R.mipmap.ic_launcher);
        multiCheckDialog.setMultiChoiceItems(items, selected, new DialogInterface.OnMultiChoiceClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which, boolean isChecked) {

                Toast.makeText(MainActivity.this, items[which] + isChecked, Toast.LENGTH_SHORT)
                     .show();
            }
        });
        multiCheckDialog.setPositiveButton("确定", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.dismiss();
                Toast.makeText(MainActivity.this, "确定", Toast.LENGTH_SHORT)
                     .show();
            }
        });
        multiCheckDialog.create()
                        .show();

5.输入dialog

dialog中包含一个edittext，让用户输入信息后确认返回。示例代码如下：

        final EditText editText = new EditText(this);
        AlertDialog.Builder inputDialog = new AlertDialog.Builder(this);
        inputDialog.setTitle("输入Dialog");
        inputDialog.setView(editText);
        inputDialog.setPositiveButton("确定", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Toast.makeText(MainActivity.this, editText.getText()
                                                          .toString() + "", Toast.LENGTH_LONG)
                     .show();
            }
        });
        inputDialog.setNegativeButton("取消", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.cancel();
            }
        });
        inputDialog.create()
                   .show();

6.日期和时间dialog

Android专门封装了日期和时间的dialog，方便使用。示例代码如下：

Calendar calendar = Calendar.getInstance();
//日期dialog
DatePickerDialog dialog =new DatePickerDialog(this, this, calendar.get(Calendar.YEAR),calendar.get(Calendar.MONTH),calendar.get(Calendar.DAY_OF_MONTH));
dialog.show();
//时间dialog
TimePickerDialog dialog =new TimePickerDialog(this, this,calendar.get(Calendar.HOUR_OF_DAY), calendar.get(Calendar.MINUTE),true);
dialog.show();

7.自定义dialog

开发中难免遇到现成的难以完美实现需求的问题，这时候就需要自定义dialog了，有两种写法，如果用得少，建议直接在代码里写就好，如果用得多，要实现重用，建议自己单写一个自定义dialog继承dialog。这部分代码太长了，就不直接贴代码了。

贴一个GitHub地址吧https://github.com/17859762411/DialogDemo