Android-自定义PopupWindow

PopupWindow在应用中应该是随处可见的，很常用到，比如在旧版本的微信当中就用到下拉的PopupWindow，那是自定义的。新版微信5.2的ActionBar，有人已经模仿了它，但微信具体是使用了ActionBar还是其他的笔者倒是不太清楚，本篇博客主要介绍如何自定义一个PopupWindow来供自己在开发应用时使用。因为笔者最近在开发一款应用时用到这个知识点，所以自己实现了类似新版微信的效果。

源码下载：http://download.csdn.net/detail/wwj_748/7337175

效果图如下：

首先从布局开始

/14_CustomPopupWindow/res/layout/activity_swipe.xml

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:id="@+id/animation_layout_content"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:clickable="true"
6. android:orientation="vertical" >
7. <RelativeLayout
8. android:layout_width="match_parent"
9. android:layout_height="wrap_content"
10. android:background="@drawable/abc_ab_bottom_solid_dark_holo"
11. android:padding="12dip" >
12. <LinearLayout
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:layout_alignParentLeft="true"
16. android:gravity="center"
17. android:orientation="horizontal" >
18. <ImageView
19. android:layout_width="30dp"
20. android:layout_height="30dp"
21. android:src="@drawable/ic_launcher" />
22. <TextView
23. android:layout_width="wrap_content"
24. android:layout_height="wrap_content"
25. android:layout_marginLeft="10dip"
26. android:text="任务系统"
27. android:textColor="@color/lightgray"
28. android:textSize="18sp" />
29. </LinearLayout>
30. <LinearLayout
31. android:layout_width="wrap_content"
32. android:layout_height="wrap_content"
33. android:layout_alignParentRight="true"
34. android:gravity="center"
35. android:orientation="horizontal" >
36. <Button
37. android:id="@+id/btnSearch"
38. android:layout_width="30dp"
39. android:layout_height="30dp"
40. android:layout_marginRight="20dip"
41. android:background="@drawable/actionbar_search_icon"
42. android:visibility="gone" />
43. <Button
44. android:id="@+id/btnAdd"
45. android:layout_width="30dp"
46. android:layout_height="30dp"
47. android:layout_marginRight="20dip"
48. android:background="@drawable/actionbar_add_icon" />
49. <Button
50. android:id="@+id/btnSet"
51. android:layout_width="30dp"
52. android:layout_height="30dp"
53. android:background="@drawable/actionbar_more_icon" />
54. </LinearLayout>
55. </RelativeLayout>
56. </LinearLayout>

/14_CustomPopupWindow/res/layout/add_popup_dialog.xml

1. <pre code_snippet_id="341527" snippet_file_name="blog_20140512_2_2271724" name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:gravity="center_horizontal"
6. android:orientation="vertical" >
7. <LinearLayout
8. android:id="@+id/pop_layout2"
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content"
11. android:layout_alignParentRight="true"
12. android:layout_alignParentTop="true"
13. android:background="@drawable/abc_ab_bottom_solid_dark_holo"
14. android:gravity="center_horizontal"
15. android:orientation="vertical" >
16. <LinearLayout
17. android:id="@+id/add_task_layout"
18. android:layout_width="fill_parent"
19. android:layout_height="wrap_content"
20. android:orientation="horizontal"
21. android:padding="8dp" >
22. <ImageView
23. android:layout_width="35dp"
24. android:layout_height="35dp"
25. android:scaleType="fitCenter"
26. android:src="@drawable/ofm_add_icon" />
27. <TextView
28. android:layout_width="wrap_content"
29. android:layout_height="fill_parent"
30. android:layout_marginLeft="10dp"
31. android:gravity="center"
32. android:text="添加任务"
33. android:textColor="@color/white"
34. android:textSize="15dip" />
35. </LinearLayout>
36. <TextView
37. android:layout_width="fill_parent"
38. android:layout_height="0.2dp"
39. android:background="@color/black" />
40. <LinearLayout
41. android:id="@+id/team_member_layout"
42. android:layout_width="fill_parent"
43. android:layout_height="wrap_content"
44. android:orientation="horizontal"
45. android:padding="8dp" >
46. <ImageView
47. android:layout_width="35dp"
48. android:layout_height="35dp"
49. android:scaleType="fitCenter"
50. android:src="@drawable/ofm_profile_icon" />
51. <TextView
52. android:layout_width="wrap_content"
53. android:layout_height="fill_parent"
54. android:layout_marginLeft="10dp"
55. android:gravity="center"
56. android:text="团队成员"
57. android:textColor="@color/white"
58. android:textSize="15dip" />
59. </LinearLayout>
60. </LinearLayout>
61. </RelativeLayout></pre><br><br>

