Android-自定义PopupWindow

_再见理想
关注文章
TinyMind专栏频道
PopupWindow在应用中应该是随处可见的，很常用到，比如在旧版本的微信当中就用到下拉的PopupWindow，那是自定义的。新版微信5.2的ActionBar，有人已经模仿了它，但微信具体是使用了ActionBar还是其他的笔者倒是不太清楚，本篇博客主要介绍如何自定义一个PopupWindow来供自己在开发应用时使用。因为笔者最近在开发一款应用时用到这个知识点，所以自己实现了类似新版微信的效果。 源码下载：http://download.csdn.net/detail/wwj_748/7337175 效果图如下： 首先从布局开始 /14_CustomPopupWindow/res/layout/activity_swipe.xml
[html]view plaincopy
  1. <LinearLayoutxmlns: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">
  8. <RelativeLayout
  9. android:layout_width="match_parent"
  10. android:layout_height="wrap_content"
  11. android:background="@drawable/abc_ab_bottom_solid_dark_holo"
  12. android:padding="12dip">
  14. <LinearLayout
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:layout_alignParentLeft="true"
  18. android:gravity="center"
  19. android:orientation="horizontal">
  21. <ImageView
  22. android:layout_width="30dp"
  23. android:layout_height="30dp"
  24. android:src="@drawable/ic_launcher"/>
  26. <TextView
  27. android:layout_width="wrap_content"
  28. android:layout_height="wrap_content"
  29. android:layout_marginLeft="10dip"
  30. android:text="任务系统"
  31. android:textColor="@color/lightgray"
  32. android:textSize="18sp"/>
  33. </LinearLayout>
  35. <LinearLayout
  36. android:layout_width="wrap_content"
  37. android:layout_height="wrap_content"
  38. android:layout_alignParentRight="true"
  39. android:gravity="center"
  40. android:orientation="horizontal">
  42. <Button
  43. android:id="@+id/btnSearch"
  44. android:layout_width="30dp"
  45. android:layout_height="30dp"
  46. android:layout_marginRight="20dip"
  47. android:background="@drawable/actionbar_search_icon"
  48. android:visibility="gone"/>
  50. <Button
  51. android:id="@+id/btnAdd"
  52. android:layout_width="30dp"
  53. android:layout_height="30dp"
  54. android:layout_marginRight="20dip"
  55. android:background="@drawable/actionbar_add_icon"/>
  57. <Button
  58. android:id="@+id/btnSet"
  59. android:layout_width="30dp"
  60. android:layout_height="30dp"
  61. android:background="@drawable/actionbar_more_icon"/>
  62. </LinearLayout>
  63. </RelativeLayout>
  66. </LinearLayout>

/14_CustomPopupWindow/res/layout/add_popup_dialog.xml
[html]view plaincopy
  1. <precode_snippet_id="341527"snippet_file_name="blog_20140512_2_2271724"name="code"class="html"><?xmlversion="1.0"encoding="utf-8"?>
  2. <RelativeLayoutxmlns: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">
  8. <LinearLayout
  9. android:id="@+id/pop_layout2"
  10. android:layout_width="fill_parent"
  11. android:layout_height="wrap_content"
  12. android:layout_alignParentRight="true"
  13. android:layout_alignParentTop="true"
  14. android:background="@drawable/abc_ab_bottom_solid_dark_holo"
  15. android:gravity="center_horizontal"
  16. android:orientation="vertical">
  18. <LinearLayout
  19. android:id="@+id/add_task_layout"
  20. android:layout_width="fill_parent"
  21. android:layout_height="wrap_content"
  22. android:orientation="horizontal"
  23. android:padding="8dp">
  25. <ImageView
  26. android:layout_width="35dp"
  27. android:layout_height="35dp"
  28. android:scaleType="fitCenter"
  29. android:src="@drawable/ofm_add_icon"/>
  31. <TextView
  32. android:layout_width="wrap_content"
  33. android:layout_height="fill_parent"
  34. android:layout_marginLeft="10dp"
  35. android:gravity="center"
  36. android:text="添加任务"
  37. android:textColor="@color/white"
  38. android:textSize="15dip"/>
  39. </LinearLayout>
  41. <TextView
  42. android:layout_width="fill_parent"
  43. android:layout_height="0.2dp"
  44. android:background="@color/black"/>
  46. <LinearLayout
  47. android:id="@+id/team_member_layout"
  48. android:layout_width="fill_parent"
  49. android:layout_height="wrap_content"
  50. android:orientation="horizontal"
  51. android:padding="8dp">
  53. <ImageView
  54. android:layout_width="35dp"
  55. android:layout_height="35dp"
  56. android:scaleType="fitCenter"
  57. android:src="@drawable/ofm_profile_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="15dip"/>
  67. </LinearLayout>
  69. </LinearLayout>
  71. </RelativeLayout></pre><br><br>
