自定义PopupWindow的实现

Android-自定义PopupWindow带动画的实现

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




首先从布局开始
/14_CustomPopupWindow/res/layout/activity_swipe.xml
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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 plain copy 在CODE上查看代码片 派生到我的代码片
  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 plain copy 在CODE上查看代码片 派生到我的代码片
  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 plain copy 在CODE上查看代码片 派生到我的代码片
  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 / 218);  
  77.         } else {  
  78.             this.dismiss();  
  79.         }  
  80.     }  
  81. }  


/14_CustomPopupWindow/src/com/wwj/popupwindow/MorePopWindow.java
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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 / 218);  
  44.         } else {  
  45.             this.dismiss();  
  46.         }  
  47.     }  
  48. }  


上面用到一个动画样式效果:
/14_CustomPopupWindow/res/values/styles.xml
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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 plain copy 在CODE上查看代码片 派生到我的代码片
  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 plain copy 在CODE上查看代码片 派生到我的代码片
  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 plain copy 在CODE上查看代码片 派生到我的代码片
  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. }  

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

androidstarjack

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值