您的位置:首页 > 产品设计 > UI/UE

Builder设计模式 - 构建整个应用的万能Dialog

2017-02-27 14:37 429 查看

1. 概述

  上一期的热修复相对来说有点难度,我其实也没往深里说如果实在看不懂可以看看视频,其实最主要的还是思路代码也就那么几行,这一期我们又回归到设计模式,相对来说要简单不少,这一期要讲的是一行代码如何显示所有弹出框效果。

  视频地址:http://pan.baidu.com/s/1gfwZfF1

  相关文章:

  2017Android进阶之路与你同行

  Builder设计模式 - 构建整个项目的万能Dialog

  Builder设计模式 - 构建整个应用的NavigationBar

  

  



2. 模式介绍

  

模式的定义

将一个复杂对象的构建与它的表示分离,使得不同的构建过程可以创建不同的显示,但其根本还是不变。

模式的使用场景

相同的方法,不同的执行顺序,产生不同的事件结果时;

多个部件或零件,都可以装配到一个对象中,但是产生的运行结果又不相同时;

产品类非常复杂,或者产品类中的调用顺序不同产生了不同的效能,这个时候使用建造者模式非常合适。

3. UML类图



角色介绍

- Product 产品类 : 产品的抽象类;

- Builder : 抽象类, 规范产品的组建,一般是由子类实现具体的组件过程;

- ConcreteBuilder : 具体的构建器;

- Director : 统一组装过程(可省略)。

4. 模式的简单实现

简单实现的介绍

电脑的组装过程较为复杂,步骤繁多,但是顺序却是不固定的。下面我们以组装电脑为例来演示一下简单且经典的builder模式。

实现源码

package com.dp.example.builder;

/**
* Computer产品抽象类, 为了例子简单, 只列出这几个属性
*
* @author mrsimple
*
*/
public abstract class Computer {

protected int mCpuCore = 1;
protected int mRamSize = 0;
protected String mOs = "Dos";

protected Computer() {

}

// 设置CPU核心数
public abstract void setCPU(int core);

// 设置内存
public abstract void setRAM(int gb);

// 设置操作系统
public abstract void setOs(String os);

@Override
public String toString() {
return "Computer [mCpuCore=" + mCpuCore + ", mRamSize=" + mRamSize
+ ", mOs=" + mOs + "]";
}

}

package com.dp.example.builder;

/**
* Apple电脑
*/
public class AppleComputer extends Computer {

protected AppleComputer() {

}

@Override
public void setCPU(int core) {
mCpuCore = core;
}

@Override
public void setRAM(int gb) {
mRamSize = gb;
}

@Override
public void setOs(String os) {
mOs = os;
}

}

package com.dp.example.builder;

package com.dp.example.builder;

/**
* builder抽象类
*
*/
public abstract class Builder {
// 设置CPU核心数
public abstract void buildCPU(int core);

// 设置内存
public abstract void buildRAM(int gb);

// 设置操作系统
public abstract void buildOs(String os);

// 创建Computer
public abstract Computer create();

}

package com.dp.example.builder;

public class ApplePCBuilder extends Builder {
private Computer mApplePc = new AppleComputer();

@Override
public void buildCPU(int core) {
mApplePc.setCPU(core);
}

@Override
public void buildRAM(int gb) {
mApplePc.setRAM(gb);
}

@Override
public void buildOs(String os) {
mApplePc.setOs(os);
}

@Override
public Computer create() {
return mApplePc;
}

}

package com.dp.example.builder;

public class Director {
Builder mBuilder = null;

/**
*
* @param builder
*/
public Director(Builder builder) {
mBuilder = builder;
}

/**
* 构建对象
*
* @param cpu
* @param ram
* @param os
*/
public void construct(int cpu, int ram, String os) {
mBuilder.buildCPU(cpu);
mBuilder.buildRAM(ram);
mBuilder.buildOs(os);
}
}

/**
* 经典实现较为繁琐
*
* @author mrsimple
*
*/
public class Test {
public static void main(String[] args) {
// 构建器
Builder builder = new ApplePCBuilder();
// Director
Director pcDirector = new Director(builder);
// 封装构建过程, 4核, 内存2GB, Mac系统
pcDirector.construct(4, 2, "Mac OS X 10.9.1");
// 构建电脑, 输出相关信息
System.out.println("Computer Info : " + builder.create().toString());
}
}


