项目需求讨论-Android 自定义Dialog实现步骤及封装

在项目中，我们会遇到各种各样的界面需求，比如对话框和选择框，都是会配合具体项目的UI界面来做，而不是说用自带的弹出框。比如下面在登录界面的二个对话框效果。都是我在做具体项目中所要求实现的：

1.输入有误时弹出的对话框

2.选择角色登录时的对话框

这里倒不是说自定义Dialog的教程，因为自定义Dialog大家基本都会。只是我在登录界面写了这二个Dialog之后，我就觉得好烦，然后决定封装了一个类，因为后面不同界面还有很多不同的弹框。为后期节省时间。倒不是说我这个封装类写的有多好，只是写出来，大家可以看下，然后哪里不好可以跟我提下意见。

让我们一步步来看是如何自定这个自定义对话框及如何来进行封装自己的自定义Dialog工具类。我就按照实际项目中，我的开发步骤来说明。

如何生成这种自定义对话框

实际开发中，我看到了第一个效果图中的对话框，于是我马上大手一挥，自定义了一个类ErrorDialog，继承了Dialog。

public class ErrorDialog extends Dialog{
    public ErrorDialog(Context context) {
        super(context);
    }

    public ErrorDialog(Context context, int themeResId) {
        super(context, themeResId);
    }

    protected ErrorDialog(Context context, boolean cancelable
        , OnCancelListener cancelListener) {
        super(context, cancelable, cancelListener);
    }
}

我们可以看到有三个构造函数，这三个构造函数不是一定要都实现，但至少要实现一个构造函数。我们来具体说明下各个构造函数的作用。

  1. ErrorDialog(Context context):
    单纯传入Context，用的比较多。在代码中通过new ErrorDialog(context);来获得Dialog的实例，然后使用show()方法进行展现。

  2. ErrorDialog(Context context, int themeResId)：
    大家可以看到比第一个构造函数多了一个themeResId,就是我们可以传入一个主题值，比如R.style.XXX。然后构造函数中会调用super(context, themeResId);等会生成的Dialog就会带有这个R.style.XXX所设置的效果。

  3. ErrorDialog(Context context, boolean cancelable, OnCancelListener cancelListener):
    大家都知道，对话框弹出来后，默认情况下，我们在屏幕上触摸对话框以外的屏幕的界面，对话框会默认消失。我们平时做对话框的时候一般都是让这个对话框点击外面的其他界面地方的时候不让对话框消失，我们一般在代码中会这么写：setCanceledOnTouchOutside(false);。为什么我提这个，没错，这个构造函数里面的那个boolean cancelable控制的就是这个功能，<1>当传入为true的时候，就是可以点击外面来让对话框消失，然后消失的时候会调用后面第三个参数的cancelListener这个listener里面的方法。我们可以在里面做相应的监听事件。<2>当传入false。那么点击外面区域，这个对话框也就不会消失，而且后面的那个listener也不会被调用。

好了，构造函数说好后。我们来具体看如何生成界面Dialog界面。于是我大手再次一挥。写了个对话框所需要的效果的Layout：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="250dp"
    android:background="@drawable/background_loginerror"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <ImageView
        android:layout_marginTop="30dp"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/gong"
        />

    <TextView
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="您输入的内容有误"
        />

    <Button
        android:id="@+id/btn_cancel"
        android:layout_marginTop="20dp"
        android:layout_width="120dp"
        android:layout_height="40dp"
        android:text="@string/confirm"
        android:background="@drawable/background_loginbtn"
        />
</LinearLayout>

效果如下图所示(那个感叹号的图片我这边因为切图没有的问题。临时换成了工商的图标。反正不影响我们开发教程)：

然后我们在自定义的ErrorDialog中写oncreate方法：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    View view = View.inflate(context,R.layout.dialog_loginerror,null);
    setContentView(view);
}

然后这时候我以为就跟继承Activity一样。变成了我自定义的布局界面。然后我满心欢喜的在Activity中调用了：
ErrorDialog dialog = new ErrorDialog(this); dialog.show();

WTF！！
这是逗我吗，我的自定义布局明明是个圆角啊。怎么变成了个长方形。
所以我就把我们自定义布局的背景色换成其黑色。看下效果：

这下首先知道了。我们其实自定义的layout类似于是盖在了底部白色的背景上面，恰好我们的自定义布局也是白色。所以我们现在首先要把底部的那个白色背景变为透明，那样，就会出现我们自定义布局的圆角了

那我们下一步的目的就是要设置Dialog自定义的theme。

把Dialog自带的白色背景色改为透明即可，很简单。百度一搜一大把。哈哈。其实说到底就是继承android:style/Theme.Dialog主题，然后再覆写其中的几个相关属性，比如背景设置为透明,去除自带的title等属性。

(我在网上看的时候，网上有人推荐Android4.0后，不要使用Theme.Dialog。改为使用Theme.Holo.DialogWhenLarge。
Android4: 请放弃使用Theme.Dialog
当然对我们这个自定义布局需求，继承哪个都能实现效果。就看大家怎么选择了。
)

好，那我们就自定义继承Theme.Dialog:

