自定义Dialog的详细步骤（实现自定义样式一般原理）

Posted 2021-01-07 im-victor

    现在很多App的提示对话框都非常有个性，然而你还用系统的对话框样式，是不是觉得很落后呢，今天我就给大家讲讲怎样自定义自己的Dialog，学会了之后，你就会根据自家app的主题，设计出相应的Dialog的风格。

      好了接下来我就以一个简单风格的自定义Dialog来讲讲自定义dialog的一般步骤和原理。

     第一步: 给Dialog设置一个风格主题（基本都是用这个主题）无边框全透明背景：

 

[html] view plain copy

 

 

1. <!--自定义dialog背景全透明无边框theme -->  
2.     <style name="MyDialog" parent="android:style/Theme.Dialog">  
3.         <!--背景颜色及和透明程度-->  
4.         <item name="android:windowBackground">@android:color/transparent</item>  
5.         <!--是否去除标题 -->  
6.         <item name="android:windowNoTitle">true</item>  
7.         <!--是否去除边框-->  
8.         <item name="android:windowFrame">@null</item>  
9.         <!--是否浮现在activity之上-->  
10.         <item name="android:windowIsFloating">true</item>  
11.         <!--是否模糊-->  
12.         <item name="android:backgroundDimEnabled">false</item>  
13.     </style>  

 

 

 

 

 

     第二步：给自定的Dialog设置自定义的 xml界面,我这里只是示范，你可以使用单选，多选，3个按钮，4个按钮等等，格式各样的自定义XML，我这里就定义了 标题title，信息message，还有一个确定按钮和取消按钮，如下：

 

[html] view plain copy

 

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="#11ffffff">  
6.   
7.     <LinearLayout  
8.         android:layout_width="260dp"  
9.         android:layout_height="wrap_content"  
10.         android:layout_centerInParent="true"  
11.         android:background="@drawable/free_dialog_bg"  
12.         android:orientation="vertical">  
13.   
14.         <TextView  
15.             android:id="@+id/title"  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:layout_gravity="center"  
19.             android:layout_margin="15dp"  
20.             android:gravity="center"  
21.             android:text="消息提示"  
22.             android:textColor="#38ADFF"  
23.             android:textSize="16sp" />  
24.   
25.         <TextView  
26.             android:id="@+id/message"  
27.             android:layout_width="wrap_content"  
28.             android:layout_height="wrap_content"  
29.             android:layout_marginLeft="20dp"  
30.             android:layout_marginRight="20dp"  
31.             android:text="提示消息" />  
32.   
33.         <View  
34.             android:layout_width="match_parent"  
35.             android:layout_height="1px"  
36.             android:layout_marginTop="15dp"  
37.             android:background="#E4E4E4" />  
38.   
39.         <LinearLayout  
40.             android:layout_width="match_parent"  
41.             android:layout_height="40dp"  
42.             android:orientation="horizontal">  
43.   
44.             <Button  
45.                 android:id="@+id/no"  
46.                 android:layout_width="0dp"  
47.                 android:layout_height="match_parent"  
48.                 android:layout_marginLeft="10dp"  
49.                 android:layout_weight="1"  
50.                 android:background="@null"  
51.                 android:gravity="center"  
52.                 android:singleLine="true"  
53.                 android:text="No"  
54.                 android:textColor="#7D7D7D"  
55.                 android:textSize="16sp" />  
56.   
57.             <View  
58.                 android:layout_width="1px"  
59.                 android:layout_height="match_parent"  
60.                 android:background="#E4E4E4" />  
61.   
62.             <Button  
63.                 android:id="@+id/yes"  
64.                 android:layout_width="0dp"  
65.                 android:layout_height="match_parent"  
66.                 android:layout_marginRight="10dp"  
67.                 android:layout_weight="1"  
68.                 android:background="@null"  
69.                 android:gravity="center"  
70.                 android:singleLine="true"  
71.                 android:text="Yes"  
72.                 android:textColor="#38ADFF"  
73.                 android:textSize="16sp" />  
74.         </LinearLayout>  
75.     </LinearLayout>  
76.   
77. </RelativeLayout>  

 

 

 

 

 

  dialog的自定义背景框如下：

 

