码迷，mamicode.com
首页 > 移动开发 > 详细

Android-自定义PopupWindow

时间：2015-07-27 18:37:43      阅读：223      评论：0      收藏：0      [点我收藏+]

标签：

PopupWindow在应用中应该是随处可见的，很常用到，比如在旧版本的微信当中就用到下拉的PopupWindow，那是自定义的。新版微信5.2的ActionBar，有人已经模仿了它，但微信具体是使用了ActionBar还是其他的笔者倒是不太清楚，本篇博客主要介绍如何自定义一个PopupWindow来供自己在开发应用时使用。因为笔者最近在开发一款应用时用到这个知识点，所以自己实现了类似新版微信的效果。
效果图如下：
技术分享
 
技术分享
 
 
 
首先从布局开始
/14_CustomPopupWindow/res/layout/activity_swipe.xml
[html] view plaincopy技术分享技术分享
 
  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.   
  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" >  
  13.   
  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" >  
  20.   
  21.             <ImageView  
  22.                 android:layout_width="30dp"  
  23.                 android:layout_height="30dp"  
  24.                 android:src="@drawable/ic_launcher" />  
  25.   
  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>  
  34.   
  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" >  
  41.   
  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" />  
  49.   
  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" />  
  56.   
  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>  
  64.   
  65.   
  66. </LinearLayout>  

/14_CustomPopupWindow/res/layout/add_popup_dialog.xml
[html] view plaincopy技术分享技术分享
 
  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.   
  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" >  
  17.   
  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" >  
  24.   
  25.             <ImageView  
  26.                 android:layout_width="35dp"  
  27.                 android:layout_height="35dp"  
  28.                 android:scaleType="fitCenter"  
  29.                 android:src="@drawable/ofm_add_icon" />  
  30.   
  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>  
  40.   
  41.         <TextView  
  42.             android:layout_width="fill_parent"  
  43.             android:layout_height="0.2dp"  
  44.             android:background="@color/black" />  
  45.   
  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" >  
  52.   
  53.             <ImageView  
  54.                 android:layout_width="35dp"  
  55.                 android:layout_height="35dp"  
  56.                 android:scaleType="fitCenter"  
  57.                 android:src="@drawable/ofm_profile_icon" />  
  58.   
  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>  
  68.   
  69.     </LinearLayout>  
  70.   
  71. </RelativeLayout></pre><br><br>  
 
/14_CustomPopupWindow/res/layout/more_popup_dialog.xml
[html] view plaincopy技术分享技术分享
 
  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.   
  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" >  
  17.   
  18.         <LinearLayout  
  19.             android:layout_width="fill_parent"  
  20.             android:layout_height="wrap_content"  
  21.             android:orientation="horizontal"  
  22.             android:padding="8dp" >  
  23.   
  24.             <ImageView  
  25.                 android:layout_width="50dp"  
  26.                 android:layout_height="50dp"  
  27.                 android:src="@drawable/defalt_head" />  
  28.   
  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" >  
  35.   
  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" />  
  42.   
  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>  
  51.   
  52.         <TextView  
  53.             android:layout_width="fill_parent"  
  54.             android:layout_height="0.2dp"  
  55.             android:background="@color/black" />  
  56.   
  57.         <LinearLayout  
  58.             android:layout_width="fill_parent"  
  59.             android:layout_height="wrap_content"  
  60.             android:orientation="horizontal"  
  61.             android:padding="8dp" >  
  62.   
  63.             <ImageView  
  64.                 android:layout_width="35dp"  
  65.                 android:layout_height="35dp"  
  66.                 android:scaleType="fitCenter"  
  67.                 android:src="@drawable/ofm_photo_icon" />  
  68.   
  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>  
  78.   
  79.         <TextView  
  80.             android:layout_width="fill_parent"  
  81.             android:layout_height="0.2dp"  
  82.             android:background="@color/black" />  
  83.   
  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" >  
  90.   
  91.             <ImageView  
  92.                 android:layout_width="35dp"  
  93.                 android:layout_height="35dp"  
  94.                 android:scaleType="fitCenter"  
  95.                 android:src="@drawable/ofm_collect_icon" />  
  96.   
  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>  
  106.   
  107.         <TextView  
  108.             android:layout_width="fill_parent"  
  109.             android:layout_height="0.2dp"  
  110.             android:background="@color/black" />  
  111.   
  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" >  
  118.   
  119.             <ImageView  
  120.                 android:layout_width="35dp"  
  121.                 android:layout_height="35dp"  
  122.                 android:scaleType="fitCenter"  
  123.                 android:src="@drawable/ofm_card_icon" />  
  124.   
  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>  
  134.   
  135.         <TextView  
  136.             android:layout_width="fill_parent"  
  137.             android:layout_height="0.2dp"  
  138.             android:background="@color/black"  
  139.             android:visibility="gone" />  
  140.   
  141.         <LinearLayout  
  142.             android:layout_width="fill_parent"  
  143.             android:layout_height="wrap_content"  
  144.             android:orientation="horizontal"  
  145.             android:padding="8dp" >  
  146.   
  147.             <ImageView  
  148.                 android:layout_width="35dp"  
  149.                 android:layout_height="35dp"  
  150.                 android:scaleType="fitCenter"  
  151.                 android:src="@drawable/ofm_setting_icon" />  
  152.   
  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>  
  162.   
  163.         <TextView  
  164.             android:layout_width="fill_parent"  
  165.             android:layout_height="0.2dp"  
  166.             android:background="@color/black" />  
  167.   
  168.         <LinearLayout  
  169.             android:layout_width="fill_parent"  
  170.             android:layout_height="wrap_content"  
  171.             android:orientation="horizontal"  
  172.             android:padding="8dp" >  
  173.   
  174.             <ImageView  
  175.                 android:layout_width="35dp"  
  176.                 android:layout_height="35dp"  
  177.                 android:scaleType="fitCenter"  
  178.                 android:src="@drawable/ofm_blacklist_icon" />  
  179.   
  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>  
  192.   
  193. </RelativeLayout>  

