自定义一个对话框

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

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

目标图

对对话框的基本认识是看了这篇官方文档-->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;
    }
}

<?xml version="1.0" encoding="utf-8"?>

<!-- custom_dialog.xml -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="30dp"
    android:background="@color/dialog_background">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center"
        android:text="@string/hello_world"
        android:textColor="@color/dialog_text_color"/>

    <Button
        android:id="@+id/dialog_ok_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center"
        android:padding="20dp"
        android:layout_marginTop="20dp"
        android:text="@string/button_ok"
        android:textColor="@color/dialog_button_text_color"
        android:background="@color/dialog_button_background"
        />

</LinearLayout>

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

自定义内容的对话框～

二. 为按钮添加圆角

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

<?xml version="1.0" encoding="utf-8"?>

<!--round_corner_button_background.xml-->

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"   >
    <solid android:color="@color/dialog_button_background" ></solid>
    <corners android:radius="20dp"> </corners>
</shape>

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

android:background="@drawable/round_corner_button_background"

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

给按钮加上圆角

三. 为对话框添加圆角

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

企图为对话框添加圆角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;
    }
}

效果变成了这样：

使用Dialog而不是AlertDialog

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

四. 去除那条蓝色的线

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

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

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

dialog.setContentView(customView);

之前调用，不然会crash。

现在的效果：

现在的效果～

五. 自定义对话框的大小

刚刚那一步中，调用了

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

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

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

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

最终效果就是这样啦：

最终效果

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

参考资料

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

自定义一个对话框