通用对话弹窗CommonDialog

Version 1.0

Created by chenchangjun on 18/1/12.

• 抽离普通基类见BaseNormalDialog
• 优化扩展方式 见3.1 基本扩展
• 添加必要注释

image.png

项目中,迭代了快8年了,对话框,种类繁多, 难以维护, 有的继承popwindow, 有的继承dialog, 有的继承dialogFragment....而且写法 各不相同.

所以,急需一次版本迭代, 来 优化 系统所有的弹窗. 本着有轮子就不会去 造轮子的原则~ 但是,逛了一圈,开源的 对话弹窗,都不能满足项目需求,

这就是要 造这个了轮子的初衷.

项目目前,有点粗糙,没有做精简优化,如果想引用,可以直接download然后,作为lib应用.

后期,我会随着项目迭代,进行优化.

项目地址

通用对话弹窗CommonDialog项目地址...

效果图

common_dialog.gif

调用

//通用弹框 生产类
public class DialogCreator {
    /**
     * 无标题,单btn弹窗
     *
     * @param mActivity
     * @param msg
     * @param strLeft
     * @param leftListener
     */
    public static BaseDialog showConfirmDialog(Context mActivity, String msg, String strLeft, OnLeftListener leftListener) {
        CommonNormalDialog confrimDialog = new CommonNormalDialog(mActivity);
        confrimDialog.setDialogType(DialogConfig.TYPE_HAS_NO_HEADER)
                .setContent(msg)
                .setContentGravity(DialogConfig.TYPE_GRIVITY_CENTER)
                .setConfirmBtn(strLeft, leftListener)
                .start();
        return confrimDialog;
    }



    /**
     * 无标题,单btn弹窗
     *
     * @param mActivity
     * @param msg
     * @param strLeft
     * @param leftListener
     */
    public static BaseDialog showTitleConfirmDialog(Context mActivity, String title, String msg, String strLeft, OnLeftListener leftListener) {
        CommonNormalDialog confrimDialog = new CommonNormalDialog(mActivity);
        confrimDialog.setDialogType(DialogConfig.TYPE_HAS_HEADER)
                .setTitle(title)
                .setContent(msg)
                .setContentGravity(DialogConfig.TYPE_GRIVITY_CENTER)
                .setConfirmBtn(strLeft, leftListener)
                .start();
        return confrimDialog;
    }
....
}

思路

1.定义顶级抽象类 BaseDialog,

装饰AlertDialog, 统一dialog样式, 并且用 模板方法模式 进行抽象约束 子类型为.
为了达到 易扩展,代码复用的角度, 将整体dialog,根据 功能区域 布局和加载分为3部分----

• 头部header: 扩展头部区域,像图片logo头部,带背景,大标题.
• 中间content: 主内容显示区域,比如输入框,内容详情等等.
• 底部footer:底部扩展区,主要用来放置 确认按钮等等.

    /**
     * 子类必须实现该方法用于显示在界面上的Dialog的Title部分
     *
     * @return title部分的显示的View，返回的titleView为null的话，Dialog将不显示title部分
     */
    protected abstract View initHeader();

    /**
     * 子类必须实现该方法用于显示在界面上的正文部分控件
     * @return content部分显示的内容，如果返回null，将会抛出异常
     */
    protected abstract View initContent();

    /**
     * 子类实现该方法用于显示底部的view
     *
     * @return bottom部分显示的view，如果返回null，bottom部分将不显示
     */
    protected abstract View initBottom();


    /**
     * 模板方法
     */
    protected abstract void loadHeader();

    protected abstract void loadContent();

    protected abstract void loadBottom();


    public   void start(){
        loadHeader();
        loadContent();
        loadBottom();
    };

2. 新建子类,CommonNormalDialog CommonImgHeaderDialog CommonLogoHeaderDialog等

子类 分别对模板方法进行实现, 以CommonNormalDialog为例

