Android 自定義dialog學習之——自定義一個提示框

前言

最近項目中覺的Android系統的dialog樣式太醜，确實也不太好看，就打算自定義一個dialog來使用。

自定義dialog執行個體demo

1、布局

dialog_alert

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/dp_550"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/new_dialog_bg"
    android:orientation="vertical">

	<!--标題-->
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_80"
        android:layout_marginLeft="@dimen/dp_60"
        android:layout_marginRight="@dimen/dp_60"
        android:gravity="center|bottom"
        android:text="@string/title"
        android:textColor="@color/color_222222"
        android:textSize="@dimen/dp_32"
        android:textStyle="bold" />

	<!--提示資訊-->
    <TextView
        android:id="@+id/tv_msg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp_60"
        android:layout_marginTop="@dimen/dp_36"
        android:layout_marginRight="@dimen/dp_60"
        android:layout_marginBottom="@dimen/dp_50"
        android:gravity="center"
        android:textColor="@color/color_222222"
        android:textSize="@dimen/dp_28" />

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_1"
        android:background="@color/color_E8E8E8" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_92"
        android:orientation="horizontal">

        <!--取消按鈕-->
        <TextView
            android:id="@+id/tv_cancel"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/tv_cancel"
            android:textColor="@color/color_666666"
            android:textSize="@dimen/dp_28" />

        <View
            android:id="@+id/v_line"
            android:layout_width="@dimen/dp_1"
            android:layout_height="match_parent"
            android:background="@color/color_E8E8E8" />

        <!--确認按鈕-->
        <TextView
            android:id="@+id/tv_ok"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/tv_ok"
            android:textColor="@color/color_00A1C1"
            android:textSize="@dimen/dp_28" />
    </LinearLayout>

</LinearLayout>
           

new_dialog_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 邊框的寬度和顔色 -->
    <stroke
        android:width="@dimen/dp_1"
        android:color="#E8E8E8" />
    <!-- 圓角的半徑 -->
    <corners android:radius="@dimen/dp_12" />
    <!-- 填充顔色 -->
    <solid android:color="#FFFFFF" />
</shape>
           

2、代碼實作

public class MyDialog extends Dialog implements View.OnClickListener {
    private TextView tv_title;
    private TextView tv_msg;
    private TextView tv_cancel;
    private TextView tv_ok;
    private View v_line;

    private OkOnClickListener okOnClickListener;
    private CancelOnClickListener cancelOnClickListener;

    public MyDialog(@NonNull Context context) {
        this(context, R.style.BaseDialogStyle);
    }

    public MyDialog(@NonNull Context context, int themeResId) {
        super(context, themeResId);
        setContentView(R.layout.dialog_alert);
        initView();
        initAction();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WindowManager m = getWindow().getWindowManager();
        Display d = m.getDefaultDisplay();
        WindowManager.LayoutParams p = getWindow().getAttributes();
        p.width = d.getWidth(); //設定dialog的寬度為目前手機螢幕的寬度
        getWindow().setAttributes(p);

    }

    private void initView() {
        tv_title = findViewById(R.id.tv_title);
        tv_msg = findViewById(R.id.tv_msg);
        tv_cancel = findViewById(R.id.tv_cancel);
        tv_ok = findViewById(R.id.tv_ok);
        v_line = findViewById(R.id.v_line);

        tv_ok.setOnClickListener(this);
        tv_cancel.setOnClickListener(this);
    }

    //預設設定ok和cancel按鈕都不可見：這樣可以代碼動态設定隻顯示一個按鈕或者兩個按鈕，使控件更加實用
    private void initAction() {
        tv_cancel.setVisibility(View.GONE);
        tv_ok.setVisibility(View.GONE);
        v_line.setVisibility(View.GONE);
    }

	//設定title
    public MyDialog setTitle(String title) {
        if (this.tv_title != null) {
            this.tv_title.setText(StringUtil.isEmpty(title) ? this.getContext().getResources().getString(R.string.title) : title);
        }
        return this;
    }

    //設定msg
    public MyDialog setMessage(String message) {
        if (this.tv_msg != null) {
            this.tv_msg.setText(StringUtil.isEmpty(message) ? "" : message);
        }
        return this;
    }

    //設定ok按鈕點選事件
    public MyDialog setPositiveButton(String okMsg, OkOnClickListener okOnClickListener) {
        if (this.tv_ok != null) {
            this.tv_ok.setVisibility(View.VISIBLE);
            this.tv_ok.setText(StringUtil.isEmpty(okMsg) ? this.getContext().getResources().getString(R.string.tv_ok) : okMsg);
            this.okOnClickListener = okOnClickListener;
        }
        return this;
    }

    //設定cancel按鈕點選事件
    public MyDialog setNegativeButton(String cancelMsg, CancelOnClickListener cancelOnClickListener) {
        if (this.tv_cancel != null) {
            this.tv_cancel.setVisibility(View.VISIBLE);
            this.v_line.setVisibility(View.VISIBLE);
            this.tv_cancel.setText(StringUtil.isEmpty(cancelMsg) ? this.getContext().getResources().getString(R.string.tv_cancel) : cancelMsg);
            this.cancelOnClickListener = cancelOnClickListener;
        }
        return this;
    }

    @Override
    public void onClick(View v) {
        dismiss();
        int id = v.getId();
        if (id == R.id.tv_ok) {
            if (okOnClickListener != null) {
                okOnClickListener.confirm();
            }
        } else if (id == R.id.tv_cancel) {
            if (cancelOnClickListener != null) {
                cancelOnClickListener.cancel();
            }
        }
    }

    public interface OkOnClickListener {
        void confirm();
    }

    public interface CancelOnClickListener {
        void cancel();
    }

}
           

3、調用dialog

我們寫一個工具類來調用，這樣全局隻需要調用工具類就ok了，不用每次都new一個dialog對象來調用。

//工具類
public class DialogHelper {

    /**
     * 單按鈕dialog彈出框
     *
     * @param context           上下文
     * @param title             标題
     * @param msg               内容
     * @param cancelOutSide     是否可以點選dialog外部時關閉dialog
     * @param ok                确認按鈕
     * @param okOnClickListener 确認回調
     */
    public static void showDialog(Context context, String title, String msg, boolean cancelOutSide,
                                  String ok, MyDialog.OkOnClickListener okOnClickListener) {

        showDialog(context, title, msg, true, cancelOutSide, ok, okOnClickListener, "", null);
    }

    /**
     * 雙按鈕dialog彈出框
     *
     * @param context               上下文
     * @param title                 标題
     * @param msg                   内容
     * @param hideCancel            是否隐藏“取消”按鈕
     * @param cancelOutSide         是否可以點選dialog外部時關閉dialog
     * @param ok                    确認按鈕
     * @param okOnClickListener     确認回調
     * @param cancel                取消按鈕
     * @param cancelOnClickListener 取消回調
     */
    public static void showDialog(Context context, String title, String msg, boolean hideCancel, boolean cancelOutSide,
                                  String ok, MyDialog.OkOnClickListener okOnClickListener,
                                  String cancel, MyDialog.CancelOnClickListener cancelOnClickListener) {
        MyDialog dialog = new MyDialog(context);
        dialog.setTitle(title);
        dialog.setMessage(msg);
        dialog.setCanceledOnTouchOutside(cancelOutSide);
        dialog.setCancelable(cancelOutSide);
        dialog.setPositiveButton(ok, okOnClickListener);
        if (!hideCancel) {
            dialog.setNegativeButton(cancel, cancelOnClickListener);
        }
        dialog.show();
    }
}
           

4、最後附上自定義dialog的樣式