自定义一个对话框

前两天,设计师给了我一张效果图,告诉我,对话框就做成这样!我内心默默的想:安卓上做长成这个样子的对话框真的好么-.-心底吐槽了一会儿还是默默的去想办法着手做了。刚接触安卓没多久,做这么一个简单的东西居然也遇到了不少问题,就在这里记录一下,也算是怎么做一个自定义对话框的总结吧。

先放个目标图吧,设计师当然不会设计得这么丑,就是举个例子:


自定义一个对话框_第1张图片
目标图

对对话框的基本认识是看了这篇官方文档-->Dialogs
好了,现在要开始解决这么几个问题:


一. 自定义对话框的内容

安卓的对话框的内容是可以自定义的,这在官方文档中也有详细描述。所以照着官方文档的做法做就可以了。

代码片段:

//MyDialogFragment.java

public class MyDialogFragment extends DialogFragment {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        View customView = getActivity().getLayoutInflater().inflate(R.layout.custom_dialog, null);
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setView(customView);
        final Dialog dialog = builder.create();

        Button okButton = (Button)customView.findViewById(R.id.dialog_ok_button);
        okButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dialog.dismiss();
            }
        });

        return dialog;
    }
}






    

    

得到的效果大概是这样的:

自定义一个对话框_第2张图片
自定义内容的对话框~

二. 为按钮添加圆角

稍微搜索一下,得知可以将在xml文件中,将android:background指定为一个drawable资源。所以只要在drawable资源文件夹中增加一个文件round_corner_button_background.xml:






    
     

然后将custom_dialog.xml中的Button的android:background改为:

android:background="@drawable/round_corner_button_background"

就可以了。
得到的效果大概是这样的:


自定义一个对话框_第3张图片
给按钮加上圆角

三. 为对话框添加圆角

用类似第二步的操作,企图为对话框添加圆角。结果变成了这样:


自定义一个对话框_第4张图片
企图为对话框添加圆角0.0

上网搜了搜解决方法,发现加上这行代码或许能解决问题:

dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);

但是……试了一下好像没有任何效果。

再查了查,发现,如果想要让对话框自身变透明,需要直接创建Dialog对象,不能使用AlertDialog对象。
虽然觉得有一些tricky,但还是照做了TAT。

修改后的MyDialogFragment.java:

//MyDialogFragment.java

public class MyDialogFragment extends DialogFragment {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        View customView = getActivity().getLayoutInflater().inflate(R.layout.custom_dialog, null);
        final Dialog dialog = new Dialog(getActivity());
        dialog.setContentView(customView);
        dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);

        Button okButton = (Button)customView.findViewById(R.id.dialog_ok_button);
        okButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dialog.dismiss();
            }
        });

        dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
        return dialog;
    }
}

效果变成了这样:

自定义一个对话框_第5张图片
使用Dialog而不是AlertDialog

突然发现,对话框背后的阴影也消失了,正好也是我需要的!


四. 去除那条蓝色的线

这时的问题是:为什么多出了一条蓝色的线?这条线应该是安卓上熟悉的对话框标题下面的那条线0.0
搜索了一下怎么去除那条线,发现可以使用这行代码:

dialog.requestWindowFeature(android.view.Window.FEATURE_NO_TITLE);

添加上去后,看起来还挺顺利的,不过需要注意的是,这行代码必须在

dialog.setContentView(customView);

之前调用,不然会crash。

现在的效果:

自定义一个对话框_第6张图片
现在的效果~

五. 自定义对话框的大小

刚刚那一步中,调用了

dialog.requestWindowFeature(android.view.Window.FEATURE_NO_TITLE);

这行代码后,发现对话框的大小也直接变化了,真是意外收获。这样只要在custom_dialog.xml文件中排排版,让对话框变成需要的大小就好了。
如果这样做不行的话,也可以在java代码中这样写:

dialog.getWindow().setLayout(widthInPx, heightInPx);

不过这里的widthInPx和heightInPx都是以px为单位的,需要将dp转换一下。

最终效果就是这样啦:

自定义一个对话框_第7张图片
最终效果

虽然写这篇文的时候还觉得一切都挺顺利的,但是之前做的时候还挺抓狂QAQ

参考资料

Dialogs
Android Dialog - Rounded Corners and Transparency
Android Dialog in Custom Style: Remove Blue Line and set ActionBar Color

你可能感兴趣的:(自定义一个对话框)