前言
弹窗是指打开网页、软件、手机APP等的时候自动弹出的窗口，目前主要流行的弹出方式是快速进入网页游戏的快捷途径。 在android弹窗是非常常见与实用的控件，相信很多朋友都使用过弹窗。这篇文章想和大家分享一下弹窗的相关知识。
弹窗的分类和区别
弹窗分为模态弹窗和非模态弹窗两种，这两者最主要的区别在于需不需要用户对其进行回应。模态弹窗会打断用户的正常操作，要求用户必须对其进行回应，否则不能继续其它操作行为，比如说：Dialog；非模态弹窗则不会影响用户的操作，用户可以不对其进行回应，非模态弹窗通常都有时间限制，出现一段时间后就会自动消失，比如说：Toast。
弹窗分类
根据模态弹窗和非模态弹窗的区别，当只是需要告知用户信息，不需要用户操作，一般设计为非模态弹窗；需要用户进行一定的操作时我们使用模态弹窗。
仿IOS 的Dialog
IOS和Android在弹窗方面有一些不同，但是在实际开发中，设计者往往偏向于IOS的弹窗设计。所以，对于Android开发者，势必要学习几种常见的仿IOS弹窗。这里给大家介绍一种的仿IOS的Dialog。
布局文件，在这了可以修改dialog的式样。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/background_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/transparent_half"
android:scaleType="fitXY" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="@dimen/margin40"
android:layout_marginRight="@dimen/margin40"
android:background="@drawable/shape_frame_gray_background_white">
<TextView
android:id="@+id/dialog_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginEnd="@dimen/margin10"
android:layout_marginStart="@dimen/margin10"
android:layout_marginTop="@dimen/margin20"
android:gravity="center"
android:textColor="@color/dark_gray"
android:textSize="@dimen/text_size17"
tools:text="Logout" />
<TextView
android:id="@+id/dialog_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/dialog_title"
android:layout_centerHorizontal="true"
android:layout_marginBottom="@dimen/margin30"
android:layout_marginEnd="@dimen/margin10"
android:layout_marginStart="@dimen/margin10"
android:layout_marginTop="@dimen/margin30"
android:gravity="center"
android:textColor="@color/dark_gray"
android:textSize="@dimen/text_size13"
tools:text="Are you sure you want to log out?" />
<View
android:id="@+id/line_transverse"
android:layout_width="match_parent"
android:layout_height="@dimen/height1"
android:layout_below="@+id/dialog_content"
android:background="@color/gray_dialog" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/line_transverse">
<Button
android:id="@+id/right_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_toEndOf="@+id/line_vertical"
android:background="@color/transparent"
android:text="@string/dialog_yes"
android:textAllCaps="false"
android:textColor="@color/blue"
android:textSize="@dimen/text_size17" />
<View
android:id="@+id/line_vertical"
android:layout_width="@dimen/height1"
android:layout_height="@dimen/layout_height54"
android:layout_centerInParent="true"
android:background="@color/gray_dialog" />
<Button
android:id="@+id/left_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toStartOf="@+id/line_vertical"
android:background="@color/transparent"
android:text="@string/dialog_no"
android:textAllCaps="false"
android:textColor="@color/blue"
android:textSize="@dimen/text_size17" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
在IOS中，背景模糊是非常常见的。想要达到这一目的，最常见的做法是对此页面进行切图，在对图片进行模糊。操作实在麻烦，因此我使用了半透明颜色来代替。当然，如果需求确实需要，也可以做比较复杂的操作。
<color name="transparent_half">#d9ffffff</color>
边缘灰色线的shapeshape_frame_gray_background_white如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="@dimen/radius" />
<solid android:color="@color/white" />
<stroke
android:width="1dp"
android:color="@color/gray_hint" />
</shape>
布局已经Ok，定义仿IOS的dialog文件如下：
public class LikeIosDialog extends Dialog {
public LikeIosDialog(Context context, int theme) {
super(context, theme);
}
public void onDismiss() {
if (isShowing()) {
dismiss();
}
}
public static class Builder {
private Button leftButton;
private Button rightButton;
private TextView dialogTitle;
private TextView dialogContent;
private View lineVertical;
private String message;
private String title;
private String leftButtonText;
private String rightButtonText;
private View.OnClickListener leftButtonClickListener;
private View.OnClickListener rightButtonClickListener;
private boolean isSingle = false;
private View layout;
private LikeIosDialog dialog;
public Builder(Context context) {
dialog = new LikeIosDialog(context, R.style.Dialog);
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
layout = inflater.inflate(R.layout.layout_dialog, null);
dialog.addContentView(layout, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
dialog.setContentView(layout);
dialog.setCancelable(true);
dialog.setCanceledOnTouchOutside(false);
}
public LikeIosDialog createDialog() {
initView();
setText();
setEvent();
return dialog;
}
private void initView() {
leftButton = (Button) layout.findViewById(R.id.left_button);
rightButton = (Button) layout.findViewById(R.id.right_button);
dialogContent = (TextView) layout.findViewById(R.id.dialog_content);
dialogTitle = (TextView) layout.findViewById(R.id.dialog_title);
lineVertical = layout.findViewById(R.id.line_vertical);
}
private void setText() {
if (isSingle) {
leftButton.setVisibility(View.GONE);
lineVertical.setVisibility(View.GONE);
} else {
leftButton.setVisibility(View.VISIBLE);
lineVertical.setVisibility(View.VISIBLE);
}
dialogContent.setText(message);
leftButton.setText(leftButtonText);
rightButton.setText(rightButtonText);
dialogTitle.setText(title);
}
private void setEvent() {
leftButton.setOnClickListener(leftButtonClickListener);
rightButton.setOnClickListener(rightButtonClickListener);
}
public Builder setMessage(String message) {
this.message = message;
return this;
}
public Builder setTitle(String title) {
this.title = title;
return this;
}
public Builder setLeftButton(String leftButtonText, View.OnClickListener leftButtonClickListener) {
this.leftButtonText = leftButtonText;
this.leftButtonClickListener = leftButtonClickListener;
return this;
}
public Builder setRightButton(String rightButtonText, View.OnClickListener rightButtonClickListener) {
this.rightButtonText = rightButtonText;
this.rightButtonClickListener = rightButtonClickListener;
return this;
}
public Builder isSingleButton(boolean isSingleButton) {
this.isSingle = isSingleButton;
return this;
}
public Builder setSingleButton(String rightButtonText, View.OnClickListener rightButtonClickListener) {
this.rightButtonText = rightButtonText;
this.rightButtonClickListener = rightButtonClickListener;
return this;
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
dismiss();
}
return super.onKeyDown(keyCode, event);
}
}
到此，自定义仿IOS的Dialog已经完成了，我们简单的使用一下吧。
private BukkaDialog.Builder deleteDialogBuilder;
private BukkaDialog deleteDialog;
deleteDialogBuilder = new BukkaDialog.Builder(this);
deleteDialog = deleteDialogBuilder
.setTitle(getString(R.string.dialog_title))
.setMessage(getString(R.string.dialog_content))
.isSingleButton(false)
.setRightButton(getString(R.string.ok), v1 -> {
//TODO something
deleteDialog.onDismiss();
})
.setLeftButton(getString(R.string.cancel), v12 -> deleteDialog.onDismiss())
.createDialog();
deleteDialog.show();
一起来看看最终的效果吧，还不错。
最终效果
小结
这里我只提供了大部分核心代码，希望对广大安卓开发者有所帮助。也希望通过这个例子，更加清楚的认识到弹窗的知识。在这篇文章中，我自定义了一个仿IOS的Dialog，在android开发者，自定义View是一块非常实用的知识。下一期我想和大家分享的是：Android自定义View。