通过Builder来构建产品对象, 而Director封装了构建复杂产品对象对象的过程,不对外隐藏构建细节。

5. Android源码中的模式实现

在Android源码中,我们最常用到的Builder模式就是AlertDialog.Builder, 使用该Builder来构建复杂的AlertDialog对象。简单示例如下 :

//显示基本的AlertDialog
private void showDialog(Context context) {
AlertDialog.Builder builder = new AlertDialog.Builder(context);
builder.setIcon(R.drawable.icon);
builder.setTitle("头部");
builder.setMessage("内容");
builder.setPositiveButton("Button1",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {
setTitle("点击了对话框上的Button1");
}
})
        .setNeutralButton("Button2",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {
setTitle("点击了对话框上的Button2");
}
});
builder.create().show();  // 构建AlertDialog, 并且显示
}


效果就不演示了没什么好看的,如果是v7包中的AlertDialog还看得下去,如果是v4包中的惨目忍睹。下面我们看看AlertDialog的相关源码,你看的可能和我的不一样但大致差不多你懂的:

// AlertDialog
public class AlertDialog extends Dialog implements DialogInterface {
// Controller, 接受Builder成员变量P中的各个参数
private AlertController mAlert;

// 构造函数
protected AlertDialog(Context context, int theme) {
this(context, theme, true);
}

// 4 : 构造AlertDialog
AlertDialog(Context context, int theme, boolean createContextWrapper) {
super(context, resolveDialogTheme(context, theme), createContextWrapper);
mWindow.alwaysReadCloseOnTouchAttr();
mAlert = new AlertController(getContext(), this, getWindow());
}

// 实际上调用的是mAlert的setTitle方法
@Override
public void setTitle(CharSequence title) {
super.setTitle(title);
mAlert.setTitle(title);
}

// 实际上调用的是mAlert的setCustomTitle方法
public void setCustomTitle(View customTitleView) {
mAlert.setCustomTitle(customTitleView);
}

public void setMessage(CharSequence message) {
mAlert.setMessage(message);
}

// AlertDialog其他的代码省略

// ************  Builder为AlertDialog的内部类   *******************
public static class Builder {
// 1 : 存储AlertDialog的各个参数, 例如title, message, icon等.
private final AlertController.AlertParams P;
// 属性省略

/**
* Constructor using a context for this builder and the {@link AlertDialog} it creates.
*/
public Builder(Context context) {
this(context, resolveDialogTheme(context, 0));
}

public Builder(Context context, int theme) {
P = new AlertController.AlertParams(new ContextThemeWrapper(
context, resolveDialogTheme(context, theme)));
mTheme = theme;
}

// Builder的其他代码省略 ......

// 2 : 设置各种参数
public Builder setTitle(CharSequence title) {
P.mTitle = title;
return this;
}

public Builder setMessage(CharSequence message) {
P.mMessage = message;
return this;
}

public Builder setIcon(int iconId) {
P.mIconId = iconId;
return this;
}

public Builder setPositiveButton(CharSequence text, final OnClickListener listener) {
P.mPositiveButtonText = text;
P.mPositiveButtonListener = listener;
return this;
}

public Builder setView(View view) {
P.mView = view;
P.mViewSpacingSpecified = false;
return this;
}

// 3 : 构建AlertDialog, 传递参数
public AlertDialog create() {
// 调用new AlertDialog构造对象, 并且将参数传递个体AlertDialog
final AlertDialog dialog = new AlertDialog(P.mContext, mTheme, false);
// 5 : 将P中的参数应用的dialog中的mAlert对象中
P.apply(dialog.mAlert);
dialog.setCancelable(P.mCancelable);
if (P.mCancelable) {
dialog.setCanceledOnTouchOutside(true);
}
dialog.setOnCancelListener(P.mOnCancelListener);
if (P.mOnKeyListener != null) {
dialog.setOnKeyListener(P.mOnKeyListener);
}
return dialog;
}
}

}