以上分别是主页面和两个popupWindow布局
 
下面自定义两个PopupWindow，自己封装自己想要的PopuoWindow，这里只是给出示例
 
 
/14_CustomPopupWindow/src/com/wwj/popupwindow/AddPopWindow.java
[java] view plaincopy技术分享技术分享
 
  1. package com.wwj.popupwindow;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.Context;  
  5. import android.graphics.drawable.ColorDrawable;  
  6. import android.view.LayoutInflater;  
  7. import android.view.View;  
  8. import android.view.View.OnClickListener;  
  9. import android.view.ViewGroup.LayoutParams;  
  10. import android.widget.LinearLayout;  
  11. import android.widget.PopupWindow;  
  12.   
  13. /** 
  14.  * 自定义popupWindow 
  15.  *  
  16.  * @author wwj 
  17.  *  
  18.  *  
  19.  */  
  20. public class AddPopWindow extends PopupWindow {  
  21.     private View conentView;  
  22.   
  23.     public AddPopWindow(final Activity context) {  
  24.         LayoutInflater inflater = (LayoutInflater) context  
  25.                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  26.         conentView = inflater.inflate(R.layout.add_popup_dialog, null);  
  27.         int h = context.getWindowManager().getDefaultDisplay().getHeight();  
  28.         int w = 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.         ColorDrawable dw = new ColorDrawable(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.         LinearLayout addTaskLayout = (LinearLayout) conentView  
  48.                 .findViewById(R.id.add_task_layout);  
  49.         LinearLayout teamMemberLayout = (LinearLayout) conentView  
  50.                 .findViewById(R.id.team_member_layout);  
  51.         addTaskLayout.setOnClickListener(new OnClickListener() {  
  52.   
  53.             @Override  
  54.             public void onClick(View arg0) {  
  55.                 AddPopWindow.this.dismiss();  
  56.             }  
  57.         });  
  58.   
  59.         teamMemberLayout.setOnClickListener(new OnClickListener() {  
  60.   
  61.             @Override  
  62.             public void onClick(View v) {  
  63.                 AddPopWindow.this.dismiss();  
  64.             }  
  65.         });  
  66.     }  
  67.   
  68.     /** 
  69.      * 显示popupWindow 
  70.      *  
  71.      * @param parent 
  72.      */  
  73.     public void showPopupWindow(View parent) {  
  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. package com.wwj.popupwindow;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.Context;  
  5. import android.graphics.drawable.ColorDrawable;  
  6. import android.view.LayoutInflater;  
  7. import android.view.View;  
  8. import android.view.ViewGroup.LayoutParams;  
  9. import android.widget.PopupWindow;  
  10.   
  11. public class MorePopWindow extends PopupWindow {  
  12.     private View conentView;  
  13.   
  14.     public MorePopWindow(final Activity context) {  
  15.         LayoutInflater inflater = (LayoutInflater) context  
  16.                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  17.         conentView = inflater.inflate(R.layout.more_popup_dialog, null);  
  18.         int h = context.getWindowManager().getDefaultDisplay().getHeight();  
  19.         int w = 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.         ColorDrawable dw = new ColorDrawable(0000000000);  
  33.         // 点back键和其他地方使其消失,设置了这个才能触发OnDismisslistener ，设置其他控件变化等操作  
  34.         this.setBackgroundDrawable(dw);  
  35.         // mPopupWindow.setAnimationStyle(android.R.style.Animation_Dialog);  
  36.         // 设置SelectPicPopupWindow弹出窗体动画效果  
  37.         this.setAnimationStyle(R.style.AnimationPreview);  
  38.   
  39.     }  
  40.   
  41.     public void showPopupWindow(View parent) {  
  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. <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
[html] view plaincopy技术分享技术分享
 
  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" />    
  12.      

/14_CustomPopupWindow/res/anim/fade_out.xml
[html] view plaincopy技术分享技术分享
 
  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" />    
  12.      


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

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

Android-自定义PopupWindow

标签：

原文地址：http://www.cnblogs.com/exmyth/p/4680794.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！