這篇小文將講述我是如何根據建造者設計模式來實現一個全局Dialog。
如果各位看官還不太了解建造者設計模式,建議可以看一下我的上篇文章。
背景
在每個項目當中,都會封裝一些全局的樣式,比如全局Loading、全局Dialog等。
封裝這些功能是因為這些控件的使用頻率極高。
在我剛接手項目A的時候,項目A也不例外,擁有著全局的Dialog。
剛開始時我盡量寫一些侵入性低、仿照率高的代碼,避免影響到之前的邏輯。并且學習著如何使用項目A的框架,這個過程我相信大家都是一樣的。
當我用到Dialog的時候,我看到了項目A的全局Dialog,詳細代碼就不說了,給大家看一下項目A全局Dialog中的所有方法:
不知各位看官會不會被這么多的構造方法給嚇到。
這些構造方法都是隨著項目需求的增加而增加的。
大家都知道,一個完整Dialog包括的元素至少應該有:提示圖片、標題、描述文字、按鈕等。
但是這些元素都不是必須的:
在C頁面我彈出的Dialog可能只要做一個溫馨提示:一行描述文字外加一個確認按鈕。
在D頁面我可能彈出的是用戶退出登錄的二次確認窗口:標題+文字+兩個按鈕。
那么到這里,各位看官就能明白了,為什么會有那么多的構造方法。
沒錯,我們在new KLCustimDialog()的同時,需要把所有的參數都傳入進去。
這種寫法的問題以及維護成本之高,我就不做過多描述了,我就簡單給大家加個需求:
要求點擊Dialog外部不能取消Dialog。
想想這個需求下的構造方法,要添加幾個?
基本
當我剛看到建造者模式的時候,我真是又驚又喜,熱血沸騰!
我第一時間想到的就是重構項目A的全局Dialog!
大家都知道,Android中的AlertDialog
就是使用建造者模式來實現的。
在我模仿構思了一波之后,創建Dialog的代碼是這樣的:
Dialog.Builder builder = new Dialog.Builder(context);
builder.setTitle("提示");
builder.setMessage("確認退出登錄嗎?");
builder.setLeftText("取消");
builder.setRightText("確認");
builder.setOnclickListener(listener);
Dialog dialog = builder.creater();
dialog.show();
這樣寫似乎沒有什么問題了。
我們把Dialog的所有元素都默認隱藏,在調用某個元素的填充方法后,我們就將其顯示出來。
這樣我們就擺脫了無限多的構造方法,完美!
文章到這里就應該結束了?
怎么可能!我都沒變形呢!
我見別人的Builder模式都是這樣寫的:
Picasso.with(context)
.load(url)
.fit()
.config(XXX)
.placeholder(xxx)
.error(xxx)
.into(imageView);
上述代碼是使用Picasso來加載url圖片。
一行代碼完成。
帥不帥,想不想學?
所以我就想能不能用上面作為模板,來實現我們的全局Dialog。
話不多說,說干就干。
變形
完整代碼我已經上傳GitHub,看代碼我還是建議各位看官去我的GitHub上看,比較整潔。
最終實現的效果如下:
首先,讓我們來回想一下建造者模式的組成:
- Product:產品角色
- Builder:抽象的建造者
- ConcreteBuilder:具體的建造者
- Director:指揮者
接下來,我們再把這些成員轉化為我們的全局Dialog的成員:
- Product:Dialog就是我們制作出來的產品
- Builder:Dialog參數拼接抽象
- ConcreteBuilder:Dialog參數拼接細節
- Director:所有用到該Dialog的地方都是指揮者,它們決定著Dialog具體樣式。
思路有了,下面就開始動手吧,首先我們來創建Dialog的參數封裝,里面應該有Dialog所有組成元素:
private static class DialogParams {
private Context context;
//標題
private String title;
//標題字體大小
private int titleSizeSp;
//圖標資源
private int imageResource;
//圖標寬
private int imageWidth;
//圖標高
private int imageHeight;
//消息內容
private String message1;
//消息內容文字位置
private int message1Gravity = Gravity.CENTER;
//點擊外部是否可以取消
private boolean isCanCancel = true;
//左邊按鈕內容
private String leftButtonText;
//左邊按鈕顏色
private int leftBtColor;
//左邊點擊事件
private ConcreteBuilder.ButtonClickLister leftListener;
//右邊按鈕內容
private String rightButtontText;
//右邊邊按鈕顏色
private int rightBtColor;
//右邊按鈕點擊事件
private ConcreteBuilder.ButtonClickLister rightListener;
}
我使用了內部類去實現了整個Dialog,整個Dialog只有一個類,所以所有參數都是private并且沒有提供set、get。
并且我為了方便,省略了Builder抽象類,直接構造了Builder抽象類的實現ConcreteBuilder:
public static class ConcreteBuilder {
//持有Product對象
private DialogParams p;
ConcreteBuilder(Context context) {
p = new DialogParams();
p.context = context;
}
public ConcreteBuilder title(String text) {
p.title = text;
return builder;
}
public ConcreteBuilder titleSize(int spSize) {
p.titleSizeSp = spSize;
return builder;
}
public ConcreteBuilder imageResource(int imageResource) {
p.imageResource = imageResource;
return builder;
}
public ConcreteBuilder imageWidth(int imageWidth) {
p.imageWidth = imageWidth;
return builder;
}
public ConcreteBuilder imageHeight(int imageHeight) {
p.imageHeight = imageHeight;
return builder;
}
public ConcreteBuilder message(String text) {
p.message1 = text;
return builder;
}
public ConcreteBuilder messageGravity(int gravity) {
p.message1Gravity = gravity;
return builder;
}
public ConcreteBuilder canCancel(boolean isCanCancel) {
p.isCanCancel = isCanCancel;
return builder;
}
public ConcreteBuilder leftBt(String text, ButtonClickLister lister) {
p.leftButtonText = text;
p.leftListener = lister;
return builder;
}
public ConcreteBuilder leftBtColor(int color) {
p.leftBtColor = color;
return builder;
}
public ConcreteBuilder rightBtColor(int color) {
p.rightBtColor = color;
return builder;
}
public ConcreteBuilder rightBt(String text, ButtonClickLister lister) {
p.rightButtontText = text;
p.rightListener = lister;
return builder;
}
void clear() {
p = null;
}
public DialogProduct create() {
return new DialogProduct(p);
}
//按鈕點擊回調
public interface ButtonClickLister {
void onClick(DialogProduct dialog);
}
}
我們會發現每個參數拼接方法都會返回ConcreteBuilder,這里是實現一行代碼構建Dialog的關鍵。
參考Picasso的書寫方式,明顯可以看出它沒有進行new的行為,說明with()一定是靜態的,隨之with()返回的對象也必為靜態。
為了實現Picasso的書寫方式,我們這里也將ConcreteBuilder靜態,方便實現一句話創建Dialog。
接下來就是Dialog的代碼:
public class DialogProduct extends Dialog {
private TextView tvTitle;
private ImageView ivIcon;
private TextView tvMessage;
private TextView tvButtonLeft;
private TextView tvButtonRight;
private ImageView viewLine;
//持有Builder
private static ConcreteBuilder builder;
//模仿Picasso的書寫方式
public static ConcreteBuilder with(Context context) {
if (builder == null) {
builder = new ConcreteBuilder(context);
}
return builder;
}
private DialogProduct(DialogParams p) {
//設置沒有標題的Dialog風格
super(p.context, R.style.NoTitleDialog);
View contentView = LayoutInflater.from(p.context).inflate(R.layout.dialog_build, null);
setContentView(contentView);
tvTitle = contentView.findViewById(R.id.tv_title);
ivIcon = contentView.findViewById(R.id.iv_icon);
tvMessage = contentView.findViewById(R.id.tv_message);
tvButtonLeft = contentView.findViewById(R.id.tv_button_left);
tvButtonRight = contentView.findViewById(R.id.tv_button_right);
viewLine = contentView.findViewById(R.id.view_line);
//控件默認隱藏
tvTitle.setVisibility(View.GONE);
viewLine.setVisibility(View.GONE);
ivIcon.setVisibility(View.GONE);
tvMessage.setVisibility(View.GONE);
tvButtonLeft.setVisibility(View.GONE);
tvButtonRight.setVisibility(View.GONE);
//構建Dialog
setTitlText(p.title);
setTitlTextSize(p.titleSizeSp);
setImageResource(p.imageResource);
setImageWidth(p.imageWidth);
setImageHeight(p.imageHeight);
setTvMessage(p.message1);
setTvMessageGravity(p.message1Gravity);
setCancelableFlag(p.isCanCancel);
setLeftText(p.leftButtonText, p.leftListener);
setLeftBtColor(p.leftBtColor);
setRightText(p.rightButtontText, p.rightListener);
setRightBtColor(p.rightBtColor);
}
/**
* 設置標題
*
* @param title 標題文字
*/
private void setTitlText(String title) {
if (TextUtils.isEmpty(title)) {
return;
}
tvTitle.setVisibility(View.VISIBLE);
tvTitle.setText(title);
}
//......省略剩余控件代碼
}
寫完之后,我們來看看這個變形的建造者模式的Dialog是如何創建的:
DialogProduct.with(this)
.title("提示")
.message("您確認退出登錄嗎?")
.canCancel(false)
.leftBtColor(getResources().getColor(R.color.color_0090ff))
.rightBtColor(getResources().getColor(R.color.color_f96c59))
.leftBt("取消", new NormalDialog.ConcreteBuilder.ButtonClickLister() {
@Override
public void onClick(NormalDialog dialog) {
dialog.cancel();
}
})
.rightBt("確認", new NormalDialog.ConcreteBuilder.ButtonClickLister() {
@Override
public void onClick(NormalDialog dialog) {
Toast.makeText(BuilderActivity.this, "退出登錄成功!", Toast.LENGTH_SHORT).show();
dialog.cancel();
}
})
.create()
.show();
總結
DialogProduct的代碼我已經上傳到了GitHub,各位看官可以自行食用。
這個Dialog現在也是項目A中的全局Dialog,使用起來也非常方便。
這里有幾個細節可以和各位看官分享一下:
第一個就是按鈕的點擊事件設置,我將其與按鈕文字內容的設置綁定在一起。因為我認為你設置了按鈕,怎么可能會沒有點擊事件?
第二個就是按鈕中間的分割線,是與右邊按鈕綁定的, 所以當只有一個按鈕時,我們應該使用左邊的按鈕leftBt而不是右邊的。
基本上就是這樣啦!
希望這個Dialog可以給大家帶來一些靈感。