欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

UI设计之Dialog

程序员文章站 2022-04-20 08:28:38
...

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

相关标签: UI Android