[html] view plain copy

 

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <solid android:color="#ffffff" />  
5.     <stroke  
6.         android:width="0.8dp"  
7.         android:color="#ffffff" />  
8.     <!-- 圆角 -->  
9.     <corners android:radius="6dp" />  
10.   
11. </shape>  

 

 

 

 

 

最后的样子如下，红框中的部分( 非常简洁，但是市面上很多app都使用这个样式):

 

    第三步：继承Dialog实现自定义的Dialog，先上代码，供大家欣赏下：

     

 

[java] view plain copy

 

 

1. package com.world.hello.selfdialog;  
2.   
3. import android.app.Dialog;  
4. import android.content.Context;  
5. import android.os.Bundle;  
6. import android.view.View;  
7. import android.widget.Button;  
8. import android.widget.TextView;  
9.   
10. /** 
11.  * 创建自定义的dialog，主要学习其实现原理 
12.  * Created by chengguo on 2016/3/22. 
13.  */  
14. public class SelfDialog extends Dialog {  
15.   
16.     private Button yes;//确定按钮  
17.     private Button no;//取消按钮  
18.     private TextView titleTv;//消息标题文本  
19.     private TextView messageTv;//消息提示文本  
20.     private String titleStr;//从外界设置的title文本  
21.     private String messageStr;//从外界设置的消息文本  
22.     //确定文本和取消文本的显示内容  
23.     private String yesStr, noStr;  
24.   
25.     private onNoOnclickListener noOnclickListener;//取消按钮被点击了的监听器  
26.     private onYesOnclickListener yesOnclickListener;//确定按钮被点击了的监听器  
27.   
28.     /** 
29.      * 设置取消按钮的显示内容和监听 
30.      * 
31.      * @param str 
32.      * @param onNoOnclickListener 
33.      */  
34.     public void setNoOnclickListener(String str, onNoOnclickListener onNoOnclickListener) {  
35.         if (str != null) {  
36.             noStr = str;  
37.         }  
38.         this.noOnclickListener = onNoOnclickListener;  
39.     }  
40.   
41.     /** 
42.      * 设置确定按钮的显示内容和监听 
43.      * 
44.      * @param str 
45.      * @param onYesOnclickListener 
46.      */  
47.     public void setYesOnclickListener(String str, onYesOnclickListener onYesOnclickListener) {  
48.         if (str != null) {  
49.             yesStr = str;  
50.         }  
51.         this.yesOnclickListener = onYesOnclickListener;  
52.     }  
53.   
54.     public SelfDialog(Context context) {  
55.         super(context, R.style.MyDialog);  
56.     }  
57.   
58.     @Override  
59.     protected void onCreate(Bundle savedInstanceState) {  
60.         super.onCreate(savedInstanceState);  
61.         setContentView(R.layout.free_exercise_sure_dialog_layout);  
62.         //按空白处不能取消动画  
63.         setCanceledOnTouchOutside(false);  
64.   
65.         //初始化界面控件  
66.         initView();  
67.         //初始化界面数据  
68.         initData();  
69.         //初始化界面控件的事件  
70.         initEvent();  
71.           
72.     }  
73.   
74.     /** 
75.      * 初始化界面的确定和取消监听器 
76.      */  
77.     private void initEvent() {  
78.         //设置确定按钮被点击后，向外界提供监听  
79.         yes.setOnClickListener(new View.OnClickListener() {  
80.             @Override  
81.             public void onClick(View v) {  
82.                 if (yesOnclickListener != null) {  
83.                     yesOnclickListener.onYesClick();  
84.                 }  
85.             }  
86.         });  
87.         //设置取消按钮被点击后，向外界提供监听  
88.         no.setOnClickListener(new View.OnClickListener() {  
89.             @Override  
90.             public void onClick(View v) {  
91.                 if (noOnclickListener != null) {  
92.                     noOnclickListener.onNoClick();  
93.                 }  
94.             }  
95.         });  
96.     }  
97.   
98.     /** 
99.      * 初始化界面控件的显示数据 
100.      */  
101.     private void initData() {  
102.         //如果用户自定了title和message  
103.         if (titleStr != null) {  
104.             titleTv.setText(titleStr);  
105.         }  
106.         if (messageStr != null) {  
107.             messageTv.setText(messageStr);  
108.         }  
109.         //如果设置按钮的文字  
110.         if (yesStr != null) {  
111.             yes.setText(yesStr);  
112.         }  
113.         if (noStr != null) {  
114.             no.setText(noStr);  
115.         }  
116.     }  
117.   
118.     /** 
119.      * 初始化界面控件 
120.      */  
121.     private void initView() {  
122.         yes = (Button) findViewById(R.id.yes);  
123.         no = (Button) findViewById(R.id.no);  
124.         titleTv = (TextView) findViewById(R.id.title);  
125.         messageTv = (TextView) findViewById(R.id.message);  
126.     }  
127.   
128.     /** 
129.      * 从外界Activity为Dialog设置标题 
130.      * 
131.      * @param title 
132.      */  
133.     public void setTitle(String title) {  
134.         titleStr = title;  
135.     }  
136.   
137.     /** 
138.      * 从外界Activity为Dialog设置dialog的message 
139.      * 
140.      * @param message 
141.      */  
142.     public void setMessage(String message) {  
143.         messageStr = message;  
144.     }  
145.   
146.     /** 
147.      * 设置确定按钮和取消被点击的接口 
148.      */  
149.     public interface onYesOnclickListener {  
150.         public void onYesClick();  
151.     }  
152.   
153.     public interface onNoOnclickListener {  
154.         public void onNoClick();  
155.     }  
156. }  

 

 

 