<style name="Dialog" parent="android:style/Theme.Dialog">
    <item name="android:background">@android:color/transparent</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowNoTitle">true</item>
</style>

（如果有其他需求，再覆写其他的属性即可，本例中就只需要改这三个）

好了。然后在上面我们介绍过的生成Dialog实例中的第二个构造函数，是传入Theme。我们调用：

ErrorDialog dialog = new ErrorDialog(this,R.style.Dialog);
dialog.show();

然后我们看到效果了：



起码形状变成我们的自定义布局的形状了。哈哈。但是这个Dialog大小和我们的自定义布局大小不同。

下一步要处理Dialog呈现的自定义布局的大小

还是老样子，百度一搜一大把，好吧。我实在是太懒了。（不服气我懒的话，过来打我哈。O(∩_∩)O）

Window win = getWindow();
WindowManager.LayoutParams lp = win.getAttributes();
lp.gravity = Gravity.CENTER;
lp.height = DensityUtil.dip2px(context,250);
lp.width = DensityUtil.dip2px(context,200);
win.setAttributes(lp);

我来解释下，因为上面我们自定义布局的大小就是

 android:layout_width="200dp"
 android:layout_height="250dp"

所以我们这里也设置这个对话框的大小也设置为相同大小，这样就等于显示出我们自定义布局大小。这里因为高和宽改为我们自己自定义布局大小，所以lp.gravity = Gravity.CENTER;这句也可以不写,因为反正是正好完全填充。

所以我们当前的自定义Dialog代码变为：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    View view = View.inflate(context,R.layout.dialog_loginerror,null);
    setContentView(view);

    Window win = getWindow();
    WindowManager.LayoutParams lp = win.getAttributes();
    lp.height = DensityUtil.dip2px(context,250);
    lp.width = DensityUtil.dip2px(context,200);
    win.setAttributes(lp);
}
点击事件
  1. 一般我们项目中跳出了对话框，点击对话框外面的区域，是不能默认让对话框消失的。所以我们需要添加setCanceledOnTouchOutside(false);
  2. 自定义布局上面的按钮点击事件的添加很简单，因为上面已经拿到了自定义布局的view的对象。比如我们上面的自定义布局有个<确定>按钮，我们点击按钮让对话框消失。我们只需要：
view.findViewById(R.id.btn_cancel).setOnClickListener(new Button.OnClickListener() {
    @Override
    public void onClick(View view) {
        dismiss();
    }
});

最终的自定义ErrorDialog代码：

public class ErrorDialog extends Dialog {
    public Context context;

    public ErrorDialog(Context context) {
        super(context);
        this.context = context;
    }

    public ErrorDialog(Context context, int theme) {
        super(context, theme);
        this.context = context;
    }

    public ErrorDialog(Context context, boolean cancelable, OnCancelListener cancelListener) {
        super(context, cancelable, cancelListener);
        this.context = context;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        View view = View.inflate(context, R.layout.dialog_loginerror, null);
        setContentView(view);

        setCanceledOnTouchOutside(false);

        Window win = getWindow();
        WindowManager.LayoutParams lp = win.getAttributes();
        lp.height = DensityUtil.dip2px(context, 250);
        lp.width = DensityUtil.dip2px(context, 200);
        win.setAttributes(lp);

        view.findViewById(R.id.btn_cancel).setOnClickListener(new Button.OnClickListener() {
            @Override
            public void onClick(View view) {
                dismiss();
            }
        });
    }
}

最后生成的界面如下：

----------------------------------------本文正文，封装君正式登场-----------------------------------------------------

上面只是介绍了自定义Dialog的基本知识。而且这个ErrorDialog只能用于第一个效果图所需的Dialog需求，然后比如我们要第二个效果图的需求。然后自己再写一个ChangeDialog???一个项目有5种不同的界面Dialog。我要写5个自定义Dialog类？？？答案当然是NO，NO，NO。

我们来看下，上面我们完成ErrorDialog的时候，到底需要哪些东西，才能最后完成一个自定义Dialog。

  1. Context
  2. R.style.XXXX
  3. R.layout.XXXX
  4. setCanceledOnTouchOutside(XXXX);是否允许点击外部区域来让Dialog消失
  5. WindowManager.LayoutParams对象类的height和width。
  6. 自定义布局上各个View的点击事件

基本是上述五个需求。（额外需求，大家就在这基础上封装好的类中添加自己的需求即可）

我们也是模仿Dialog建立的Builder模式，自己写个封装类。
（Builder模式的介绍和用Android Studio插件来快速自动生成代码，大家可以来看下我已经写得文章：经典Builder/变种Builder模式及自动化生成代码插件）

我先上代码再来进行查看：

public class CustomDialog extends Dialog {
    private Context context;
    private int height, width;
    private boolean cancelTouchout;
    private View view;

    private CustomDialog(Builder builder) {
        super(builder.context);
        context = builder.context;
        height = builder.height;
        width = builder.width;
        cancelTouchout = builder.cancelTouchout;
        view = builder.view;
    }


