zoukankan      html  css  js  c++  java

  • Android-自定义PopupWindow

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


    /14_CustomPopupWindow/src/com/wwj/popupwindow/MorePopWindow.java
    [java] view plaincopy在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 / 2, 18);  
    44.         } else {  
    45.             this.dismiss();  
    46.         }  
    47.     }  
    48. }  


    上面用到一个动画样式效果：
    /14_CustomPopupWindow/res/values/styles.xml
    [html] view plaincopy在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 plaincopy在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 plaincopy在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 plaincopy在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. }  

    以上是代码实现，具体可以下载源码参考。
  • 相关阅读:
    Kubernetes进阶实战读书笔记：持久化存储卷（pvc详解）
    Nginx核心知识100讲学习笔记（陶辉）详解HTTP模块（接受请求模块|正则表达式|冲突合并）
    Nginx核心知识100讲学习笔记（陶辉）详解HTTP模块（详解11阶段）
    WIndows 编辑的文件的文件在Linux下查看每行末尾有 ^M
    JQuery ajax 使用
    查看oracle死锁进程并结束死锁
    Oracle 死锁处理（查看锁表语句及解锁）
    BS表单编程注意事项
    Delphi MDI多文档架构几个问题解决
    Delphi MDI子窗体
  • 原文地址：https://www.cnblogs.com/exmyth/p/4680794.html
Copyright © 2011-2022 走看看