Android 之路 (5) - 對Dialog的簡單封裝

安卓開發 · 發表 2018-10-13 14:42:09

摘要：引言前幾篇文章都在對RxJava2和Retrofit的封裝，沒有 Dialog ，看上去還是比較生硬，所以本章就來對Dialog進行封裝。正文 DialogHelper 為保證Dialog的可擴充套件性和可替代性，我們在編碼的時候不應該直接使用 new 的方式來建立...

引言

前幾篇文章都在對RxJava2和Retrofit的封裝，沒有 Dialog ，看上去還是比較生硬，所以本章就來對Dialog進行封裝。

正文

DialogHelper

為保證Dialog的可擴充套件性和可替代性，我們在編碼的時候不應該直接使用 new 的方式來建立和使用，而是應該對我們需要的元件再做一層 中介軟體 封裝，對內部提供呼叫方法和介面，在未來出現替換元件的情況也只需要在 中介軟體 中替換相應的元件即可。

分析

本篇文章選用 android.support.v7.app.AlertDialog 來進行封裝，我們先確定出我們平常開發中需要的基礎 Dialog 樣式。如下表格：

方法名稱	含義
showLoadingDialog	顯示載入框，主要用在獲取資料和提交資料中
showMessageDialog	顯示沒有等級的訊息，只有一個確認按鈕
showSuccessDialog	成功提示彈窗，有確定按鈕
showWarningDialog	警告彈窗，有確定按鈕
showErrorDialog	錯誤彈窗，有確定按鈕
showConfirmDialog	確認彈窗，有取消和確定
dismissDialog	關閉彈窗顯示

對於常用的方法暫時定義這麼多.

建立和編寫相關方法

前面定義了一些方法，現在需要進行方法的定義和重寫，大多數的方法都是需要重寫兩個以上的，比方說 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現在都是直接用的圖片，後面會通過自定義的方式實現，還要加上動畫。

本篇也就暫時告一段落。

Android-development-framework-evolution/releases/tag/v0.05" target="_blank" rel="nofollow,noindex">原始碼地址 - tag- v0.05

軟廣

一個痴心妄想想成為一個全屏(棧)工程師的程式猿。

來來，關注一下吧！