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

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

Android-自定义PopupWindow的更多相关文章

  1. Android 自定义Popupwindow 注意事项，手机和平板的区别

    首先自定义ppw是要继承Popupwindow 的 而要成功的显示出自定义的ppw就必须实现下面的三句代码 // 必要的三要素下面,不然popWind显示不出来 this.setContentView ...

  2. Android 自定义PopupWindow动画效果

    public class RollActivity extends Activity { private View view; private Button btn; private PopupWin ...

  3. Android自定义PopupWindow显示在控件上方或者下方

    记录学习之用 View view = mInflater.inflate(R.layout.layout_popupwindow, null); PopUpwindowLayout popUpwind ...

  4. Android笔记之自定义PopupWindow

    效果图 popup_window_addition.xml <?xml version="1.0" encoding="utf-8"?> <L ...

  5. android 自定义通知栏

    package com.example.mvp; import cn.ljuns.temperature.view.TemperatureView;import presenter.ILoginPre ...

  6. Android自定义spinner下拉框实现的实现

    一:前言 本人参考博客:http://blog.csdn.net/jdsjlzx/article/details/41316417 最近在弄一个下拉框,发现Android自带的很难实现我的功能,于是去 ...

  7. Android 自定义spinner下拉框实现

    一:前言本人参考博客:http://blog.csdn.net/jdsjlzx/article/details/41316417 最近在弄一个下拉框,发现Android自带的很难实现我的功能,于是去网 ...

  8. 自定义PopupWindow弹出框（带有动画）

    使用PopupWindow来实现弹出框,并且带有动画效果 首先自定义PopupWindow public class LostPopupWindow extends PopupWindow { pub ...

  9. Android 自定义View修炼-如何打造Android自定义的下拉列表框控件

    一.概述 Android中的有个原生的下拉列表控件Spinner,但是这个控件有时候不符合我们自己的要求, 比如有时候我们需要类似windows 或者web网页中常见的那种下拉列表控件,类似下图这样的 ...

  10. Android 使用PopupWindow实现弹出菜单

    在本文当中,我将会与大家分享一个封装了PopupWindow实现弹出菜单的类,并说明它的实现与使用. 因对界面的需求,android原生的弹出菜单已不能满足我们的需求,自定义菜单成了我们的唯一选择,在 ...

随机推荐

  1. java07循环结构

    public class WhileTest { // while循环结构 public static void main(String[] args) { System.out.println(&q ...

  2. 用win32API 实现TextBox水印特效

    demo效果:

  3. （转）js获取url参数值

    明天有空编辑下 今天做项目遇到js取得url地址问号后面的参数,找了下面的,用着非常好,项目是选项卡样式的,也就是一点击二级分类,底下的同样名字的背景变红(选项卡倍选中) http://www.cnb ...

  4. grep和正则表达式

    正则表达式示例表字 符 意 义 示 例* 任意长度的字符串. a* 表示: 空字符串.aaaa.a…? 长度为0或者1的字符串. a? 表示: 空字符串和a.+ 长度为一个或者多个的字符串. a+表示 ...

  5. JavaScript 函数之 ------------------ 闭包

    谈到闭包,人们常常会把匿名函数和闭包混淆在一起.闭包是指由权访问另一个函数作用域中的变量的函数.创建闭包的常见方式,就是在一个函数内部创建另一个函数,仍以前面的 createComparisonFun ...

  6. Vim模式

    Vim是从vi发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用.和Emacs并列成为类Unix系统用户最喜欢的编辑器.    Vim的第一个版本由布莱姆 ...

  7. JSP中取COOKIE中指定值得方法【转载】

    Cookie cookies[]=request.getCookies(); //读出用户硬盘上的Cookie,并将所有的Cookie放到一个cookie对象数组里面 Cookie sCookie=n ...

  8. 用javascript预加载图片、css、js的方法研究

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...

  9. FCKEditor的用法(asp版)

    1:下载FCKEditor 去www.baidu.com 搜索,我本来想上传的,但不知道怎么传.下载下来后解压到你网站的目录,最好就放在根目录下,文件夹名字就用FCKEditor:这里可以随便自己喜好 ...

  10. JDK TOMCAT MAVEN在myeclipse如何配置

    对于没有基础的人来说,本工具务必放在D盘根目录下. 1配置环境变量, "我的电脑-->右键-->属性" 貌似是这样吧,我电脑桌面没"我的电脑"或&q ...