主actvitiy的代码如下:

 

[java] view plain copy

 

 

1. package com.world.hello.selfdialog;  
2.   
3. import android.support.v7.app.AppCompatActivity;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.widget.Toast;  
7.   
8. public class MainActivity extends AppCompatActivity {  
9.   
10.     private SelfDialog selfDialog;  
11.   
12.     @Override  
13.     protected void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         setContentView(R.layout.activity_main);  
16.   
17.         findViewById(R.id.self_dialog).setOnClickListener(new View.OnClickListener() {  
18.             @Override  
19.             public void onClick(View v) {  
20.   
21.                 selfDialog = new SelfDialog(MainActivity.this);  
22.                 selfDialog.setTitle("提示");  
23.                 selfDialog.setMessage("确定退出应用?");  
24.                 selfDialog.setYesOnclickListener("确定", new SelfDialog.onYesOnclickListener() {  
25.                     @Override  
26.                     public void onYesClick() {  
27.                         Toast.makeText(MainActivity.this,"点击了--确定--按钮",Toast.LENGTH_LONG).show();  
28.                         selfDialog.dismiss();  
29.                     }  
30.                 });  
31.                 selfDialog.setNoOnclickListener("取消", new SelfDialog.onNoOnclickListener() {  
32.                     @Override  
33.                     public void onNoClick() {  
34.                         Toast.makeText(MainActivity.this,"点击了--取消--按钮",Toast.LENGTH_LONG).show();  
35.                         selfDialog.dismiss();  
36.                     }  
37.                 });  
38.                 selfDialog.show();  
39.             }  
40.         });  
41.     }  
42. }  

 

 

 

 

下面是gif示例图：

 

       

 

     点击打开链接下载实例，免积分

   

     好了，看了上面的例子，大家是不是觉得，以后都可以自定义自己的dialog了呢，这里在给大家讲讲具体原理：

      就拿本例来说，我定义了一个title，一个message，一个确定按钮，一个取消按钮。

      1、通过构造方法给dialog设置一个主题 R.style.MyDialog ， 主要设置dialog的显示属性，一般都是 全透明无边框 ；

      2、然后在dialog的onCreate（）方法中，用setContentView( R.layout.SelfDialog) 为dialog设置XML文件，我们就可以在layout文件中创建自定义的Dialog风格。这里我就自定义了xml文件格式，实现了自定义的外观风格，不受系统的主题影响。

      3、然后通过设置要为外界设置一些public 公开的方法，来向自定义的dialog传递值。这里的title 和 message，都是可以通过外界传值进来，进行设置的。如下面的public 方法就是供外界activity来设置title和message的:

 

[java] view plain copy

 

 

