在开发Android项目的过程中,弹出框真的是我们的常见的一种互动式窗体,但是Android系统自带的弹出框往往都不能满足我们的需要,大多数的时候需要我们自定义一种更漂亮的窗体来来展示给用户。
接下来是我很久之前用的一个自定义弹出框,记录一下,以便自己日后使用。
0、先来一张效果图
1、先定义个一个继承自Dialog的自定义弹框CustomDialog
import android.app.Dialog;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
/**
* 作者 Aaron Zhao
* 时间 2015/9/16 11:21
* 名称 CustomDialog.java 描述
*/
public class CustomDialog extends Dialog {
/* Constructor */
private CustomDialog(Context context) {
super(context);
}
private CustomDialog(Context context, int themeResId) {
super(context, themeResId);
}
private CustomDialog(Context context, boolean cancelable, OnCancelListener cancelListener) {
super(context, cancelable, cancelListener);
}
/* Builder */
public static class Builder {
private TextView tvTitle, tvWarning, tvInfo;
private Button btnCancel, btnConfirm;
private View mLayout;
private View.OnClickListener mButtonCancelClickListener;
private View.OnClickListener mButtonConfirmClickListener;
private CustomDialog mDialog;
public Builder(Context context) {
mDialog = new CustomDialog(context, R.style.custom_dialog);
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
// 加载布局文件
mLayout = inflater.inflate(R.layout.dialog_custom, null, false);
// 添加布局文件到 Dialog
mDialog.addContentView(mLayout, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
tvTitle = (TextView) mLayout.findViewById(R.id.tv_title);
tvWarning = (TextView) mLayout.findViewById(R.id.tv_warning);
tvInfo = (TextView) mLayout.findViewById(R.id.tv_info);
btnCancel = (Button) mLayout.findViewById(R.id.btn_cancel);
btnConfirm = (Button) mLayout.findViewById(R.id.btn_confirm);
}
/**
* 设置 Dialog 标题
*/
public Builder setTitle(String title) {
tvTitle.setText(title);
tvTitle.setVisibility(View.VISIBLE);
return this;
}
/**
* 设置 Warning
*/
public Builder setWarning(String waring) {
tvWarning.setText(waring);
if (waring == null || waring.equals("")) {
tvWarning.setVisibility(View.GONE);
}
return this;
}
/**
* 设置 Info
*/
public Builder setInfo(String message) {
tvInfo.setText(message);
return this;
}
/**
* 设置取消按钮文字和监听
*/
public Builder setButtonCancel(String text, View.OnClickListener listener) {
btnCancel.setText(text);
mButtonCancelClickListener = listener;
return this;
}
/**
* 设置确认按钮文字和监听
*/
public Builder setButtonConfirm(String text, View.OnClickListener listener) {
btnConfirm.setText(text);
mButtonConfirmClickListener = listener;
return this;
}
public CustomDialog create() {
btnCancel.setOnClickListener(new android.view.View.OnClickListener() {
@Override
public void onClick(View view) {
mDialog.dismiss();
mButtonCancelClickListener.onClick(view);
}
});
btnConfirm.setOnClickListener(new android.view.View.OnClickListener() {
@Override
public void onClick(View view) {
mDialog.dismiss();
mButtonConfirmClickListener.onClick(view);
}
});
mDialog.setContentView(mLayout);
mDialog.setCancelable(true);
mDialog.setCanceledOnTouchOutside(false);
return mDialog;
}
}
}
2、定义CustomDialo布局文件:dialog_custom
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
android:background="@drawable/rect_s_rounded_white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin_10"
android:layout_marginBottom="@dimen/margin_10"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="@dimen/size_18"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="@dimen/padding_10">
<TextView
android:id="@+id/tv_warning"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@android:color/holo_red_dark"
android:textSize="@dimen/size_14" />
<TextView
android:id="@+id/tv_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin_10"
android:textColor="@android:color/black"
android:textSize="@dimen/size_14" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin_10"
android:layout_marginBottom="@dimen/margin_10"
android:gravity="center"
android:orientation="horizontal"
android:padding="@dimen/padding_10">
<Button
android:id="@+id/btn_cancel"
android:layout_width="110dp"
android:layout_height="40dp"
android:layout_marginRight="25dp"
android:background="@drawable/button_gray_l_rounded_selector"
android:textColor="@android:color/black"
android:textSize="@dimen/size_14" />
<Button
android:id="@+id/btn_confirm"
android:layout_width="110dp"
android:layout_height="40dp"
android:background="@drawable/button_green_l_rounded_selector"
android:textColor="@android:color/white"
android:textSize="@dimen/size_14" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
3、定义CustomDialog样式文件:custom_dialog
<style name="custom_dialog" parent="@android:style/Theme.Dialog">
<item name="android:windowFrame">@null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:background">#00000000</item>
<item name="android:windowBackground">@color/transparent</item>
<item name="android:backgroundDimEnabled">true</item>
</style>
4、定义其中按钮样式:button_green_l_rounded_selector和button_gray_l_rounded_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<stroke android:color="@android:color/transparent" android:width="0dp"></stroke>
<gradient android:angle="180"
android:endColor="@color/button_green"
android:startColor="@color/button_green"></gradient>
<corners android:radius="50dp"></corners>
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<stroke android:color="@android:color/transparent" android:width="0dp"></stroke>
<gradient android:angle="180"
android:endColor="@color/button_green"
android:startColor="@color/button_green"></gradient>
<corners android:radius="50dp"></corners>
</shape>
</item>
<item android:state_pressed="false">
<shape android:shape="rectangle">
<stroke android:color="@android:color/transparent" android:width="0dp"></stroke>
<gradient android:angle="0"
android:endColor="@color/button_green"
android:startColor="@color/button_green"></gradient>
<corners android:radius="50dp"></corners>
</shape>
</item>
<item android:state_focused="false">
<shape android:shape="rectangle">
<stroke android:color="@android:color/transparent" android:width="0dp"></stroke>
<gradient android:angle="0"
android:endColor="@color/button_green"
android:startColor="@color/button_green"></gradient>
<corners android:radius="50dp"></corners>
</shape>
</item>
</selector>
5、具体使用
private void showDialog() {
OnClickListener onCancelClickListener = new OnClickListener() {
@Override
public void onClick(View v) {
MyDialog.showToast(WarehouseAddActivity.this, "取消");
}
};
OnClickListener onConfimClickListener = new OnClickListener() {
@Override
public void onClick(View v) {
MyDialog.showToast(WarehouseAddActivity.this, "确认");
}
};
showInfoDialog("", "请点击确认进行操作", "取消", onCancelClickListener, "确认", onConfimClickListener);
}
protected void showInfoDialog(String waring, String info, String cancelText, OnClickListener cancelOnClick, String confirmText,
OnClickListener confirmOnClick) {
CustomDialog.Builder builder = new CustomDialog.Builder(this);
builder.setTitle("提示");
builder.setWarning(waring);
builder.setInfo(info);
builder.setButtonCancel(cancelText, cancelOnClick);
builder.setButtonConfirm(confirmText, confirmOnClick);
CustomDialog customDialog = builder.create();
customDialog.show();
}