Android 之路 (5) - 对Dialog的简单封装

引言

前几篇文章都在对RxJava2和Retrofit的封装,没有 Dialog ,看上去还是比较生硬,所以本章就来对Dialog进行封装。

正文

DialogHelper

为保证Dialog的可扩展性和可替代性,我们在编码的时候不应该直接使用 new 的方式来创建和使用,而是应该对我们需要的组件再做一层中间件封装,对内部提供调用方法和接口,在未来出现替换组件的情况也只需要在中间件中替换相应的组件即可。

分析

本篇文章选用 android.support.v7.app.AlertDialog来进行封装,我们先确定出我们平常开发中需要的基础 Dialog 样式。如下表格:

方法名称 含义
showLoadingDialog 显示加载框,主要用在获取数据和提交数据中
showMessageDialog 显示没有等级的消息,只有一个确认按钮
showSuccessDialog 成功提示弹窗,有确定按钮
showWarningDialog 警告弹窗,有确定按钮
showErrorDialog 错误弹窗,有确定按钮
showConfirmDialog 确认弹窗,有取消和确定
dismissDialog 关闭弹窗显示

对于常用的方法暂时定义这么多.

创建和编写相关方法

前面定义了一些方法,现在需要进行方法的定义和重写,大多数的方法都是需要重写两个以上的,比方说showMessageDialog就有两种情况:

  1. 需要点击确定按钮后的回调,需要做后续的操作
  2. 不需要点击确定按钮的回调,单纯做消息提示

而对不同的情况我们需要做不同的封装,不说考虑的万分齐全,但求能把能想到的都实现,为的就是让我们在编码的时候更舒爽和快速。

操作回调接口

关于回调,我们可以写两个接口:

/**
 * 确认按钮点击的回调
 */
public interface OnDialogConfirmListener {
    /**
     * 确定按钮点击的回调
     * @param dialog 弹窗
     */
    void onDailogConfirmListener(AlertDialog dialog);
}

/**
 * 取消按钮点击的回调
 */
public interface OnDialogCancelListener {
    /**
     * 取消按钮点击的回调
     *
     * @param dialog 弹窗
     */
    void onDailogCancelListener(AlertDialog dialog);
}

DialogHelper内容

具体方法定义如下:

/**
 * 弹窗帮助类
 */
public class DialogHelper {

    /**
     * 显示 loading 弹窗,默认不能点击空白处进行取消
     *
     * @param loadingTip 信息提示
     */
    public void showLoadingDialog(String loadingTip) {

    }

    /**
     * 显示 loading 弹窗
     *
     * @param loadingTip 信息提示
     * @param cancelable 能不能点击空白的地方
     */
    public void showLoadingDialog(String loadingTip, Boolean cancelable) {

    }

    /**
     * 信息提示弹窗
     *
     * @param message 提示信息的内容
     */
    public void showMessageDialog(String message) {

    }

    /**
     * 信息提示弹窗
     *
     * @param message         提示信息的内容
     * @param confirmListener 确认按钮点击的回调
     */
    public void showMessageDialog(String message, OnDialogConfirmListener confirmListener) {

    }

    /**
     * 成功提示弹窗
     *
     * @param message 提示信息的内容
     */
    public void showSuccessDialog(String message) {

    }

    /**
     * 成功提示弹窗
     *
     * @param message         提示信息的内容
     * @param confirmListener 确认按钮点击的回调
     */
    public void showSuccessDialog(String message, OnDialogConfirmListener confirmListener) {

    }

    /**
     * 警告提示弹窗
     *
     * @param message 提示信息的内容
     */
    public void showWarningDialog(String message) {

    }

    /**
     * 警告提示弹窗
     *
     * @param message         提示信息的内容
     * @param confirmListener 确认按钮点击的回调
     */
    public void showWarningDialog(String message, OnDialogConfirmListener confirmListener) {

    }

    /**
     * 错误提示弹窗
     *
     * @param message 提示信息的内容
     */
    public void showErrorDialog(String message) {

    }

    /**
     * 错误提示弹窗
     *
     * @param message         提示信息的内容
     * @param confirmListener 确认按钮点击的回调
     */
    public void showErrorDialog(String message, OnDialogConfirmListener confirmListener) {

    }

    /**
     * 显示确认弹窗
     *
     * @param message         提示信息
     * @param confirmText     确认按钮文字
     * @param cancelText      取消按钮文字
     * @param confirmListener 确认按钮点击回调
     * @param cancelListener  取消按钮点击回调
     */
    public void showConfirmDialog(String message,
                                  String confirmText,
                                  String cancelText,
                                  OnDialogConfirmListener confirmListener,
                                  OnDialogCancelListener cancelListener) {

    }

    /**
     * 显示确认弹窗
     *
     * @param message         提示信息
     * @param confirmText     确认按钮文字
     * @param cancelText      取消按钮文字
     * @param confirmListener 确认按钮点击回调
     */
    public void showConfirmDialog(String message,
                                  String confirmText,
                                  String cancelText,
                                  OnDialogConfirmListener confirmListener) {

    }

    /**
     * 显示确认弹窗
     *
     * @param message         提示信息
     * @param confirmListener 确认按钮点击回调
     */
    public void showConfirmDialog(String message,
                                  OnDialogConfirmListener confirmListener) {

    }

    /**
     * 关闭弹窗
     */
    public void dismissDialog() {

    }
}

