Android-Custom Dialog 客製化對話框

更新日期 : 20180224 新增 Styles.xml

Dialog 不僅只能用原生的元件

也可以針對自己想要的 UI 介面做開發

以下是客製化 Dialog 的範例 :

以上是客製化視窗最常見的範例

接下來我們在客製化自己的 Dialog 吧 !

首先佈局好我們的UI

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

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="160dp"
            android:layout_height="160dp"
            android:src="@mipmap/ic_launcher"
            android:id="@+id/dialog_image"/>

        <Button
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:text="X"
            android:id="@+id/dialog_btn"
            android:layout_gravity="right|top"/>
    </FrameLayout>

</LinearLayout>

MyDialod.java

import android.app.Dialog;
import android.content.Context;
import android.content.DialogInterface;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;


public class MyDialog implements DialogInterface.OnCancelListener, View.OnClickListener{

    private Context mContext;
    private int mResId;
    private Dialog mDialog;
    private ImageView dialog_image;
    private Button dialog_btn;

    MyDialog(Context context){
        this.mContext = context;
    }

    public MyDialog imageRes(int resId){
        this.mResId = resId;
        return this;
    }

    public MyDialog show(){
        mDialog = new Dialog(mContext, R.style.dialog);
        mDialog.setContentView(R.layout.dialog_mydialog);
        mDialog.getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, 
            WindowManager.LayoutParams.MATCH_PARENT);

        // 點邊取消
        mDialog.setCancelable(true);
        mDialog.setCanceledOnTouchOutside(true);

        dialog_image = (ImageView)mDialog.findViewById(R.id.dialog_image);
        dialog_btn = (Button)mDialog.findViewById(R.id.dialog_btn);
        dialog_image.setImageResource(mResId);
        dialog_btn.setOnClickListener(this);
        mDialog.setOnCancelListener(this);
        mDialog.show();

        return this;
    }

    @Override
    public void onCancel(DialogInterface dialog) {
        mDialog.dismiss();
    }

    @Override
    public void onClick(View v) {
        mDialog.dismiss();
    }
}

styles.xml

<style name="MyDialog" parent="Theme.AppCompat.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowContentOverlay">@null</item>
</style>

在 Activity.java 使用

new MyDialog(this).imageRes(R.mipmap.ic_launcher).show();

參考資料 : Android 實作 自定義對話框樣式 類似Line 提示對話框 Custom Dialog