    private CustomDialog(Builder builder, int resStyle) {
        super(builder.context, resStyle);
        context = builder.context;
        height = builder.height;
        width = builder.width;
        cancelTouchout = builder.cancelTouchout;
        view = builder.view;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(view);

        setCanceledOnTouchOutside(cancelTouchout);

        Window win = getWindow();
        WindowManager.LayoutParams lp = win.getAttributes();
        lp.gravity = Gravity.CENTER;
        lp.height = height;
        lp.width = width;
        win.setAttributes(lp);
    }

    public static final class Builder {

        private Context context;
        private int height, width;
        private boolean cancelTouchout;
        private View view;
        private int resStyle = -1;


        public Builder(Context context) {
            this.context = context;
        }

        public Builder view(int resView) {
            view = LayoutInflater.from(context).inflate(resView, null);
            return this;
        }

        public Builder heightpx(int val) {
            height = val;
            return this;
        }

        public Builder widthpx(int val) {
            width = val;
            return this;
        }

        public Builder heightdp(int val) {
            height = DensityUtil.dip2px(context, val);
            return this;
        }

        public Builder widthdp(int val) {
            width = DensityUtil.dip2px(context, val);
            return this;
        }

        public Builder heightDimenRes(int dimenRes) {
            height = context.getResources().getDimensionPixelOffset(dimenRes);
            return this;
        }

        public Builder widthDimenRes(int dimenRes) {
            width = context.getResources().getDimensionPixelOffset(dimenRes);
            return this;
        }

        public Builder style(int resStyle) {
            this.resStyle = resStyle;
            return this;
        }

        public Builder cancelTouchout(boolean val) {
            cancelTouchout = val;
            return this;
        }

        public Builder addViewOnclick(int viewRes,View.OnClickListener listener){
            view.findViewById(viewRes).setOnClickListener(listener);
            return this;
        }


        public CustomDialog build() {
            if (resStyle != -1) {
                return new CustomDialog(this, resStyle);
            } else {
                return new CustomDialog(this);
            }
        }
    }
}

我这边的Builder中对height和width写了三种方式，比如直接写入px的值就调用heightpx(),如果直接写入dp值，就调用heightdp()。不过最多的应该还是调用heightDimenRes()方法。因为一般我们在写自定义layout布局的时候，height和width的数值肯定是去dimen.xml中获取。所以我们在代码中生成这个自定义对话框的时候,也就直接调用了heightDimenRes(R.dimen.XXX)。这样。我们什么时候需求变了，说这个对话框的大小要进行更改，我们不需要更改代码，只需要在demen.xml中将数值修改即可。

然后我们再来写上面的ErrorDialog：

CustomDialog.Builder builder = new CustomDialog.Builder(this);
dialog =
    builder.cancelTouchout(false)
            .view(R.layout.dialog_loginerror)
            .heightDimenRes(R.dimen.dialog_loginerror_height)
            .widthDimenRes(R.dimen.dialog_loginerror_width)
            .style(R.style.Dialog)
            .addViewOnclick(R.id.btn_cancel,new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    dialog.dismiss();
                }
            })
            .build();
dialog.show();

真是简单！！！！！

好了我们现在要第二个效果图的对话框了。比如我现在为了简单。就做了个简单的自定义Layout。

然后点击“经办人”，“审批人”，“确认”按钮，有不同点击效果。
生成这个对话框代码如下：

View.OnClickListener listener = new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.jbperson :
                Toast.makeText(aty, "选择经办人按钮", Toast.LENGTH_SHORT).show();
                break;
            case R.id.spperson:
                Toast.makeText(aty, "选择审批人按钮", Toast.LENGTH_SHORT).show();
                break;
            case R.id.confirmbtn:
                Toast.makeText(aty, "点击确定按钮", Toast.LENGTH_SHORT).show();
                 break;
        }
    }
};

CustomDialog.Builder builder = new CustomDialog.Builder(this);
CustomDialog dialog = builder
        .style(R.style.Dialog)
        .heightDimenRes(R.dimen.dilog_identitychange_height)
        .widthDimenRes(R.dimen.dilog_identitychange_width)
        .cancelTouchout(false)
        .view(R.layout.dialog_identitychange)
        .addViewOnclick(R.id.jbperson,listener)
        .addViewOnclick(R.id.spperson,listener)
        .addViewOnclick(R.id.confirmbtn,listener)
        .build();
        
dialog.show();

我们用手机查看效果：

真是简单！！！！！！！哈哈。当然我只是做了简单的封装。大家可以提出不同的意见。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,391评论 25赞 707
  • 源码众享最新教程 - 草稿
    ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程，因...
    小菜c阅读 6,350评论 0赞 17
  • GitHub上受欢迎的Android UI Library
    内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,700评论 22赞 664
  • 回望人间
    很久以前就想写这篇文章，一直没有动笔。不知何时养成了拖延症的坏毛病，懒懒的，动也不想动，总是坐在家中的阳台上，喝着...
    e6459f4671b8阅读 513评论 0赞 0
  • 找啥子好用（一）
    我用手机加鱼眼镜头给女儿拍了这张照片，显得很头大。用她头大照片来代替我头大的照片，让人看起来更舒服，一个中年胖子....
    毒漱医治阅读 410评论 0赞 13