/14_CustomPopupWindow/res/layout/more_popup_dialog.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content"
5. android:gravity="center_horizontal"
6. android:orientation="vertical" >
7. <LinearLayout
8. android:id="@+id/pop_layout"
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content"
11. android:layout_alignParentRight="true"
12. android:layout_alignParentTop="true"
13. android:background="@drawable/abc_ab_bottom_solid_dark_holo"
14. android:gravity="center_horizontal"
15. android:orientation="vertical" >
16. <LinearLayout
17. android:layout_width="fill_parent"
18. android:layout_height="wrap_content"
19. android:orientation="horizontal"
20. android:padding="8dp" >
21. <ImageView
22. android:layout_width="50dp"
23. android:layout_height="50dp"
24. android:src="@drawable/defalt_head" />
25. <LinearLayout
26. android:layout_width="fill_parent"
27. android:layout_height="wrap_content"
28. android:gravity="left|center_horizontal"
29. android:orientation="vertical"
30. android:padding="5dp" >
31. <TextView
32. android:layout_width="fill_parent"
33. android:layout_height="wrap_content"
34. android:text="wwj"
35. android:textColor="@color/white"
36. android:textSize="15sp" />
37. <TextView
38. android:layout_width="fill_parent"
39. android:layout_height="wrap_content"
40. android:text="whatswwj"
41. android:textColor="@color/green"
42. android:textSize="15sp" />
43. </LinearLayout>
44. </LinearLayout>
45. <TextView
46. android:layout_width="fill_parent"
47. android:layout_height="0.2dp"
48. android:background="@color/black" />
49. <LinearLayout
50. android:layout_width="fill_parent"
51. android:layout_height="wrap_content"
52. android:orientation="horizontal"
53. android:padding="8dp" >
54. <ImageView
55. android:layout_width="35dp"
56. android:layout_height="35dp"
57. android:scaleType="fitCenter"
58. android:src="@drawable/ofm_photo_icon" />
59. <TextView
60. android:layout_width="wrap_content"
61. android:layout_height="fill_parent"
62. android:layout_marginLeft="10dp"
63. android:gravity="center"
64. android:text="我的相册"
65. android:textColor="@color/white"
66. android:textSize="15sp" />
67. </LinearLayout>
68. <TextView
69. android:layout_width="fill_parent"
70. android:layout_height="0.2dp"
71. android:background="@color/black" />
72. <LinearLayout
73. android:layout_width="fill_parent"
74. android:layout_height="wrap_content"
75. android:orientation="horizontal"
76. android:padding="8dp"
77. android:visibility="gone" >
78. <ImageView
79. android:layout_width="35dp"
80. android:layout_height="35dp"
81. android:scaleType="fitCenter"
82. android:src="@drawable/ofm_collect_icon" />
83. <TextView
84. android:layout_width="wrap_content"
85. android:layout_height="fill_parent"
86. android:layout_marginLeft="10dp"
87. android:gravity="center"
88. android:text="我的收藏"
89. android:textColor="@color/white"
90. android:textSize="15sp" />
91. </LinearLayout>
92. <TextView
93. android:layout_width="fill_parent"
94. android:layout_height="0.2dp"
95. android:background="@color/black" />
96. <LinearLayout
97. android:layout_width="fill_parent"
98. android:layout_height="wrap_content"
99. android:orientation="horizontal"
100. android:padding="8dp"
101. android:visibility="gone" >
102. <ImageView
103. android:layout_width="35dp"
104. android:layout_height="35dp"
105. android:scaleType="fitCenter"
106. android:src="@drawable/ofm_card_icon" />
107. <TextView
108. android:layout_width="wrap_content"
109. android:layout_height="fill_parent"
110. android:layout_marginLeft="10dp"
111. android:gravity="center"
112. android:text="我的银行卡"
113. android:textColor="@color/white"
114. android:textSize="15sp" />
115. </LinearLayout>
116. <TextView
117. android:layout_width="fill_parent"
118. android:layout_height="0.2dp"
119. android:background="@color/black"
120. android:visibility="gone" />
121. <LinearLayout
122. android:layout_width="fill_parent"
123. android:layout_height="wrap_content"
124. android:orientation="horizontal"
125. android:padding="8dp" >
126. <ImageView
127. android:layout_width="35dp"
128. android:layout_height="35dp"
129. android:scaleType="fitCenter"
130. android:src="@drawable/ofm_setting_icon" />
131. <TextView
132. android:layout_width="wrap_content"
133. android:layout_height="fill_parent"
134. android:layout_marginLeft="10dp"
135. android:gravity="center"
136. android:text="设置"
137. android:textColor="@color/white"
138. android:textSize="15sp" />
139. </LinearLayout>
140. <TextView
141. android:layout_width="fill_parent"
142. android:layout_height="0.2dp"
143. android:background="@color/black" />
144. <LinearLayout
145. android:layout_width="fill_parent"
146. android:layout_height="wrap_content"
147. android:orientation="horizontal"
148. android:padding="8dp" >
149. <ImageView
150. android:layout_width="35dp"
151. android:layout_height="35dp"
152. android:scaleType="fitCenter"
153. android:src="@drawable/ofm_blacklist_icon" />
154. <Button
155. android:id="@+id/btn_cancel"
156. android:layout_width="wrap_content"
157. android:layout_height="fill_parent"
158. android:layout_marginLeft="10dp"
159. android:background="@null"
160. android:gravity="center"
161. android:text="退出登录"
162. android:textColor="@color/white"
163. android:textSize="15sp" />
164. </LinearLayout>
165. </LinearLayout>
166. </RelativeLayout>

