每个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 <a href="#attr_android:visibility">{@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 <a href="#attr_android:visibility">{@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