/14_CustomPopupWindow/res/layout/more_popup_dialog.xml
[html]view plaincopy
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <RelativeLayoutxmlns: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">
  8. <LinearLayout
  9. android:id="@+id/pop_layout"
  10. android:layout_width="fill_parent"
  11. android:layout_height="wrap_content"
  12. android:layout_alignParentRight="true"
  13. android:layout_alignParentTop="true"
  14. android:background="@drawable/abc_ab_bottom_solid_dark_holo"
  15. android:gravity="center_horizontal"
  16. android:orientation="vertical">
  18. <LinearLayout
  19. android:layout_width="fill_parent"
  20. android:layout_height="wrap_content"
  21. android:orientation="horizontal"
  22. android:padding="8dp">
  24. <ImageView
  25. android:layout_width="50dp"
  26. android:layout_height="50dp"
  27. android:src="@drawable/defalt_head"/>
  29. <LinearLayout
  30. android:layout_width="fill_parent"
  31. android:layout_height="wrap_content"
  32. android:gravity="left|center_horizontal"
  33. android:orientation="vertical"
  34. android:padding="5dp">
  36. <TextView
  37. android:layout_width="fill_parent"
  38. android:layout_height="wrap_content"
  39. android:text="wwj"
  40. android:textColor="@color/white"
  41. android:textSize="15sp"/>
  43. <TextView
  44. android:layout_width="fill_parent"
  45. android:layout_height="wrap_content"
  46. android:text="whatswwj"
  47. android:textColor="@color/green"
  48. android:textSize="15sp"/>
  49. </LinearLayout>
  50. </LinearLayout>
  52. <TextView
  53. android:layout_width="fill_parent"
  54. android:layout_height="0.2dp"
  55. android:background="@color/black"/>
  57. <LinearLayout
  58. android:layout_width="fill_parent"
  59. android:layout_height="wrap_content"
  60. android:orientation="horizontal"
  61. android:padding="8dp">
  63. <ImageView
  64. android:layout_width="35dp"
  65. android:layout_height="35dp"
  66. android:scaleType="fitCenter"
  67. android:src="@drawable/ofm_photo_icon"/>
  69. <TextView
  70. android:layout_width="wrap_content"
  71. android:layout_height="fill_parent"
  72. android:layout_marginLeft="10dp"
  73. android:gravity="center"
  74. android:text="我的相册"
  75. android:textColor="@color/white"
  76. android:textSize="15sp"/>
  77. </LinearLayout>
  79. <TextView
  80. android:layout_width="fill_parent"
  81. android:layout_height="0.2dp"
  82. android:background="@color/black"/>
  84. <LinearLayout
  85. android:layout_width="fill_parent"
  86. android:layout_height="wrap_content"
  87. android:orientation="horizontal"
  88. android:padding="8dp"
  89. android:visibility="gone">
  91. <ImageView
  92. android:layout_width="35dp"
  93. android:layout_height="35dp"
  94. android:scaleType="fitCenter"
  95. android:src="@drawable/ofm_collect_icon"/>
  97. <TextView
  98. android:layout_width="wrap_content"
  99. android:layout_height="fill_parent"
  100. android:layout_marginLeft="10dp"
  101. android:gravity="center"
  102. android:text="我的收藏"
  103. android:textColor="@color/white"
  104. android:textSize="15sp"/>
  105. </LinearLayout>
  107. <TextView
  108. android:layout_width="fill_parent"
  109. android:layout_height="0.2dp"
  110. android:background="@color/black"/>
  112. <LinearLayout
  113. android:layout_width="fill_parent"
  114. android:layout_height="wrap_content"
  115. android:orientation="horizontal"
  116. android:padding="8dp"
  117. android:visibility="gone">
  119. <ImageView
  120. android:layout_width="35dp"
  121. android:layout_height="35dp"
  122. android:scaleType="fitCenter"
  123. android:src="@drawable/ofm_card_icon"/>
  125. <TextView
  126. android:layout_width="wrap_content"
  127. android:layout_height="fill_parent"
  128. android:layout_marginLeft="10dp"
  129. android:gravity="center"
  130. android:text="我的银行卡"
  131. android:textColor="@color/white"
  132. android:textSize="15sp"/>
  133. </LinearLayout>
  135. <TextView
  136. android:layout_width="fill_parent"
  137. android:layout_height="0.2dp"
  138. android:background="@color/black"
  139. android:visibility="gone"/>
  141. <LinearLayout
  142. android:layout_width="fill_parent"
  143. android:layout_height="wrap_content"
  144. android:orientation="horizontal"
  145. android:padding="8dp">
  147. <ImageView
  148. android:layout_width="35dp"
  149. android:layout_height="35dp"
  150. android:scaleType="fitCenter"
  151. android:src="@drawable/ofm_setting_icon"/>
  153. <TextView
  154. android:layout_width="wrap_content"
  155. android:layout_height="fill_parent"
  156. android:layout_marginLeft="10dp"
  157. android:gravity="center"
  158. android:text="设置"
  159. android:textColor="@color/white"
  160. android:textSize="15sp"/>
  161. </LinearLayout>
  163. <TextView
  164. android:layout_width="fill_parent"
  165. android:layout_height="0.2dp"
  166. android:background="@color/black"/>
  168. <LinearLayout
  169. android:layout_width="fill_parent"
  170. android:layout_height="wrap_content"
  171. android:orientation="horizontal"
  172. android:padding="8dp">
  174. <ImageView
  175. android:layout_width="35dp"
  176. android:layout_height="35dp"
  177. android:scaleType="fitCenter"
  178. android:src="@drawable/ofm_blacklist_icon"/>
  180. <Button
  181. android:id="@+id/btn_cancel"
  182. android:layout_width="wrap_content"
  183. android:layout_height="fill_parent"
  184. android:layout_marginLeft="10dp"
  185. android:background="@null"
  186. android:gravity="center"
  187. android:text="退出登录"
  188. android:textColor="@color/white"
  189. android:textSize="15sp"/>
  190. </LinearLayout>
  191. </LinearLayout>
  193. </RelativeLayout>

