使用 DialogX 快速构建 Android App 对话框

4,609 阅读8分钟

使用 DialogX 快速构建 Android App 对话框

传统原生对话框组件存在着内存泄漏、自定义程度不足的问题,开发时常会因为遇到各式各样的奇葩崩溃而烦恼,面对着产品和设计师诸如“对话框圆角大一些”、“能不能照着iOS设计稿的模糊效果做”、“下滑列表界面自动关掉对话框”等等诸多需求又难以解决,又不想每次封装或编写一大堆的代码去实现某一个小小的提示框需求,你可以试试 DialogX,它足以满足大部分场景下快速完成对话框、阻断提示框、非阻断提示框、底部对话框等等各式各样的对话框组件,又能完美满足各种主题和功能扩展需求,极大地方便了开发流程,帮助你快速构建应用对话框功能。

DialogX 的 Github 地址:github.com/kongzue/Dia…

易用性对比

对比传统 AlertDialog,DialogX 具有很大的优势:

  • DialogX 采用全新的实现方式,默认 View 实现方式更为轻便,亦可选 Window、DialogFragment 实现方式,自由灵活。
  • DialogX 的启动与线程无关,你可以在任意线程启动 DialogX 而它都将自动在 UI 线程运行。
  • DialogX 的启动无需 context 参数,默认提供静态方法一句代码实现对话框的启动,使用更加方便。
  • 更自由,开发者可以轻松定制对话框中任何组件的样式,包括文本样式、按钮文字样式、菜单文本样式、输入文本样式,大到标题,小到提示消息都可以根据需要随意修改。
  • DialogX 采用主题分离设计,默认自带 Material 主题,可选引入 IOS、Kongzue、MIUI 等其他风格主题,大大减小 App 体积,同时提供了主题接口,如有定制需求完全可以自行实现一套私有主题。
  • 更低的耦合度,更少的问题,DialogX 可以在对话框正在运行的过程中随意关闭 Activity ,而无需担心以往 AlertDialog 等组件会引发的 WindowLeaked 错误。
  • 更流畅的体验,DialogX 的动画效果更加丰富,对话框启动动画采用非线性动画实现,更自带连贯的等待提示到完成错误动画过渡效果,让你的 APP 更具动感。
  • 所有主题默认支持亮暗色两种模式,只需一键配置即可实现亮暗色的对话框主题切换,更有自由的布局内容满足定制化需求,DialogX 也支持自动适应系统亮暗色模式切换,能够根据系统设置自动判断亮暗色显示效果的切换。
  • 轻松的实现对话框的生命周期管控以及沉浸式适配。

简单来讲,一般我们要编写一个 AlertDialog,完成一个简简单单的提示确认,至少需要以下代码:

AlertDialog Demo
//构建 AlertDialog Builder
AlertDialog.Builder builder = new AlertDialog.Builder(context);
builder.setTitle("标题");
builder.setMessage("这里是正文内容。");
builder.setCancelable(true);  //点击对话框以外的区域是否让对话框消失
builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialog, int which) {
        Toast.makeText(context, "你点击了是的", Toast.LENGTH_SHORT).show();
        dialog.dismiss();
    }
});
AlertDialog dialog = builder.create();
dialog.show();  //显示对话框

而构建一个 DialogX 的 MessageDialog,只需要:

MessageDialog Demo
MessageDialog.show("标题", "这里是正文内容。", "确定");

当然,你也可以根据自己的习惯使用 build 方法构建:

MessageDialog.build()
        .setTitle("标题")
        .setMessage("这里是正文内容。")
        .setOkButton("确定")
        .show();

单从代码量上来说,DialogX 都更为方便,其次 DialogX 还具备很多独特的优势,在编码的过程中你都会感觉到,编写一个想要的对话框将变得非常的简单。

DialogX 也支持 null 输入,只要你想,你可以指定任何元素不要显示,给它设置 null 即可。

满足需要的各式各样的组件

DialogX 包含多种组件,消息提示框 MessageDialog 和基于它的选择对话框、输入对话框 InputDialog,满足基础的对话框场景需求,默认为 Material 主题样式。

messagedialog.png

阻断式提示框 WaitDialog,以及提示框 TipDialog,适合需要强提示,同时阻止用户继续操作界面的场景,组合使用时,这两个组件可以衔接使用,即可以从 WaitDialog 处于显示时通过动画无缝衔接过度到 TipDialog,TipDialog 默认包含“完成”、“警告”、“错误”三种状态,WaitDialog 默认包含循环转圈、显示进度两种模式:

waitdialog.png

