前两天，设计师给了我一张效果图，告诉我，对话框就做成这样！我内心默默的想：安卓上做长成这个样子的对话框真的好么-.-心底吐槽了一会儿还是默默的去想办法着手做了。刚接触安卓没多久，做这么一个简单的东西居然也遇到了不少问题，就在这里记录一下，也算是怎么做一个自定义对话框的总结吧。
先放个目标图吧，设计师当然不会设计得这么丑，就是举个例子：
对对话框的基本认识是看了这篇官方文档-->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"
就可以了。
得到的效果大概是这样的：
三. 为对话框添加圆角
用类似第二步的操作，企图为对话框添加圆角。结果变成了这样：
上网搜了搜解决方法，发现加上这行代码或许能解决问题：
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;
}
}
效果变成了这样：
突然发现，对话框背后的阴影也消失了，正好也是我需要的！
四. 去除那条蓝色的线
这时的问题是：为什么多出了一条蓝色的线？这条线应该是安卓上熟悉的对话框标题下面的那条线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
