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();

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

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