底部对话框 BottomDialog 满足屏幕下部弹出对话框的需求,Material 主题自带下滑关闭功能,也可以直接使用底部菜单 BottomMenu 快速完成用户选择需求。

bottomdialog.png

非阻断提示 PopTip 类似于 Toast,在显示提示时用户可以继续操作界面,可以快速设置显示内容、自定义显示时长,自定义图标和操作按钮

poptip.png

全屏对话框 FullScreenDialog 可以实现悬浮一个对话框界面层到当前 Activity 上,而 Activity 显示的内容将有一定“下沉”的动画效果,适用于需要全屏处理的操作需求:

fullscreendialog.png

另外 DialogX 还提供了 CustomDialog 以满足完全的自定义需求,在 CustomDialog 中,所有的一切基于你自己的 layout 布局实现,你还可以轻松控制背景遮罩、自己的布局需要显示的位置,甚至可以绑定显示到某一个 Activity 界面元素周围用于引导提示需求:

customdialog.png

高度的扩展性

DialogX 的各个对话框组件的扩展性都非常强,你可以通过 dialog.getDialogImpl() 获取对话框基础组件包,DialogImpl 对象包含对话框组件的所有内部 View 实例,也就是说,你完全可以获取并自定义任何元素,以达成你想要的效果。

例如,我们想获得一个基础的 MessageDialog 的 Title 文字的 View:

MessageDialog.show("标题", "这里是正文内容。", "确定")
        .setDialogLifecycleCallback(new DialogLifecycleCallback<MessageDialog>() {
            @Override
            public void onShow(MessageDialog dialog) {
                TextView titleView = dialog.getDialogImpl().txtDialogTitle;
                //已获取 titleView
            }
        });

也就是说,通过 DialogImpl,你可以直接操作对话框内的所有内部组件。

添加自定义布局 DialogX 也是相当的方便,你可以直接通过以下代码指定自定义布局,也可以很方便的操作其实例对象:

MessageDialog.show("这里是标题", "此对话框演示的是自定义对话框内部布局的效果", "确定", "取消")
        .setCustomView(new OnBindView<MessageDialog>(R.layout.layout_custom_view) {
            @Override
            public void onBind(MessageDialog dialog, View v) {
                ImageView imageView = v.findViewById(R.id.img_ico);
                //操作自定义布局中的 imageView
            }
        });

OnBindView 也可以预创建,在异步线程构建,以加快使用复杂自定义布局时的加载速度。

定制符合需要的主题

为了保证轻便易用,DialogX 默认使用 Material 主题,额外提供了 iOS、Kongzue、MIUI、Material You 等扩展主题包,考虑到节省空间,扩展主题资源包是单独引入的,你可以引入其他主题包,并通过简单设置让整个 App 的对话框样式焕然一新!

allstyle.png DialogX 采用了主题分离结构,主框架仅包含 Material 设计风格的对话框组件,您可以通过额外引入主题包来实现主题的扩展。

额外的,每套主题都包含亮色/暗色两种显示风格,您可以通过 DialogX 的设置自由切换对话框的显示效果。

当然了,应实际需求,根据设计师的要求你也可以自定义主题,通过使用 DialogX 提供的主题定制接口来实现自定义主题,或者对现有主题进行样式调整和修改,只需要重写现有主题内的接口即可。

强大的自定义性可以满足开发者满足定制高端样式的需要,DialogX 已经实装到很多已上架的产品中发挥着重要的作用,例如在 《给未来写封信》App 和 《Cutisan壁纸》App 中就是用了定制化的对话框样式,在各大应用商店都可以下载体验:

pb_to_future.jpg

pb_cutisan.jpg

除了主题,DialogX 也可以方便的构建各种功能,但考虑到这些功能可能并非所有 App 都需要用,直接集成可能会增加额外的 App 体积,因此 DialogX 也将其开源出来方便其他应用开发者进行修改或直接引入,目前已实现的有地址滚动选择对话框、日期滚动选择对话框、日历选择对话框(含日期区间选择功能)、分享选择对话框、自定义联动滚动选择对话框、底部弹出的评论输入对话框、选择文件对话框(含多选文件功能、文件类型筛选功能)、抽屉对话框等,你可以前往 DialogX Sample 查看和体验这些扩展模块

img_dialogx_sample.png

体验 DialogX

为了方便开发者在选择 DialogX 之前先行体验,可以前往 beta.kongzue.com/DialogXDemo 下载 Demo 进行尝试,也可以扫码下载体验:

download_demo_img.png

更多功能也可以前往 DialogX 的 Github Wiki查阅:github.com/kongzue/Dia…