前言

在重構專案UI時，由於需要重新改下對話方塊介面，然後期望效果圖如下：

雖然簡單，但是感覺很久都沒動手寫UI，差不多都忘了[尷尬]，所以搞起來也是稍微耗了點時間，於是打算記錄下。

問題

繼承DialogFragment後，如果什麼都不處理，則效果如下：

與期望的效果差別：
1.對話方塊頂部有白色塊
2.對話方塊頂部有藍色線條（部分5.0以下手機）
3.對話方塊左右邊緣與螢幕邊緣有間隙
4.背景不是完全透明
5.頂部新增陰影

1.去除對話方塊頂部有白色塊
頂部多出的白色塊可以通過呼叫getDialog().getWindow().requestFeature(Window.FEATURE_NO_TITLE)去除，呼叫時機可以在onCreateView方法或onActivityCreated方法，

 @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        getDialog().getWindow().requestFeature(Window.FEATURE_NO_TITLE);  // 去掉空白部分
        View inflate = inflater.inflate(R.layout.dialog_test, container
 
, false);
        return inflate;
    }

或

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        getDialog().getWindow().requestFeature(Window.FEATURE_NO_TITLE); // 需在super.onActivityCreated方法前呼叫
        super.onActivityCreated(savedInstanceState);
    }

效果如下：

2.去除對話方塊頂部藍色線條

          if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {  // 對於部分低於5.0系統的手機的對話方塊頂部出現藍色線條
                int dividerId = getResources().getIdentifier("android:id/titleDivider", null, null);
                if (dividerId != 0) {
                    View divider = getDialog().findViewById(dividerId);
                    divider.setBackgroundColor(Color.TRANSPARENT);
                }
            }

效果如下：

此種方式還需要去title空白區域，可以呼叫如下方法(在onStart方法中)：

getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

效果和1.去除對話方塊頂部有白色塊一樣。

3.去除對話方塊左右邊緣與螢幕邊緣間隙
4.設定背景透明
上述兩項可通過Window物件重新設定相應的屬性來實現。

 @Override
    public void onStart() {
        super.onStart();
        Dialog dialog = getDialog();
        Window dialogWindow = dialog.getWindow();
        if (dialogWindow != null) {
            dialogWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));  // 設定對話方塊背景透明，即隱藏title的空白區域
            WindowManager.LayoutParams attributes = dialogWindow.getAttributes();
            attributes.gravity = Gravity.BOTTOM; // 底部顯示
            attributes.width = WindowManager.LayoutParams.MATCH_PARENT; // 設定寬度為手機寬度（去除間隙）
            attributes.dimAmount = 0.0f; // 設定背景透明（0-1，0為完全透明，1為不透明）
            dialogWindow.setAttributes(attributes);

            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {  // 對於部分低於5.0系統的手機的對話方塊頂部出現藍色線條
                int dividerId = getResources().getIdentifier("android:id/titleDivider", null, null);
                if (dividerId != 0) {
                    View divider = dialog.findViewById(dividerId);
                    divider.setBackgroundColor(Color.TRANSPARENT);
                }
            }
        }
    }

效果如下：

5.頂部新增陰影
1.通過自定義drawable實現陰影效果(dialog_with_shadow.xml)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item >
        <shape android:shape="rectangle" >
            <gradient
                android:angle="90"
                android:endColor="#00000000"
                android:startColor="#AF000000" />
        </shape>
    </item>

 <!--需要設定陰影長度-->
    <item android:top="10dp">
        <shape android:shape="rectangle" >
            <solid android:color="#FFFFFFFF"/>
        </shape>
    </item>

</layer-list> 

2.佈局引用上面自定的drawable

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!--需要多加個對話方塊巢狀層，並且需要屬性android:paddingTop="10dp"設定陰影長度-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"  // 設定陰影長度，實際程式碼要去掉此註釋
        android:background="@drawable/dialog_with_shadow"  // 引用陰影drawable檔案，實際程式碼要去掉此註釋
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_dialog_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorWhite"
            android:gravity="left|center"
            android:paddingBottom="10dp"
            android:paddingLeft="16dp"
            android:paddingTop="10dp"
            android:text="Title"
            android:textColor="@color/colorBlack"
            android:textSize="@dimen/text_medium" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorGray" />

        <TextView
            android:id="@+id/tv_dialog_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorWhite"
            android:gravity="left|center_vertical"
            android:paddingBottom="25dp"
            android:paddingLeft="16dp"
            android:paddingTop="25dp"
            android:text="This is a dialog"
            android:textColor="@color/colorBlack"
            android:textSize="@dimen/text_medium" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorGray" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_ok"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@color/colorWhite"
                android:gravity="center"
                android:padding="10dp"
                android:text="OK"
                android:textColor="@color/colorBlack"
                android:textSize="@dimen/text_medium" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/colorGray" />

            <TextView
                android:id="@+id/tv_cancel"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@color/colorWhite"
                android:gravity="center"
                android:padding="10dp"
                android:text="NO"
                android:textColor="@color/colorGray"
                android:textSize="@dimen/text_medium" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

備註：上述佈局缺失的資源
color:

    <color name="colorBlack">#000000</color> <!--黑色-->
    <color name="colorWhite">#FFFFFF</color> <!--白色-->
    <color name="colorGray">#DBDBDB</color> <!--灰色-->

dimen:

    <dimen name="text_medium">18sp</dimen>