可以看到,通过Builder来设置AlertDialog中的title, message, button等参数, 这些参数都存储在类型为AlertController.AlertParams的成员变量P中,AlertController.AlertParams中包含了与之对应的成员变量。在调用Builder类的create函数时才创建AlertDialog, 并且将Builder成员变量P中保存的参数应用到AlertDialog的mAlert对象中,即P.apply(dialog.mAlert)代码段。我们看看apply函数的实现 :

public void apply(AlertController dialog) {
if (mCustomTitleView != null) {
dialog.setCustomTitle(mCustomTitleView);
} else {
if (mTitle != null) {
dialog.setTitle(mTitle);
}
if (mIcon != null) {
dialog.setIcon(mIcon);
}
if (mIconId >= 0) {
dialog.setIcon(mIconId);
}
if (mIconAttrId > 0) {
dialog.setIcon(dialog.getIconAttributeResId(mIconAttrId));
}
}
if (mMessage != null) {
dialog.setMessage(mMessage);
}
if (mPositiveButtonText != null) {
dialog.setButton(DialogInterface.BUTTON_POSITIVE, mPositiveButtonText,
mPositiveButtonListener, null);
}
if (mNegativeButtonText != null) {
dialog.setButton(DialogInterface.BUTTON_NEGATIVE, mNegativeButtonText,
mNegativeButtonListener, null);
}
if (mNeutralButtonText != null) {
dialog.setButton(DialogInterface.BUTTON_NEUTRAL, mNeutralButtonText,
mNeutralButtonListener, null);
}
if (mForceInverseBackground) {
dialog.setInverseBackgroundForced(true);
}
// For a list, the client can either supply an array of items or an
// adapter or a cursor
if ((mItems != null) || (mCursor != null) || (mAdapter != null)) {
createListView(dialog);
}
if (mView != null) {
if (mViewSpacingSpecified) {
dialog.setView(mView, mViewSpacingLeft, mViewSpacingTop, mViewSpacingRight,
mViewSpacingBottom);
} else {
dialog.setView(mView);
}
}
}


实际上就是把P中的参数挨个的设置到AlertController中, 也就是AlertDialog中的mAlert对象。从AlertDialog的各个setter方法中我们也可以看到,实际上也都是调用了mAlert对应的setter方法。在这里,Builder同时扮演了上文中提到的builder、ConcreteBuilder、Director的角色,简化了Builder模式的设计。

6. 构建整个应用的万能Dialog

  

  AlertDialog其实在我们的开发过程中可能没卵用,一般设计师设计出来的基本都是仿照的IOS的效果,这样一来就算再好用也与我们无缘。而且在我们的开发过程中效果千奇百怪时而这样,时而那样头疼得很啊,接下来我们就打算采用系统已经提供好的Builder设计模式构建整个应用的万能Dialog,代码可以参考系统的AlertDialog,最终无论什么复杂的效果一行能搞定算得上勉勉强强。