以上分别是主页面和两个popupWindow布局 下面自定义两个PopupWindow，自己封装自己想要的PopuoWindow，这里只是给出示例 /14_CustomPopupWindow/src/com/wwj/popupwindow/AddPopWindow.java
[java]view plaincopy
  1. packagecom.wwj.popupwindow;
  3. importandroid.app.Activity;
  4. importandroid.content.Context;
  5. importandroid.graphics.drawable.ColorDrawable;
  6. importandroid.view.LayoutInflater;
  7. importandroid.view.View;
  8. importandroid.view.View.OnClickListener;
  9. importandroid.view.ViewGroup.LayoutParams;
  10. importandroid.widget.LinearLayout;
  11. importandroid.widget.PopupWindow;
  13. /**
  14. *自定义popupWindow
  15. *
  16. *@authorwwj
  17. *
  18. *
  19. */
  20. publicclassAddPopWindowextendsPopupWindow{
  21. privateViewconentView;
  23. publicAddPopWindow(finalActivitycontext){
  24. LayoutInflaterinflater=(LayoutInflater)context
  25. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  26. conentView=inflater.inflate(R.layout.add_popup_dialog,null);
  27. inth=context.getWindowManager().getDefaultDisplay().getHeight();
  28. intw=context.getWindowManager().getDefaultDisplay().getWidth();
  29. //设置SelectPicPopupWindow的View
  30. this.setContentView(conentView);
  31. //设置SelectPicPopupWindow弹出窗体的宽
  32. this.setWidth(w/2+50);
  33. //设置SelectPicPopupWindow弹出窗体的高
  34. this.setHeight(LayoutParams.WRAP_CONTENT);
  35. //设置SelectPicPopupWindow弹出窗体可点击
  36. this.setFocusable(true);
  37. this.setOutsideTouchable(true);
  38. //刷新状态
  39. this.update();
  40. //实例化一个ColorDrawable颜色为半透明
  41. ColorDrawabledw=newColorDrawable(0000000000);
  42. //点back键和其他地方使其消失,设置了这个才能触发OnDismisslistener，设置其他控件变化等操作
  43. this.setBackgroundDrawable(dw);
  44. //mPopupWindow.setAnimationStyle(android.R.style.Animation_Dialog);
  45. //设置SelectPicPopupWindow弹出窗体动画效果
  46. this.setAnimationStyle(R.style.AnimationPreview);
  47. LinearLayoutaddTaskLayout=(LinearLayout)conentView
  48. .findViewById(R.id.add_task_layout);
  49. LinearLayoutteamMemberLayout=(LinearLayout)conentView
  50. .findViewById(R.id.team_member_layout);
  51. addTaskLayout.setOnClickListener(newOnClickListener(){
  53. @Override
  54. publicvoidonClick(Viewarg0){
  55. AddPopWindow.this.dismiss();
  56. }
  57. });
  59. teamMemberLayout.setOnClickListener(newOnClickListener(){
  61. @Override
  62. publicvoidonClick(Viewv){
  63. AddPopWindow.this.dismiss();
  64. }
  65. });
  66. }
  68. /**
  69. *显示popupWindow
  70. *
  71. *@paramparent
  72. */
  73. publicvoidshowPopupWindow(Viewparent){
  74. if(!this.isShowing()){
  75. //以下拉方式显示popupwindow
  76. this.showAsDropDown(parent,parent.getLayoutParams().width/2,18);
  77. }else{
  78. this.dismiss();
  79. }
  80. }
  81. }


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