1. /** 
2.     * 从外界Activity为Dialog设置标题 
3.     * 
4.     * @param title 
5.     */  
6.    public void setTitle(String title) {  
7.        titleStr = title;  
8.    }  
9.   
10.    /** 
11.     * 从外界Activity为Dialog设置dialog的message 
12.     * 
13.     * @param message 
14.     */  
15.    public void setMessage(String message) {  
16.        messageStr = message;  
17.    }  

 

 

        在activity通过实例化Dialog后就可以设置titile和message了。

 

[java] view plain copy

 

 

1. selfDialog = new SelfDialog(MainActivity.this);  
2. selfDialog.setTitle("提示");  
3. selfDialog.setMessage("确定退出应用?");  

 

  

  4、最后，自定义的dialog中包含了一些按钮的时候，这个时候要想让按钮有点击事件，并且把这个点击事件能够传递给activity，让acitvity做一些事情，这里就需要设置监听接口，让button的点击事件能够让外界activity知道。如下面的代码。

 

[java] view plain copy

 

 

1. /** 
2.     * 设置确定按钮和取消被点击的接口 
3.     */  
4.    public interface onYesOnclickListener {  
5.        public void onYesClick();  
6.    }  
7.   
8.    public interface onNoOnclickListener {  
9.        public void onNoClick();  
10.    }  

[java] view plain copy

 

 

1. private onNoOnclickListener noOnclickListener;//取消按钮被点击了的监听器  
2.    private onYesOnclickListener yesOnclickListener;//确定按钮被点击了的监听器  
3.   
4.    /** 
5.     * 设置取消按钮的显示内容和监听 
6.     * 
7.     * @param str 
8.     * @param onNoOnclickListener 
9.     */  
10.    public void setNoOnclickListener(String str, onNoOnclickListener onNoOnclickListener) {  
11.        if (str != null) {  
12.            noStr = str;  
13.        }  
14.        this.noOnclickListener = onNoOnclickListener;  
15.    }  
16.   
17.    /** 
18.     * 设置确定按钮的显示内容和监听 
19.     * 
20.     * @param str 
21.     * @param onYesOnclickListener 
22.     */  
23.    public void setYesOnclickListener(String str, onYesOnclickListener onYesOnclickListener) {  
24.        if (str != null) {  
25.            yesStr = str;  
26.        }  
27.        this.yesOnclickListener = onYesOnclickListener;  
28.    }  

[java] view plain copy

 

 

1. //设置确定按钮被点击后，向外界提供监听  
2.        yes.setOnClickListener(new View.OnClickListener() {  
3.            @Override  
4.            public void onClick(View v) {  
5.                if (yesOnclickListener != null) {  
6.                    yesOnclickListener.onYesClick();  
7.                }  
8.            }  
9.        });  
10.        //设置取消按钮被点击后，向外界提供监听  
11.        no.setOnClickListener(new View.OnClickListener() {  
12.            @Override  
13.            public void onClick(View v) {  
14.                if (noOnclickListener != null) {  
15.                    noOnclickListener.onNoClick();  
16.                }  
17.            }  
18.        });  

   activity就可以设置监听接口来实时获取button的点击事件如下：

 

 

 

[java] view plain copy

 

 

1. selfDialog.setYesOnclickListener("确定", new SelfDialog.onYesOnclickListener() {  
2.                    @Override  
3.                    public void onYesClick() {  
4.                        Toast.makeText(MainActivity.this,"点击了--确定--按钮",Toast.LENGTH_LONG).show();  
5.                        selfDialog.dismiss();  
6.                    }  
7.                });  
8.                selfDialog.setNoOnclickListener("取消", new SelfDialog.onNoOnclickListener() {  
9.                    @Override  
10.                    public void onNoClick() {  
11.                        Toast.makeText(MainActivity.this,"点击了--取消--按钮",Toast.LENGTH_LONG).show();  
12.                        selfDialog.dismiss();  
13.                    }  
14.                });  

 

 

 

     通过上面4步的详细讲解，就能知道自定义dialog的一般原理，基本就是  要为dialog设置一些基本的文字信息时，就直接用公开方法public 的方法，让外界直接设置；如果要让activity监听到button之类的点击事件就自定义接口，用监听接口的方式向activity传递点击事件。