建造者模式衍生的全局Dialog

作者: 黑色小老虎丶 | 来源:发表于2017-07-13 14:41 被阅读391次

    这篇小文将讲述我是如何根据建造者设计模式来实现一个全局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可以给大家带来一些灵感。

    相关文章

      网友评论

        本文标题:建造者模式衍生的全局Dialog

        本文链接:https://www.haomeiwen.com/subject/mivwhxtx.html