public static class Builder {

private AlertController.AlertParams P;

public Builder(Context context) {
this(context, 0);
}

public Builder(Context context, int themeResId) {
P = new AlertController.AlertParams();
P.themeResId = themeResId;
P.context = context;
}

public Builder setText(int viewId, CharSequence text) {
P.textArray.put(viewId, text);
return this;
}

public Builder setOnClickListener(int viewId, View.OnClickListener listener) {
P.clickArray.put(viewId, listener);
return this;
}

public Builder setContentView(int layoutId) {
P.view = null;
P.layoutId = layoutId;
return this;
}

public Builder setContentView(View view) {
P.layoutId = 0;
P.view = view;
return this;
}

/**
* Sets whether the dialog is cancelable or not.  Default is true.
*
* @return This Builder object to allow for chaining of calls to set methods
*/
public Builder setCancelable(boolean cancelable) {
P.cancelable = cancelable;
return this;
}

/**
* Sets the callback that will be called if the dialog is canceled.
* <p>
* <p>Even in a cancelable dialog, the dialog may be dismissed for reasons other than
* being canceled or one of the supplied choices being selected.
* If you are interested in listening for all cases where the dialog is dismissed
* and not just when it is canceled, see
* {@link #setOnDismissListener(OnDismissListener) setOnDismissListener}.</p>
*
* @return This Builder object to allow for chaining of calls to set methods
* @see #setCancelable(boolean)
* @see #setOnDismissListener(OnDismissListener)
*/
public Builder setOnCancelListener(OnCancelListener onCancelListener) {
P.onCancelListener = onCancelListener;
return this;
}

/**
* Sets the callback that will be called when the dialog is dismissed for any reason.
*
* @return This Builder object to allow for chaining of calls to set methods
*/
public Builder setOnDismissListener(OnDismissListener onDismissListener) {
P.onDismissListener = onDismissListener;
return this;
}

/**
* Sets the callback that will be called if a key is dispatched to the dialog.
*
* @return This Builder object to allow for chaining of calls to set methods
*/
public Builder setOnKeyListener(OnKeyListener onKeyListener) {
P.onKeyListener = onKeyListener;
return this;
}

/**
* Creates an {@link AlertDialog} with the arguments supplied to this
* builder.
* <p/>
* Calling this method does not display the dialog. If no additional
* processing is needed, {@link #show()} may be called instead to both
* create and display the dialog.
*/
public BaseDialog create() {
// Context has already been wrapped with the appropriate theme.
final BaseDialog dialog = new BaseDialog(P.context, P.themeResId);
P.apply(dialog.mAlert);
dialog.setCancelable(P.cancelable);
if (P.cancelable) {
dialog.setCanceledOnTouchOutside(true);
}
dialog.setOnCancelListener(P.onCancelListener);
dialog.setOnDismissListener(P.onDismissListener);
if (P.onKeyListener != null) {
dialog.setOnKeyListener(P.onKeyListener);
}
return dialog;
}

/**
* Creates an {@link AlertDialog} with the arguments supplied to this
* builder and immediately displays the dialog.
* <p/>
* Calling this method is functionally identical to:
* <pre>
*     AlertDialog dialog = builder.create();
*     dialog.show();
* </pre>
*/
public BaseDialog show() {
final BaseDialog dialog = create();
dialog.show();
return dialog;
}
}


class AlertController {

private DialogViewHelper mViewHelper;
private BaseDialog mDialog;
private Window mWindow;

public AlertController(BaseDialog dialog, Window window) {
mDialog = dialog;
mWindow = window;
}

/**
* 获取Dialog
* @return
*/
public BaseDialog getDialog() {
return mDialog;
}

/**
* 获取window
* @return
*/
public Window getWindow() {
return mWindow;
}

public DialogViewHelper getViewHelper() {
return mViewHelper;
}

/**
* 设置View的辅助
* @param viewHelper
*/
public void setDialogViewHelper(DialogViewHelper viewHelper) {
this.mViewHelper = viewHelper;
}

/**
* 设置文本
* @param viewId
* @param text
*/
public void setText(int viewId, CharSequence text) {
mViewHelper.setText(viewId, text);
}

/**
* 设置点击事件
* @param viewId
* @param listener
*/
public void setOnClickListener(int viewId, View.OnClickListener listener) {
mViewHelper.setOnClickListener(viewId, listener);
}

/**
* 通过id获取View
* @param viewId
* @param <T>
* @return
*/
public <T extends View> T getView(int viewId) {
return mViewHelper.getView(viewId);
}
}


以后我们显示任何的弹出框效果都只需要一行了:

@Override
public void onClick(View v) {
BaseDialog dialog = new BaseDialog.Builder(this)
.setContentView(R.layout.detail_comment_dialog).fullWith()
.fromBottom(false)
.show();
}


不过这明明有四行,接下来我们来说一下好处,Builder设计模式的好处就不说了网上太多了,我们就只说在真正的开发中这么做的好处:

1. 良好的封装性, 使用建造者模式你不必知道内部的细节,只要知道我想要什么效果就行了;

2. 建造者独立,容易扩展,不过我们不需要扩展了,这么多年碰到的效果都在里面了;

3. 在对象创建过程中会使用到系统中的一些其它对象,这些对象在创建过程中不易得到;

4. 大大节省了代码量,按照我们之前的那种写法没个几行写不出这效果,这里就一行而且效果完全自定义。

视频地址:http://pan.baidu.com/s/1gfwZfF1

相关文章:

  2017Android进阶之路与你同行

  Android Builder设计模式 - 构建整个项目的万能Dialog

  Builder设计模式 - 构建整个应用的NavigationBar
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息