上面用到一个动画样式效果： /14_CustomPopupWindow/res/values/styles.xml
[html]view plaincopy
  1. <stylename="AnimationPreview">
  2. <itemname="android:windowEnterAnimation">@anim/fade_in</item>
  3. <itemname="android:windowExitAnimation">@anim/fade_out</item>
  4. </style>

用到两个动画资源 /14_CustomPopupWindow/res/anim/fade_in.xml
[html]view plaincopy
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <!--左上角扩大-->
  3. <scalexmlns: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
[html]view plaincopy
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <!--左上角缩小-->
  3. <scalexmlns: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
[java]view plaincopy
  1. packagecom.wwj.popupwindow;
  3. importandroid.app.Activity;
  4. importandroid.os.Bundle;
  5. importandroid.view.View;
  6. importandroid.view.View.OnClickListener;
  7. importandroid.widget.Button;
  9. publicclassMainActivityextendsActivityimplementsOnClickListener{
  10. privateButtonsetButton;
  11. privateButtonaddButton;
  13. @Override
  14. protectedvoidonCreate(BundlesavedInstanceState){
  15. super.onCreate(savedInstanceState);
  16. setContentView(R.layout.activity_swipe);
  18. setButton=(Button)findViewById(R.id.btnSet);
  19. addButton=(Button)findViewById(R.id.btnAdd);
  20. setButton.setOnClickListener(this);
  21. addButton.setOnClickListener(this);;
  22. }
  24. @Override
  25. publicvoidonClick(Viewv){
  26. switch(v.getId()){
  27. caseR.id.btnSet:
  28. MorePopWindowmorePopWindow=newMorePopWindow(MainActivity.this);
  29. morePopWindow.showPopupWindow(setButton);
  30. break;
  31. caseR.id.btnSearch:
  33. break;
  34. caseR.id.btnAdd:
  35. AddPopWindowaddPopWindow=newAddPopWindow(MainActivity.this);
  36. addPopWindow.showPopupWindow(addButton);
  37. break;
  38. default:
  39. break;
  40. }
  41. }
  42. }

以上是代码实现，具体可以下载源码参考。 优质内容筛选与推荐>>
1、PHP 获取网页所有连接
2、黑马程序员 Java高新技术---枚举
3、unittest学习
4、常用的一些基础工具类
5、Uva 10608 Friends


长按二维码向我转账

受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消，“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字，当前共字 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字，当前共字

    发送中

    网络异常，请稍后重试

    微信扫一扫
    关注该公众号

    0 │ 收藏 │ 举报




    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议，举报不良信息等均可联系我们。

    TinyMind客服邮箱：support@tinymind.net.cn

    TinyMind.net.cn，专业AI技术社区