57
Android 之路 (5) - 对Dialog的简单封装
source link: http://fullscreendeveloper.cn/articles/2018/10/13/1539412875888.html?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
引言
前几篇文章都在对RxJava2和Retrofit的封装，没有 Dialog ，看上去还是比较生硬，所以本章就来对Dialog进行封装。
正文
DialogHelper
为保证Dialog的可扩展性和可替代性，我们在编码的时候不应该直接使用 new 的方式来创建和使用，而是应该对我们需要的组件再做一层 中间件 封装，对内部提供调用方法和接口，在未来出现替换组件的情况也只需要在 中间件 中替换相应的组件即可。
分析
本篇文章选用 android.support.v7.app.AlertDialog 来进行封装，我们先确定出我们平常开发中需要的基础 Dialog 样式。如下表格：
对于常用的方法暂时定义这么多.
创建和编写相关方法
前面定义了一些方法，现在需要进行方法的定义和重写，大多数的方法都是需要重写两个以上的，比方说 showMessageDialog 就有两种情况：
- 需要点击确定按钮后的回调，需要做后续的操作
- 不需要点击确定按钮的回调，单纯做消息提示
而对不同的情况我们需要做不同的封装，不说考虑的万分齐全，但求能把能想到的都实现，为的就是让我们在编码的时候更舒爽和快速。
操作回调接口
关于回调，我们可以写两个接口：
/**
* 确认按钮点击的回调
*/
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现在都是直接用的图片，后面会通过自定义的方式实现，还要加上动画。
本篇也就暂时告一段落。
软广
一个痴心妄想想成为一个全屏(栈)工程师的程序猿。
来来，关注一下吧！
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK