The NoteBook of EricKong
  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  611 Posts :: 1 Stories :: 190 Comments :: 0 Trackbacks
android自定义弹出框样式实现

做项目时，感觉android自带的弹出框样式比较丑，很多应用都是自己做的弹出框，这里也试着自己做了一个。

废话不说先上图片：



实现机制

1.先自定义一个弹出框的样式

2.自己实现CustomDialog类，继承自Dialog，实现里面方法，在里面加载自定义样式的弹出框；

3.使用时，与使用Dialog一样

具体代码

dialog_normal_layout.xml样式文件

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:clickable="true"  
  6.     android:orientation="vertical"  
  7.     android:padding="20.0dip" >  
  8.   
  9.     <LinearLayout  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_gravity="center"  
  13.         android:background="@drawable/bg_bombbox"  
  14.         android:orientation="vertical" >  
  15.   
  16.         <TextView  
  17.             android:id="@+id/title"  
  18.             style="@style/text_18_ffffff"  
  19.             android:layout_width="fill_parent"  
  20.             android:layout_height="40.0dip"  
  21.             android:gravity="center"  
  22.             android:text="@string/title_alert"  
  23.             android:visibility="visible" />  
  24.   
  25.         <TextView  
  26.             android:id="@+id/message"  
  27.             style="@style/text_16_666666"  
  28.             android:layout_width="fill_parent"  
  29.             android:layout_height="wrap_content"  
  30.             android:gravity="left|center"  
  31.             android:lineSpacingMultiplier="1.5"  
  32.             android:minHeight="120.0dip"  
  33.             android:paddingBottom="15.0dip"  
  34.             android:paddingLeft="20.0dip"  
  35.             android:paddingRight="20.0dip"  
  36.             android:paddingTop="15.0dip" />  
  37.   
  38.         <View  
  39.             android:layout_width="fill_parent"  
  40.             android:layout_height="1.0px"  
  41.             android:background="#ffd0d0d0" />  
  42.   
  43.         <LinearLayout  
  44.             android:layout_width="fill_parent"  
  45.             android:layout_height="60.0dip"  
  46.             android:layout_gravity="bottom"  
  47.             android:background="@drawable/dialog_bottom_bg"  
  48.             android:gravity="center"  
  49.             android:orientation="horizontal" >  
  50.   
  51.             <Button  
  52.                 android:id="@+id/positiveButton"  
  53.                 style="@style/text_15_ffffff_sdw"  
  54.                 android:layout_width="114.0dip"  
  55.                 android:layout_height="40.0dip"  
  56.                 android:background="@drawable/btn_ok_selector"  
  57.                 android:gravity="center"  
  58.                 android:text="@string/ok" />  
  59.   
  60.             <Button  
  61.                 android:id="@+id/negativeButton"  
  62.                 style="@style/text_15_666666_sdw"  
  63.                 android:layout_width="114.0dip"  
  64.                 android:layout_height="40.0dip"  
  65.                 android:layout_marginLeft="20.0dip"  
  66.                 android:background="@drawable/btn_cancel_selector"  
  67.                 android:gravity="center"  
  68.                 android:text="@string/cancel" />  
  69.         </LinearLayout>  
  70.     </LinearLayout>  
  71.   
  72. </FrameLayout>  

其中引用的样式文件styles.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources xmlns:android="http://schemas.android.com/apk/res/android">  
  3.   
  4.     <style name="AppBaseTheme" parent="android:Theme.Light"></style>  
  5.   
  6.     <style name="AppTheme" parent="AppBaseTheme"></style>  
  7.   
  8.     <style name="text_18_ffffff">  
  9.         <item name="android:textSize">18.0dip</item>  
  10.         <item name="android:textColor">#ffffffff</item>  
  11.     </style>  
  12.   
  13.     <style name="text_16_666666">  
  14.         <item name="android:textSize">16.0dip</item>  
  15.         <item name="android:textColor">#ff666666</item>  
  16.     </style>  
  17.   
  18.     <style name="sdw_white">  
  19.         <item name="android:shadowColor">#7fffffff</item>  
  20.         <item name="android:shadowDx">0.0</item>  
  21.         <item name="android:shadowDy">0.65</item>  
  22.         <item name="android:shadowRadius">1.0</item>  
  23.     </style>  
  24.   
  25.     <style name="sdw_79351b">  
  26.         <item name="android:shadowColor">#ff79351b</item>  
  27.         <item name="android:shadowDx">0.0</item>  
  28.         <item name="android:shadowDy">1.0</item>  
  29.         <item name="android:shadowRadius">1.0</item>  
  30.     </style>  
  31.   
  32.     <style name="text_15_ffffff_sdw" parent="@style/sdw_79351b">  
  33.         <item name="android:textSize">15.0dip</item>  
  34.         <item name="android:textColor">#ffffffff</item>  
  35.     </style>  
  36.   
  37.     <style name="text_15_666666_sdw" parent="@style/sdw_white">  
  38.         <item name="android:textSize">15.0dip</item>  
  39.         <item name="android:textColor">#ff666666</item>  
  40.     </style>  
  41.   
  42.     <style name="Dialog" parent="android:style/Theme.Dialog">  
  43.         <item name="android:background">#00000000</item>  
  44.         <item name="android:windowBackground">@android:color/transparent</item>  
  45.         <item name="android:windowNoTitle">true</item>  
  46.         <item name="android:windowIsFloating">true</item>  
  47.     </style>  
  48.   
  49. </resources>  

