android自定义弹出框样式实现

2022-08-21 08:23:07

前言：

做项目时，感觉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. <LinearLayout
  9. android:layout_width="fill_parent"
  10. android:layout_height="wrap_content"
  11. android:layout_gravity="center"
  12. android:background="@drawable/bg_bombbox"
  13. android:orientation="vertical" >
  14. <TextView
  15. android:id="@+id/title"
  16. style="@style/text_18_ffffff"
  17. android:layout_width="fill_parent"
  18. android:layout_height="40.0dip"
  19. android:gravity="center"
  20. android:text="@string/title_alert"
  21. android:visibility="visible" />
  22. <LinearLayout
  23. android:id="@+id/content"
  24. android:layout_width="fill_parent"
  25. android:layout_height="wrap_content"
  26. android:gravity="center" >
  27. <TextView
  28. android:id="@+id/message"
  29. style="@style/text_16_666666"
  30. android:layout_width="fill_parent"
  31. android:layout_height="wrap_content"
  32. android:gravity="left|center"
  33. android:lineSpacingMultiplier="1.5"
  34. android:minHeight="120.0dip"
  35. android:paddingBottom="15.0dip"
  36. android:paddingLeft="20.0dip"
  37. android:paddingRight="20.0dip"
  38. android:paddingTop="15.0dip" />
  39. </LinearLayout>
  40. <View
  41. android:layout_width="fill_parent"
  42. android:layout_height="1.0px"
  43. android:background="#ffd0d0d0" />
  44. <LinearLayout
  45. android:layout_width="fill_parent"
  46. android:layout_height="60.0dip"
  47. android:layout_gravity="bottom"
  48. android:background="@drawable/dialog_bottom_bg"
  49. android:gravity="center"
  50. android:orientation="horizontal" >
  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. <Button
  60. android:id="@+id/negativeButton"
  61. style="@style/text_15_666666_sdw"
  62. android:layout_width="114.0dip"
  63. android:layout_height="40.0dip"
  64. android:layout_marginLeft="20.0dip"
  65. android:background="@drawable/btn_cancel_selector"
  66. android:gravity="center"
  67. android:text="@string/cancel" />
  68. </LinearLayout>
  69. </LinearLayout>
  70. </FrameLayout>

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

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

自定义Dialog的实现类CustomDialog

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

使用代码

  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. builder.setNegativeButton("取消",
  11. new android.content.DialogInterface.OnClickListener() {
  12. public void onClick(DialogInterface dialog, int which) {
  13. dialog.dismiss();
  14. }
  15. });
  16. builder.create().show();

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

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

上一篇：Jquery-UI实现弹出框样式


下一篇：MyBatis