/**
     * 普通样式无头部
     * @return
     */
    @Override
    protected View initHeader() {
        return null;
    }

    /**
     * 创建内容布局
     * @return 内容布局
     */
    @Override
    protected View initContent() {

        View content = View.inflate(context, R.layout.common_dialog_content, null);


        tv_title = (TextView) content.findViewById(R.id.tv_title);
        tv_content = (TextView) content.findViewById(R.id.tv_content);

        etv_content = (EditText) content.findViewById(R.id.etv_content);

        v_vertical_line = content.findViewById(R.id.v_vertical_line);
        tv_left = (TextView) content.findViewById(R.id.tv_left);
        tv_right = (TextView) content.findViewById(R.id.tv_right);

        iv_cancel = (ImageView) content.findViewById(R.id.iv_content_cancel);

        iv_cancel.setOnClickListener(this);
        return content;
    }

    /**
     * 创建 底部 按钮布局
     * @return
     */
    @Override
    protected View initBottom() {
        View footer = View.inflate(context, R.layout.common_dialog_footer_btn, null);

        v_vertical_line = footer.findViewById(R.id.v_vertical_line);
        tv_left = (TextView) footer.findViewById(R.id.tv_left);
        tv_right = (TextView) footer.findViewById(R.id.tv_right);

        return footer;

3.扩展

3.1 普通扩展

如果想要 用如下的 弹窗样式. 那么只需要简单几步就可以实现.

image.png

3.1.1 学习并继承 NormalBaseDialog,并实现其中的三个抽象方法 即可.

    /*************************构造子类的内容布局***********************/


    /**
     * 构造 实现类 内容布局
     * @return
     */
    public abstract View createContentView();


    /**
     * 处理 实现类的 view数据
     * @param parents view 的ViewGroup容器
     * @param v view本身
     */
    public abstract void handleContentView(ViewGroup parents, View v);

    /**
     * 子类view 监听器
     * @param v  事件分发 view
     */
    public abstract void onContentClick(View v);

3.1.2 举例说明 在app module中, 有MyDialogDialog ,清爽的代码~ .

/**
 * 自定义样式
 * Created by chenchangjun on 17/10/11.
 */

public class MyDialogDialog extends NormalBaseDialog implements View.OnClickListener {


    private ImageView card_pic;
    private TextView card_price;
    private TextView card_title;

    /**
     * 构造 实现类 内容布局
     *
     * @return
     */
    @Override
    public View createContentView() {
        View myView = View.inflate(context, R.layout.dialog_content_focus_dialog_v1, null);


        card_pic= (ImageView) myView.findViewById(R.id.card_pic);

        card_price= (TextView) myView.findViewById(R.id.card_price);
        card_title= (TextView) myView.findViewById(R.id.card_title);
        card_pic.setOnClickListener(this);
        return myView;
    }

    /**
     * 处理 实现类的 view数据
     *
     * @param parents view 的ViewGroup容器
     * @param v       view本身
     */
    @Override
    public void handleContentView(ViewGroup parents, View v) {
        card_pic.setImageResource(R.mipmap.ic_launcher_round);

    }

    /**
     * 子类view 监听器
     *
     * @param v 事件分发 view
     */
    @Override
    public void onContentClick(View v) {

        int i = v.getId();
        if (i == R.id.card_pic) {
            Toast.makeText(context,"hello MyDialog!!!!",Toast.LENGTH_SHORT).show();
        }
    }



    public MyDialogDialog setMyView(String st) {
        card_title.setText(st);
        return this;
    }

    public MyDialogDialog(Context context) {
        super(context);
    }

}

3.2 其他扩展

如果想要扩展, 根据需求相互扩展即可.

比如 CommonImgHeaderDialog 可以选择继承CommonNormalDialog.共用CommonNormalDialog的 内容布局和 底部布局. 所以,只需要加载header布局即可.

/**
 * 通用 带头部背景 样式
 * Created by chenchangjun on 17/10/11.
 */

public class CommonImgHeaderDialog extends CommonNormalDialog implements View.OnClickListener {

    private String url_header;
    private ImageView iv_header_cancel;
    private SimpleDraweeView iv_header;


    @Override
    protected void loadHeader() {


        if (type== DialogConfig.TYPE_HAS_HEADER){
            iv_header.setVisibility(View.VISIBLE);
            iv_header_cancel.setVisibility(View.VISIBLE);


            if (TextUtils.isEmpty(url_header)) {
                iv_header.setVisibility(View.GONE);
            } else {
                //iv_header.setImageURI(url_header);
                iv_header.setBackgroundResource(R.drawable.common_dialog_header_bg);
                Uri uri = Uri.parse(url_header);
                iv_header.setImageURI(uri);
            }

        }
    }

    public CommonImgHeaderDialog setHeaderUrl(String str) {
        url_header = str;
        return this;
    }

    public CommonImgHeaderDialog(Context context) {
        super(context);
    }

    @Override
    protected View initHeader() {
        View header=null;
        if (type==DialogConfig.TYPE_HAS_NO_HEADER){
            return null;
        }
        header = View.inflate(context, R.layout.common_dialog_pic_header, null);
        iv_header_cancel = (ImageView) header.findViewById(R.id.iv_header_cancel);
        iv_header = (SimpleDraweeView) header.findViewById(R.id.iv_header);
        iv_header_cancel.setOnClickListener(this);

        return header;
    }

}

4. 后期优化

1.优化为一个组件库 发布到 JCenter来使用

2.兼容更多的样式处理

3.精简lib中依赖的处理第三方库......