【教學】Android Dialog 的 Layout 透明化教學

大家在開發 App 時，是否想設計一個自己專屬的 Dialog ，把 Dialog 的背景變成透明呢？

別急別急～

僅需四個步驟就能達成願望囉！

讓我們來瞧瞧該怎麼做吧！

首先你要先準備一份你自己設計的 Dialog 背景圖，本文背景圖的名稱為 dialog_bg.png，切記如果不想風格只有四四方方的話，一定要用 png 檔，這樣才能使你的 Dialog 不再是四方形。

接著是設定 Dialog 的風格，你在 drawable 中建置一份 xml ，名稱可以自訂，本文文件為 selector_dialog_bg.xml ，若沒有 drawable 的資料夾，則自己創建一份即可。

路徑：res/drawable/selector_dialog_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"><!--形狀-->

    <!--內容-->
    <solid android:color="#00000000"/>

    <!--邊框-->
    <stroke
        android:width="5dp"
        android:color="#0099CC33" />

    <!--內容物件的距離-->
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp" />

    <!--框角矩形的程度-->
    <corners android:radius="5dp" />
</shape>


再來是設定 Dialog layout 的風格，你要在一份叫 styles.xml 的文件中進行編輯，而編輯的內容與功能依照下方指令設定即可。

路徑：res/values/styles.xml
<style name="selectorDialog" parent="@android:style/Theme.Dialog">
    <!-- 邊框 -->
    <item name="android:windowFrame">@null</item>
    <!-- 是否浮现在activity之上 -->
    <item name="android:windowIsFloating">true</item>
    <!-- 整個 layout 半透明 -->
    <item name="android:windowIsTranslucent">true</item>
    <!-- 拿掉標題 -->
    <item name="android:windowNoTitle">true</item>
    <!-- 背景透明 -->
    <item name="android:windowBackground">@drawable/selector_dialog_bg</item>
    <!-- 由 XML 設定 Dialog 視窗是否變暗 -->
    <item name="android:backgroundDimEnabled">true</item>
    <!-- 亮度從 0 到 1.0 -->
    <item name="android:backgroundDimAmount">0.2</item>
</style>


來到 layout 的部分，裡頭的 xml 有兩份，一份為進到 Activity 時對應的 xml ，一份則為呼叫 Dialog 時對應的 xml ，本文分別為 activity_dialog_bg02.xml 與 dialog_mod.xml 。

路徑：res/layout/activity_dialog_bg02.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00ffff" >

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Show dialog" />

    <TextView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Activity word is blue."
        android:textColor="#0000ff"
        android:textSize="50dp" />

</RelativeLayout>


路徑：res/layout/dialog_mod.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/dialog_bg" >

    <TextView
        android:layout_width="230dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="100dp"
        android:text="Dialog word is red."
        android:textColor="#ff0000"
        android:textSize="40dp" />

</RelativeLayout>


最後來到程式的部分囉！在這個部份我們將會對物件進行實體化，並且進行操作設定。

名稱：DialogBG02
@SuppressLint("NewApi") public class DialogBG02 extends Activity {
    private Button btn_show;
    private Dialog dialog;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_dialog_bg02);

        btn_show = (Button) this.findViewById(R.id.btn);
        btn_show.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
            // 設定模組與 Dialog 的風格
            dialog = new Dialog(DialogBG02.this, R.style.selectorDialog);
            dialog.setContentView(R.layout.dialog_mod);
 
            // 由程式設定 Dialog 視窗外的明暗程度, 亮度從 0f 到 1f
            WindowManager.LayoutParams lp=dialog.getWindow().getAttributes();
            lp.dimAmount=0.2f;
            dialog.getWindow().setAttributes(lp);
 
            dialog.show();
            }
        });
    }
}


咱們來瞧瞧最後做出來的成果吧！