Android自定义Dialog之警告框1和警告框2 的实现(二)

这里的实现样式设计,还以圆角矩形为主。(PS: Google新出的原质化设计的确很赞,有时间一定要认真学学).

再看一下长得样子: 可以看出还是经典的警告框设计,主要包含窗口遮罩、对话框标题、描述及按钮等组成部分。详细的实现细节,看下文。

Dialog_alert_1

Dialog_alert_2


具体实现

MainActivity中Button(警告框1,2)的事件监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Button buttonOk = (Button) findViewById(R.id.button1);
buttonOk.setOnClickListener(new Button.OnClickListener() {
@Override
public void onClick(View arg0) {
DialogUtil.showCustomMessageOK(MainActivity.this, "Confirmation", "Just click OK to continue !");
}
});

Button buttonOkCancel = (Button) findViewById(R.id.button2);
buttonOkCancel.setOnClickListener(new Button.OnClickListener() {
@Override
public void onClick(View arg0) {
DialogUtil.showCustomMessage(MainActivity.this, "Alert", "Are you sure you want continue?");
}
});

真正的实现在DialogUtil.showCustomMessage()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/**
* 含取消和确定按钮的对话框
*
* @param context
* @param pTitle
* @param pMsg
*/
public static void showCustomMessage(Context context, String pTitle, final String pMsg) {
final Dialog lDialog = new Dialog(context, R.style.alert_dialog);

// 设置窗口遮罩,点击警告框之外的部分对话框不消失
lDialog.setCanceledOnTouchOutside(false);

// 设置不可以用“返回键”取消
lDialog.setCancelable(false);

// 设置窗口默认不显示标题栏
lDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

lDialog.setContentView(R.layout.ok_cancel_activity);

((TextView) lDialog.findViewById(R.id.dialog_title)).setText(pTitle);
((TextView) lDialog.findViewById(R.id.dialog_message)).setText(pMsg);

((Button) lDialog.findViewById(R.id.cancel))
.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
lDialog.dismiss();
}
});

((Button) lDialog.findViewById(R.id.ok)).setText("确 定");
((Button) lDialog.findViewById(R.id.ok))
.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
lDialog.dismiss();
}
});
lDialog.show();
}

/**
* it will show the OK dialog like iphone, make sure no keyboard is visible
*
* @param pTitle title for dialog
* @param pMsg msg for body
*/
public static void showCustomMessageOK(Context context, String pTitle, final String pMsg) {
final Dialog lDialog = new Dialog(context, R.style.alert_dialog);

// 设置窗口遮罩,点击警告框之外的部分对话框不消失
lDialog.setCanceledOnTouchOutside(false);

// 设置不可以用“返回键”取消
lDialog.setCancelable(false);

// 设置窗口默认不显示标题栏

lDialog.setContentView(R.layout.simple_ok_activity);

((TextView) lDialog.findViewById(R.id.dialog_title)).setText(pTitle);
((TextView) lDialog.findViewById(R.id.dialog_message)).setText(pMsg);

((Button) lDialog.findViewById(R.id.ok)).setText("确 定");
((Button) lDialog.findViewById(R.id.ok))
.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
lDialog.dismiss();
}
});
lDialog.show();
}

在Style.xml中设置自定义的alert_dialog.xml

1
2
3
4
5
6
7
8
<!-- 自定义alert dialog -->
<style name="alert_dialog" parent="android:style/Theme.Dialog">
<item name="android:windowFrame">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">@drawable/corners_white_bg</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>

警告框主布局simple_ok_activity.xml文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical">

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:textColor="@color/black"
android:text="About to call 323"
android:textSize="18sp"
android:id="@+id/dialog_title" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:textSize="16sp"
android:textColor="@color/black"
android:text="Are you sure you want to proceed?"
android:id="@+id/dialog_message" />

<Button
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@drawable/login_btn_select_bg"
android:layout_margin="10dp"
android:text="确定"
android:textSize="16dp"
android:id="@+id/ok" />
</LinearLayout>
</LinearLayout>

警告框2 ok_cancel_activity.xml文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical">

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="17dp"
android:textColor="@color/black"
android:text="About to call 323"
android:textSize="18sp"
android:id="@+id/dialog_title" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:textSize="16sp"
android:textColor="@color/black"
android:text="Are you sure you want to proceed?"
android:id="@+id/dialog_message" />

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

<Button
android:layout_height="40dp"
android:layout_width="0dp"
android:background="@drawable/login_btn_select_bg"
android:layout_weight="0.5"
android:layout_gravity="left"
android:textColor="@color/black"
android:text="取 消"
android:layout_marginLeft="10dp"
android:id="@+id/cancel" />

<Button
android:layout_height="40dp"
android:layout_width="0dp"
android:background="@drawable/login_btn_select_bg"
android:text="确 定"
android:layout_weight="0.5"
android:layout_marginLeft="8dp"
android:textColor="@color/black"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:id="@+id/ok" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

还差一个自定义的样式corners_white_bg.xml:

放在drawable文件夹下,没有的话新建。

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke
android:width="0.01dp"
android:color="#e3e3e3" />
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp" />
</shape>

这样警告框1,2 基本上就完成了,下篇文章中将介绍一下进度条自定义dialog的实现!

0%