实现弹窗

实现弹窗这一步就以showSuccessDialog为例子,其他的就不一一的在文章中编写了,直接看代码即可,主要是以下步骤:

创建样式
创建不同的布局
解析布局
创建Dialog、设置布局、事件监听

AlertDialog样式
 <style name="AppAlertDialogStyle" parent="AlertDialog.AppCompat">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:background">@null</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>

Dialog截图

Dialog截图
创建布局xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_gravity="center">


    <LinearLayout
        android:layout_width="270dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="@dimen/margin"
        android:background="@drawable/dialog_shar_bg"
        android:clickable="true"
        android:focusable="true"
        android:minHeight="150dp"
        android:orientation="vertical"
        android:paddingTop="22dp">

        <ImageView
            android:id="@+id/iv_dialog_icon"
            android:layout_width="37dp"
            android:layout_height="37dp"
            android:layout_gravity="center_horizontal"
            android:src="@mipmap/icon_dialgo_complete" />

        <TextView
            android:id="@+id/tv_dialog_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/dp_4"
            android:paddingRight="@dimen/dp_4"
            android:paddingTop="@dimen/margin"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:lineSpacingExtra="@dimen/dp_4"
            android:text="重置密码成功"
            android:textColor="#333"
            android:textSize="14sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#e6e6e6" />

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

            <Button
                android:id="@+id/btn_confirm"
                style="@style/DialogCallActionStyle"
                android:layout_height="44dp"
                android:background="@drawable/dialog_bottom_button_background"
                android:text="确定"
                android:textColor="#2196F3"
                android:textSize="17sp" />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>
code

前面的布局前提条件也准备好了,接下来就是解析xml布局、创建dialog、设置值、事件,具体如下代码:

    /**
     * 成功提示弹窗
     *
     * @param message 提示信息的内容
     */
    public void showSuccessDialog(String message) {
        createHasIconDialog(R.mipmap.icon_dialog_success, message, null);
    }

    /**
     * 成功提示弹窗
     *
     * @param message         提示信息的内容
     * @param confirmListener 确认按钮点击的回调
     */
    public void showSuccessDialog(String message, OnDialogConfirmListener confirmListener) {
        createHasIconDialog(R.mipmap.icon_dialog_success, message, confirmListener);
    }
    
    /**
     * 显示有图标的弹窗
     */
    private void createHasIconDialog(int icon,
                                     String message,
                                     final OnDialogConfirmListener confirmListener) {
        //解析布局
        View mDialogView = mInflater.inflate(R.layout.dialog_has_tip_message, null);
        //顶部图标
        ImageView mIconView = mDialogView.findViewById(R.id.iv_dialog_icon);
        if (icon != -1) {
            mIconView.setImageResource(icon);
        } else {
            mIconView.setVisibility(View.GONE);
        }
        //消息
        mDialogView.<TextView>findViewById(R.id.tv_dialog_message).setText(message);
        //确认按钮
        initActionButton(mDialogView.<Button>findViewById(R.id.btn_confirm), "确定",
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (confirmListener != null) {
                            confirmListener.onDialogConfirmListener(mDialog);
                        }
                    }
                });
        //创建并显示
        createAndShowDialog(mDialogView, false);
    }

    /**
     * 创建和显示弹窗
     */
    private void createAndShowDialog(View mContentView, Boolean cancelable) {
        // 先关闭之前的弹窗
        dismissDialog();
        //创建弹窗
        mDialog = new AlertDialog.Builder(mActivity, mStyle)
                .setView(mContentView)
                .setCancelable(cancelable)
                .setOnCancelListener(this)
                .create();
        try {
            mDialog.show();
        } catch (Exception ignored) {
            ignored.printStackTrace();
        }
    }

    /**
     * 初始化点击按钮
     *
     * @param button   需要设置的按钮
     * @param showText 显示的文字
     */
    private void initActionButton(Button button, String showText, final View.OnClickListener onClickListener) {
        button.setText(showText == null ? "确定" : showText);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismissDialog();
                onClickListener.onClick(v);
            }
        });
    }
演示

接下来我们看看演示:

SuccessDialogExample

收尾

前面完成了一个Dialog的创建和显示,那么剩余的几个Dialog只需要按葫芦画瓢写完即可,这里由于篇幅的问题,代码就不一一放出,可以直接在底部的源码中查看,这里就放一个全部完工的gif演示图,顺便把登陆页面也给改造一下。

DialogHelper效果演示

DialogHelper效果演示

登陆完善

登陆完善

结束

总结

本篇简单的完成了对Dialog的封装,能够达到初步使用的效果,但还是需要根据实际项目的需求来不断的调整,在后面我们会对其不断的优化和改进,比如Dialog中用到的icon现在都是直接用的图片,后面会通过自定义的方式实现,还要加上动画。

本篇也就暂时告一段落。

源码地址 - tag- v0.05

微信公众号

AndroidRookie
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,081评论 25 707
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,654评论 2 59
  • 对话框 对话框是提示用户作出决定或输入额外信息的小窗口。 对话框不会填充屏幕,通常用于需要用户采取行动才能继续执行...
    牧童遥指2000阅读 3,799评论 6 11
  • 考虑一段简单的代码:$.post("Handle.ashx"); window.location.href = "...
    宁宁nn阅读 598评论 0 0