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

Posted on | In
Symbols count in article: 37k | Reading time ≈ 33 mins.

这里的实现样式设计，还以圆角矩形为主。(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%