以上分别是主页面和两个popupWindow布局

下面自定义两个PopupWindow，自己封装自己想要的PopuoWindow，这里只是给出示例

/14_CustomPopupWindow/src/com/wwj/popupwindow/AddPopWindow.java

1. package com.wwj.popupwindow;
2. import android.app.Activity;
3. import android.content.Context;
4. import android.graphics.drawable.ColorDrawable;
5. import android.view.LayoutInflater;
6. import android.view.View;
7. import android.view.View.OnClickListener;
8. import android.view.ViewGroup.LayoutParams;
9. import android.widget.LinearLayout;
10. import android.widget.PopupWindow;
11. /**
12. * 自定义popupWindow
13. *
14. * @author wwj
15. *
16. *
17. */
18. public class AddPopWindow extends PopupWindow {
19. private View conentView;
20. public AddPopWindow(final Activity context) {
21. LayoutInflater inflater = (LayoutInflater) context
22. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
23. conentView = inflater.inflate(R.layout.add_popup_dialog, null);
24. int h = context.getWindowManager().getDefaultDisplay().getHeight();
25. int w = context.getWindowManager().getDefaultDisplay().getWidth();
26. // 设置SelectPicPopupWindow的View
27. this.setContentView(conentView);
28. // 设置SelectPicPopupWindow弹出窗体的宽
29. this.setWidth(w / 2 + 50);
30. // 设置SelectPicPopupWindow弹出窗体的高
31. this.setHeight(LayoutParams.WRAP_CONTENT);
32. // 设置SelectPicPopupWindow弹出窗体可点击
33. this.setFocusable(true);
34. this.setOutsideTouchable(true);
35. // 刷新状态
36. this.update();
37. // 实例化一个ColorDrawable颜色为半透明
38. ColorDrawable dw = new ColorDrawable(0000000000);
39. // 点back键和其他地方使其消失,设置了这个才能触发OnDismisslistener ，设置其他控件变化等操作
40. this.setBackgroundDrawable(dw);
41. // mPopupWindow.setAnimationStyle(android.R.style.Animation_Dialog);
42. // 设置SelectPicPopupWindow弹出窗体动画效果
43. this.setAnimationStyle(R.style.AnimationPreview);
44. LinearLayout addTaskLayout = (LinearLayout) conentView
45. .findViewById(R.id.add_task_layout);
46. LinearLayout teamMemberLayout = (LinearLayout) conentView
47. .findViewById(R.id.team_member_layout);
48. addTaskLayout.setOnClickListener(new OnClickListener() {
49. @Override
50. public void onClick(View arg0) {
51. AddPopWindow.this.dismiss();
52. }
53. });
54. teamMemberLayout.setOnClickListener(new OnClickListener() {
55. @Override
56. public void onClick(View v) {
57. AddPopWindow.this.dismiss();
58. }
59. });
60. }
61. /**
62. * 显示popupWindow
63. *
64. * @param parent
65. */
66. public void showPopupWindow(View parent) {
67. if (!this.isShowing()) {
68. // 以下拉方式显示popupwindow
69. this.showAsDropDown(parent, parent.getLayoutParams().width / 2, 18);
70. } else {
71. this.dismiss();
72. }
73. }
74. }

/14_CustomPopupWindow/src/com/wwj/popupwindow/MorePopWindow.java

1. package com.wwj.popupwindow;
2. import android.app.Activity;
3. import android.content.Context;
4. import android.graphics.drawable.ColorDrawable;
5. import android.view.LayoutInflater;
6. import android.view.View;
7. import android.view.ViewGroup.LayoutParams;
8. import android.widget.PopupWindow;
9. public class MorePopWindow extends PopupWindow {
10. private View conentView;
11. public MorePopWindow(final Activity context) {
12. LayoutInflater inflater = (LayoutInflater) context
13. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
14. conentView = inflater.inflate(R.layout.more_popup_dialog, null);
15. int h = context.getWindowManager().getDefaultDisplay().getHeight();
16. int w = context.getWindowManager().getDefaultDisplay().getWidth();
17. // 设置SelectPicPopupWindow的View
18. this.setContentView(conentView);
19. // 设置SelectPicPopupWindow弹出窗体的宽
20. this.setWidth(w / 2 + 50);
21. // 设置SelectPicPopupWindow弹出窗体的高
22. this.setHeight(LayoutParams.WRAP_CONTENT);
23. // 设置SelectPicPopupWindow弹出窗体可点击
24. this.setFocusable(true);
25. this.setOutsideTouchable(true);
26. // 刷新状态
27. this.update();
28. // 实例化一个ColorDrawable颜色为半透明
29. ColorDrawable dw = new ColorDrawable(0000000000);
30. // 点back键和其他地方使其消失,设置了这个才能触发OnDismisslistener ，设置其他控件变化等操作
31. this.setBackgroundDrawable(dw);
32. // mPopupWindow.setAnimationStyle(android.R.style.Animation_Dialog);
33. // 设置SelectPicPopupWindow弹出窗体动画效果
34. this.setAnimationStyle(R.style.AnimationPreview);
35. }
36. public void showPopupWindow(View parent) {
37. if (!this.isShowing()) {
38. this.showAsDropDown(parent, parent.getLayoutParams().width / 2, 18);
39. } else {
40. this.dismiss();
41. }
42. }
43. }

上面用到一个动画样式效果：

/14_CustomPopupWindow/res/values/styles.xml

1. <style name="AnimationPreview">
2. <item name="android:windowEnterAnimation">@anim/fade_in</item>
3. <item name="android:windowExitAnimation">@anim/fade_out</item>
4. </style>

用到两个动画资源

/14_CustomPopupWindow/res/anim/fade_in.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- 左上角扩大-->
3. <scale   xmlns:android="http://schemas.android.com/apk/res/android"
4. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
5. android:fromXScale="0.001"
6. android:toXScale="1.0"
7. android:fromYScale="0.001"
8. android:toYScale="1.0"
9. android:pivotX="100%"
10. android:pivotY="10%"
11. android:duration="200" />

/14_CustomPopupWindow/res/anim/fade_out.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- 左上角缩小 -->
3. <scale   xmlns:android="http://schemas.android.com/apk/res/android"
4. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
5. android:fromXScale="1.0"
6. android:toXScale="0.001"
7. android:fromYScale="1.0"
8. android:toYScale="0.001"
9. android:pivotX="100%"
10. android:pivotY="10%"
11. android:duration="200" />

/14_CustomPopupWindow/src/com/wwj/popupwindow/MainActivity.java

1. package com.wwj.popupwindow;
2. import android.app.Activity;
3. import android.os.Bundle;
4. import android.view.View;
5. import android.view.View.OnClickListener;
6. import android.widget.Button;
7. public class MainActivity extends Activity implements OnClickListener{
8. private Button setButton;
9. private Button addButton;
10. @Override
11. protected void onCreate(Bundle savedInstanceState) {
12. super.onCreate(savedInstanceState);
13. setContentView(R.layout.activity_swipe);
14. setButton = (Button) findViewById(R.id.btnSet);
15. addButton = (Button) findViewById(R.id.btnAdd);
16. setButton.setOnClickListener(this);
17. addButton.setOnClickListener(this);;
18. }
19. @Override
20. public void onClick(View v) {
21. switch (v.getId()) {
22. case R.id.btnSet:
23. MorePopWindow morePopWindow = new MorePopWindow(MainActivity.this);
24. morePopWindow.showPopupWindow(setButton);
25. break;
26. case R.id.btnSearch:
27. break;
28. case R.id.btnAdd:
29. AddPopWindow addPopWindow = new AddPopWindow(MainActivity.this);
30. addPopWindow.showPopupWindow(addButton);
31. break;
32. default:
33. break;
34. }
35. }
36. }

以上是代码实现，具体可以下载源码参考。