碼上快樂

相關內容    簡體    繁體

自定義Dialog的詳細步驟

本文轉載自   查看原文   2017-08-04 12:23   22095 

自定義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傳遞點擊事件。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 自定義Dialog的詳細步驟（實現自定義樣式一般原理） Android自定義Dialog 非自定義和自定義Dialog的介紹！！！ Dialog自定義樣式的設置 Android 自定義Dialog 去除陰影 自定義listview的步驟 Android開發之自定義Dialog簡單實現 Android自定義對話框(Dialog)位置,大小 Android 自定義對話框(Dialog)位置,大小 自定義Dialog寬度占滿屏幕
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM