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的样式