Android自定义弹窗

每个APP都有自己的UI风格，不可能简单地使用Google自带的弹窗模板。所以是时候搞一套我们自己的弹窗范例代码了。按照下列代码只需要再根据APP的主题风格重新绘制一波弹窗布局，就可以无脑迁移了，这种轮子没必要一遍一遍的重造，记录下来以资来者。

自定义弹窗类

首先，我们可以继承Google的android.app.Dialog类来减少很多生命周期和window覆盖的问题。

public class CustomizedDialog extends Dialog

其次，我们要重写他的构造方法和onCreate方法。其中setContentView是用来重绘弹窗样式的，APP的UI风格统一全靠它了。另外，为了弹窗的样式好看，我们也可以在构造方法中调用public Dialog(@NonNull Context context, @StyleRes int themeResId)传入主题资源。

public CustomizedDialog(Context context) {
    super(context);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // 如果自定义布局有效，则使用自定义布局
    setContentView(customizedDialogLayout == INVALID_LAYOUT_ID ?
            R.layout.layout_custom_dialog : customizedDialogLayout);

    // 将弹窗背景色设置成透明
    getWindow().setBackgroundDrawableResource(R.color.transparent);
    // 弹窗外部蒙层不可取消弹窗
    setCanceledOnTouchOutside(false);

    // 关于控件的处理 ... 
}

主要影响弹窗样式效果的代码都在上述代码片段中。其中需要注意的是单双按钮展示逻辑，如果为单个按钮，则需要将左侧的按钮setVisibility(View.GONE)，千万不能用INVISIBLE这个会让控件消失但仍旧占位。

/**
 * This view is invisible, but it still takes up space for layout purposes.
 * Use with {@link #setVisibility} and {@code
 * android:visibility}.
 */
public static final int INVISIBLE = 0x00000004;

/**
 * This view is invisible, and it doesn't take any space for layout
 * purposes. Use with {@link #setVisibility} and {@code
 * android:visibility}.
 */
public static final int GONE = 0x00000008;

其余还有一些控件初始化逻辑，比较琐碎简单，不再赘述，请移步CustomizedDialog.java。

自定义布局

这个自定义弹窗的布局比较简单，就是提示图标、弹窗标题、提示信息以及左右两个交互按钮。其中需要注意的就是由于需求原因，需要两个和单个按钮的弹窗，所以为了代码复用，下面两个Button需要注意layout_weight=1的等分配置。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@color/transparent"
    android:clipChildren="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginTop="80dp"
        android:background="@drawable/bg_dialog"
        android:minHeight="200dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="40dp"
            android:gravity="center"
            android:text="温馨提示"
            android:textColor="@color/black"
            android:textSize="22dp"
            android:visibility="visible" />

        <TextView
            android:id="@+id/tv_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:gravity="center|left"
            android:text="提示信息未填写"
            android:textColor="@color/black"
            android:textSize="16dp" />

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

            <Button
                android:id="@+id/btn_left"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:gravity="center"
                android:singleLine="true"
                android:text="取消"
                android:textColor="@color/white"
                android:textSize="16sp" />

            <Button
                android:id="@+id/btn_right"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:gravity="center"
                android:singleLine="true"
                android:text="确定"
                android:textColor="@color/white"
                android:textSize="16dp" />
        LinearLayout>
    LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/ic_launcher" />
RelativeLayout>

调用展示

完成了上述编码，下面进行调用展示，为了能够达到那种一行完成所有配置的爽快感，本自定义弹窗采用了链式调用的尝试，用起来还是比较爽快的。

public static void initCustomDialogNew(Context context) {
    final CustomizedDialog dialog = new CustomizedDialog(context);
    dialog.setTitleMsg("温馨提示")
            .setWarningMsg("这是是一个测试弹窗显示信息内容的文本。多来几行看看长度如何。")
            .setOnDialogClickListener(new OnDialogClickListener() {
                @Override
                public void onRightClick() {
                    dialog.dismiss();
                    Toast.makeText(context, "xxxx", Toast.LENGTH_SHORT).show();
                }

                @Override
                public void onLeftClick() {
                    dialog.dismiss();
                    Toast.makeText(context, "ssss", Toast.LENGTH_SHORT).show();
                }
            }).show();
}

代码详见

自定义弹窗类：CustomizedDialog.java
自定义布局：layout_custom_dialog.xml