devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：weixin_40725706 | 2024-03-26 17:09:14

赞

踩

自定义dialog

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

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

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

 

[html]  view plain  copy
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  1. selfDialog = new SelfDialog(MainActivity.this);  
  2. selfDialog.setTitle("提示");  
  3. selfDialog.setMessage("确定退出应用?");  

 

  

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

 

[java]  view plain  copy
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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传递点击事件。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/318470
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号