前兩天，設計師給了我一張效果圖，告訴我，對話框就做成這樣！我內心默默的想：安卓上做長成這個樣子的對話框真的好么-.-心底吐槽了一會兒還是默默的去想辦法著手做了。剛接觸安卓沒多久，做這么一個簡單的東西居然也遇到了不少問題，就在這里記錄一下，也算是怎么做一個自定義對話框的總結吧。
先放個目標圖吧，設計師當然不會設計得這么丑，就是舉個例子：
對對話框的基本認識是看了這篇官方文檔-->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
