前言
彈窗是指打開網(wǎng)頁、軟件、手機(jī)APP等的時(shí)候自動(dòng)彈出的窗口，目前主要流行的彈出方式是快速進(jìn)入網(wǎng)頁游戲的快捷途徑。 在android彈窗是非常常見與實(shí)用的控件，相信很多朋友都使用過彈窗。這篇文章想和大家分享一下彈窗的相關(guān)知識。
彈窗的分類和區(qū)別
彈窗分為模態(tài)彈窗和非模態(tài)彈窗兩種，這兩者最主要的區(qū)別在于需不需要用戶對其進(jìn)行回應(yīng)。模態(tài)彈窗會(huì)打斷用戶的正常操作，要求用戶必須對其進(jìn)行回應(yīng)，否則不能繼續(xù)其它操作行為，比如說：Dialog；非模態(tài)彈窗則不會(huì)影響用戶的操作，用戶可以不對其進(jìn)行回應(yīng)，非模態(tài)彈窗通常都有時(shí)間限制，出現(xiàn)一段時(shí)間后就會(huì)自動(dòng)消失，比如說：Toast。
彈窗分類
根據(jù)模態(tài)彈窗和非模態(tài)彈窗的區(qū)別，當(dāng)只是需要告知用戶信息，不需要用戶操作，一般設(shè)計(jì)為非模態(tài)彈窗；需要用戶進(jìn)行一定的操作時(shí)我們使用模態(tài)彈窗。
仿IOS 的Dialog
IOS和Android在彈窗方面有一些不同，但是在實(shí)際開發(fā)中，設(shè)計(jì)者往往偏向于IOS的彈窗設(shè)計(jì)。所以，對于Android開發(fā)者，勢必要學(xué)習(xí)幾種常見的仿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中，背景模糊是非常常見的。想要達(dá)到這一目的，最常見的做法是對此頁面進(jìn)行切圖，在對圖片進(jìn)行模糊。操作實(shí)在麻煩，因此我使用了半透明顏色來代替。當(dāng)然，如果需求確實(shí)需要，也可以做比較復(fù)雜的操作。
<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>
布局已經(jīng)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已經(jīng)完成了，我們簡單的使用一下吧。
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();
一起來看看最終的效果吧，還不錯(cuò)。
最終效果
小結(jié)
這里我只提供了大部分核心代碼，希望對廣大安卓開發(fā)者有所幫助。也希望通過這個(gè)例子，更加清楚的認(rèn)識到彈窗的知識。在這篇文章中，我自定義了一個(gè)仿IOS的Dialog，在android開發(fā)者，自定義View是一塊非常實(shí)用的知識。下一期我想和大家分享的是：Android自定義View。
