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

引言

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

正文

DialogHelper

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

分析

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

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

创建和编写相关方法

前面定义了一些方法，现在需要进行方法的定义和重写，大多数的方法都是需要重写两个以上的，比方说 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截图

创建布局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);
            }
        });
    }

演示

接下来我们看看演示：

收尾

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

DialogHelper效果演示

登陆完善

结束

总结

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

本篇也就暂时告一段落。

源码地址 - tag- v0.05

软广

一个痴心妄想想成为一个全屏(栈)工程师的程序猿。

来来，关注一下吧！