自定义Dialog的实现类CustomDialog

  1. package com.dyr.custom;  
  2.   
  3. import android.app.Dialog;  
  4. import android.content.Context;  
  5. import android.content.DialogInterface;  
  6. import android.view.LayoutInflater;  
  7. import android.view.View;  
  8. import android.view.ViewGroup.LayoutParams;  
  9. import android.widget.Button;  
  10. import android.widget.LinearLayout;  
  11. import android.widget.TextView;  
  12.   
  13. import com.dyr.view.R;  
  14.   
  15. public class CustomDialog extends Dialog {  
  16.   
  17.     public CustomDialog(Context context) {  
  18.         super(context);  
  19.     }  
  20.   
  21.     public CustomDialog(Context context, int theme) {  
  22.         super(context, theme);  
  23.     }  
  24.   
  25.     public static class Builder {  
  26.         private Context context;  
  27.         private String title;  
  28.         private String message;  
  29.         private String positiveButtonText;  
  30.         private String negativeButtonText;  
  31.         private View contentView;  
  32.         private DialogInterface.OnClickListener positiveButtonClickListener;  
  33.         private DialogInterface.OnClickListener negativeButtonClickListener;  
  34.   
  35.         public Builder(Context context) {  
  36.             this.context = context;  
  37.         }  
  38.   
  39.         public Builder setMessage(String message) {  
  40.             this.message = message;  
  41.             return this;  
  42.         }  
  43.   
  44.         /** 
  45.          * Set the Dialog message from resource 
  46.          *  
  47.          * @param title 
  48.          * @return 
  49.          */  
  50.         public Builder setMessage(int message) {  
  51.             this.message = (String) context.getText(message);  
  52.             return this;  
  53.         }  
  54.   
  55.         /** 
  56.          * Set the Dialog title from resource 
  57.          *  
  58.          * @param title 
  59.          * @return 
  60.          */  
  61.         public Builder setTitle(int title) {  
  62.             this.title = (String) context.getText(title);  
  63.             return this;  
  64.         }  
  65.   
  66.         /** 
  67.          * Set the Dialog title from String 
  68.          *  
  69.          * @param title 
  70.          * @return 
  71.          */  
  72.   
  73.         public Builder setTitle(String title) {  
  74.             this.title = title;  
  75.             return this;  
  76.         }  
  77.   
  78.         public Builder setContentView(View v) {  
  79.             this.contentView = v;  
  80.             return this;  
  81.         }  
  82.   
  83.         /** 
  84.          * Set the positive button resource and it's listener 
  85.          *  
  86.          * @param positiveButtonText 
  87.          * @return 
  88.          */  
  89.         public Builder setPositiveButton(int positiveButtonText,  
  90.                 DialogInterface.OnClickListener listener) {  
  91.             this.positiveButtonText = (String) context  
  92.                     .getText(positiveButtonText);  
  93.             this.positiveButtonClickListener = listener;  
  94.             return this;  
  95.         }  
  96.   
  97.         public Builder setPositiveButton(String positiveButtonText,  
  98.                 DialogInterface.OnClickListener listener) {  
  99.             this.positiveButtonText = positiveButtonText;  
  100.             this.positiveButtonClickListener = listener;  
  101.             return this;  
  102.         }  
  103.   
  104.         public Builder setNegativeButton(int negativeButtonText,  
  105.                 DialogInterface.OnClickListener listener) {  
  106.             this.negativeButtonText = (String) context  
  107.                     .getText(negativeButtonText);  
  108.             this.negativeButtonClickListener = listener;  
  109.             return this;  
  110.         }  
  111.   
  112.         public Builder setNegativeButton(String negativeButtonText,  
  113.                 DialogInterface.OnClickListener listener) {  
  114.             this.negativeButtonText = negativeButtonText;  
  115.             this.negativeButtonClickListener = listener;  
  116.             return this;  
  117.         }  
  118.   
  119.         public CustomDialog create() {  
  120.             LayoutInflater inflater = (LayoutInflater) context  
  121.                     .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  122.             // instantiate the dialog with the custom Theme  
  123.             final CustomDialog dialog = new CustomDialog(context,R.style.Dialog);  
  124.             View layout = inflater.inflate(R.layout.dialog_normal_layout, null);  
  125.             dialog.addContentView(layout, new LayoutParams(  
  126.                     LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));  
  127.             // set the dialog title  
  128.             ((TextView) layout.findViewById(R.id.title)).setText(title);  
  129.             // set the confirm button  
  130.             if (positiveButtonText != null) {  
  131.                 ((Button) layout.findViewById(R.id.positiveButton))  
  132.                         .setText(positiveButtonText);  
  133.                 if (positiveButtonClickListener != null) {  
  134.                     ((Button) layout.findViewById(R.id.positiveButton))  
  135.                             .setOnClickListener(new View.OnClickListener() {  
  136.                                 public void onClick(View v) {  
  137.                                     positiveButtonClickListener.onClick(dialog,  
  138.                                             DialogInterface.BUTTON_POSITIVE);  
  139.                                 }  
  140.                             });  
  141.                 }  
  142.             } else {  
  143.                 // if no confirm button just set the visibility to GONE  
  144.                 layout.findViewById(R.id.positiveButton).setVisibility(  
  145.                         View.GONE);  
  146.             }  
  147.             // set the cancel button  
  148.             if (negativeButtonText != null) {  
  149.                 ((Button) layout.findViewById(R.id.negativeButton))  
  150.                         .setText(negativeButtonText);  
  151.                 if (negativeButtonClickListener != null) {  
  152.                     ((Button) layout.findViewById(R.id.negativeButton))  
  153.                             .setOnClickListener(new View.OnClickListener() {  
  154.                                 public void onClick(View v) {  
  155.                                     negativeButtonClickListener.onClick(dialog,  
  156.                                             DialogInterface.BUTTON_NEGATIVE);  
  157.                                 }  
  158.                             });  
  159.                 }  
  160.             } else {  
  161.                 // if no confirm button just set the visibility to GONE  
  162.                 layout.findViewById(R.id.negativeButton).setVisibility(  
  163.                         View.GONE);  
  164.             }  
  165.             // set the content message  
  166.             if (message != null) {  
  167.                 ((TextView) layout.findViewById(R.id.message)).setText(message);  
  168.             } else if (contentView != null) {  
  169.                 // if no message set  
  170.                 // add the contentView to the dialog body  
  171.                 ((LinearLayout) layout.findViewById(R.id.message))  
  172.                         .removeAllViews();  
  173.                 ((LinearLayout) layout.findViewById(R.id.message)).addView(  
  174.                         contentView, new LayoutParams(  
  175.                                 LayoutParams.WRAP_CONTENT,  
  176.                                 LayoutParams.WRAP_CONTENT));  
  177.             }  
  178.             dialog.setContentView(layout);  
  179.             return dialog;  
  180.         }  
  181.   
  182.     }  
  183. }  

使用代码

  1. CustomDialog.Builder builder = new CustomDialog.Builder(this);  
  2.         builder.setMessage("这个就是自定义的提示框");  
  3.         builder.setTitle("提示");  
  4.         builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {  
  5.             public void onClick(DialogInterface dialog, int which) {  
  6.                 dialog.dismiss();  
  7.                 //设置你的操作事项  
  8.             }  
  9.         });  
  10.   
  11.         builder.setNegativeButton("取消",  
  12.                 new android.content.DialogInterface.OnClickListener() {  
  13.                     public void onClick(DialogInterface dialog, int which) {  
  14.                         dialog.dismiss();  
  15.                     }  
  16.                 });  
  17.   
  18.         builder.create().show();  

至此，自定义弹出框已经完成，是不是感觉很简单呢。

这里附上一个自定义弹出框的小项目代码下载地址：点击打开链接

posted on 2014-12-16 17:24 Eric_jiang 阅读(416) 评论(0)  编辑  收藏 所属分类: Android

只有注册用户登录后才能发表评论。
网站导航: