[关闭]
@946898963 2021-12-30T02:11:09.000000Z 字数 14727 阅读 571

PopupWindow

Android学习笔记

前言

Android的对话框有两种：PopupWindow和AlertDialog。它们的不同点在于：

  • AlertDialog的位置固定，而PopupWindow的位置可以随意
  • AlertDialog是非阻塞线程的，而PopupWindow是阻塞线程的

PopupWindow基本使用

PopupWindow这个类用来实现一个弹出框，可以使用任意布局的View作为其内容，这个弹出框是悬浮在当前activity之上的。

PopupWindow的位置按照有无偏移分，可以分为偏移和无偏移两种；按照参照物的不同，可以分为相对于某个控件（Anchor锚）和相对于父控件。具体如下

  • showAsDropDown(View anchor)：相对某个控件的位置（正左下方），无偏移
  • showAsDropDown(View anchor, int xoff, int yoff)：相对某个控件的位置，有偏移
  • showAtLocation(View parent, int gravity, int x, int y)：相对于父控件的位置（例如正中央Gravity.CENTER，下方Gravity.BOTTOM等），可以设置偏移或无偏移

弹出框布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5.     android:background="#FFBBFFBB"
  6.     android:orientation="vertical" >
  8.     <TextView
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:padding="10dp"
  12.         android:text="Hello My Window"
  13.         android:textSize="20sp" />
  15.     <Button
  16.         android:id="@+id/button1"
  17.         android:layout_width="match_parent"
  18.         android:layout_height="wrap_content"
  19.         android:padding="10dp"
  20.         android:text="Button"
  21.         android:textSize="20sp" />
  23. </LinearLayout>

　Activity的布局中只有一个按钮，按下后会弹出框，Activity代码如下：

  1. package com.example.hellopopupwindow;
  2. import android.os.Bundle;
  3. import android.app.Activity;
  4. import android.content.Context;
  5. import android.util.Log;
  6. import android.view.LayoutInflater;
  7. import android.view.MotionEvent;
  8. import android.view.View;
  9. import android.view.View.OnClickListener;
  10. import android.view.View.OnTouchListener;
  11. import android.view.ViewGroup.LayoutParams;
  12. import android.widget.Button;
  13. import android.widget.PopupWindow;
  14. import android.widget.Toast;
  16. public class MainActivity extends Activity {
  18.     private Context mContext = null;
  20.     @Override
  21.     protected void onCreate(Bundle savedInstanceState) {
  22.         super.onCreate(savedInstanceState);
  23.         setContentView(R.layout.activity_main);
  25.         mContext = this;
  27.         Button button = (Button) findViewById(R.id.button);
  28.         button.setOnClickListener(new View.OnClickListener() {
  30.             @Override
  31.             public void onClick(View view) {
  33.                 showPopupWindow(view);
  34.             }
  35.         });
  36.     }
  38.     private void showPopupWindow(View view) {
  40.         // 一个自定义的布局，作为显示的内容
  41.        View contentView = LayoutInflater.from(mContext).inflate(
  42.                 R.layout.pop_window, null);
  43.         // 设置按钮的点击事件
  44.         Button button = (Button) contentView.findViewById(R.id.button1);
  45.         button.setOnClickListener(new OnClickListener() {
  47.             @Override
  48.             public void onClick(View v) {
  49.                 Toast.makeText(mContext, "button is pressed",
  50.                         Toast.LENGTH_SHORT).show();
  51.             }
  52.         });
  54.         final PopupWindow popupWindow = new PopupWindow(contentView,
  55.                 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, true);
  57.         popupWindow.setTouchable(true);
  59.         popupWindow.setTouchInterceptor(new OnTouchListener() {
  61.             @Override
  62.             public boolean onTouch(View v, MotionEvent event) {
  64.                 Log.i("mengdd", "onTouch : ");
  66.                 return false;
  67.                 // 这里如果返回true的话，touch事件将被拦截
  68.                 // 拦截后 PopupWindow的onTouchEvent不被调用，这样点击外部区域无法dismiss
  69.             }
  70.         });
  72.         // 如果不设置PopupWindow的背景，无论是点击外部区域还是Back键都无法dismiss弹框
  73.         // 我觉得这里是API的一个bug
  74.         popupWindow.setBackgroundDrawable(getResources().getDrawable(
  75.                 R.drawable.selectmenu_bg_downward));
  77.         // 设置好参数之后再show
  78.         popupWindow.showAsDropDown(view);
  80.     }
  82. }

弹出框的布局中有一个TextView和一个Button，Button点击后显示Toast，如图：
效果图

第一次实现的时候遇到了问题，就是弹出框不会在按下Back键的时候消失，点击弹框外区域也没有正常消失，搜索了一下，都说只要设置背景就好了。然后我就找了个图片，果然弹框能正常dismiss了(见注释)。

在inflate布局文件的时候可能会有问题，解决参考
http://note.youdao.com/share/?id=8464f9ca89ec93efc4dc89b09263906f&type=note

PopupWindow特殊用法

实现从底部弹出或滑出选择菜单或窗口

效果一

本实例弹出窗口主要是继承PopupWindow类来实现的弹出窗体，布局可以根据自己定义设计。弹出效果主要使用了translate和alpha样式实现，具体实习如下：
第一步：设计弹出窗口xml:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout 
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="wrap_content"
  6.     android:gravity="center_horizontal"
  7.     android:orientation="vertical"
  8.   >
  10. <LinearLayout 
  11.     android:id="@+id/pop_layout"
  12.     android:layout_width="fill_parent"
  13.     android:layout_height="wrap_content"
  14.     android:gravity="center_horizontal"
  15.     android:orientation="vertical"
  16.     android:layout_alignParentBottom="true"
  17.      android:background="@drawable/btn_style_alert_dialog_background"
  18.      >
  21.     <Button
  22.         android:id="@+id/btn_take_photo"
  23.         android:layout_marginLeft="20dip"
  24.         android:layout_marginRight="20dip"
  25.         android:layout_marginTop="20dip"
  26.         android:layout_width="fill_parent"
  27.         android:layout_height="wrap_content"
  28.         android:text="拍照"
  29.         android:background="@drawable/btn_style_alert_dialog_button"
  30.         android:textStyle="bold"
  31.          />
  33.     <Button
  34.         android:id="@+id/btn_pick_photo"
  35.         android:layout_marginLeft="20dip"
  36.         android:layout_marginRight="20dip"
  37.         android:layout_marginTop="5dip" 
  38.          android:layout_width="fill_parent"
  39.         android:layout_height="wrap_content"
  40.         android:text="从相册选择"
  41.          android:background="@drawable/btn_style_alert_dialog_button"
  42.          android:textStyle="bold"
  43.          />
  45.     <Button
  46.         android:id="@+id/btn_cancel"
  47.        android:layout_marginLeft="20dip"
  48.        android:layout_marginRight="20dip"
  49.        android:layout_marginTop="15dip" 
  50.        android:layout_marginBottom="15dip"
  51.        android:layout_width="fill_parent"
  52.        android:layout_height="wrap_content"
  53.        android:text="取消"
  54.        android:background="@drawable/btn_style_alert_dialog_cancel"
  55.        android:textColor="#ffffff"
  56.        android:textStyle="bold"
  58.         />
  59. </LinearLayout>
  60. </RelativeLayout>

第二步：创建SelectPicPopupWindow类继承PopupWindow：

  1. package com.example.picpopupwindow;
  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.MotionEvent;
  8. import android.view.View;
  9. import android.view.View.OnClickListener;
  10. import android.view.View.OnTouchListener;
  11. import android.view.ViewGroup.LayoutParams;
  12. import android.widget.Button;
  13. import android.widget.PopupWindow;
  15. public class SelectPicPopupWindow extends PopupWindow {
  18.     private Button btn_take_photo, btn_pick_photo, btn_cancel;
  19.     private View mMenuView;
  21.     public SelectPicPopupWindow(Activity context,OnClickListener itemsOnClick) {
  22.         super(context);
  23.         LayoutInflater inflater = (LayoutInflater) context
  24.                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  25.         mMenuView = inflater.inflate(R.layout.alert_dialog, null);
  26.         btn_take_photo = (Button) mMenuView.findViewById(R.id.btn_take_photo);
  27.         btn_pick_photo = (Button) mMenuView.findViewById(R.id.btn_pick_photo);
  28.         btn_cancel = (Button) mMenuView.findViewById(R.id.btn_cancel);
  29.         //取消按钮
  30.         btn_cancel.setOnClickListener(new OnClickListener() {
  32.             public void onClick(View v) {
  33.                 //销毁弹出框
  34.                 dismiss();
  35.             }
  36.         });
  37.         //设置按钮监听
  38.         btn_pick_photo.setOnClickListener(itemsOnClick);
  39.         btn_take_photo.setOnClickListener(itemsOnClick);
  40.         //设置SelectPicPopupWindow的View
  41.         this.setContentView(mMenuView);
  42.         //设置SelectPicPopupWindow弹出窗体的宽
  43.         this.setWidth(LayoutParams.FILL_PARENT);
  44.         //设置SelectPicPopupWindow弹出窗体的高
  45.         this.setHeight(LayoutParams.WRAP_CONTENT);
  46.         //设置SelectPicPopupWindow弹出窗体可点击
  47.         this.setFocusable(true);
  48.         //设置SelectPicPopupWindow弹出窗体动画效果
  49.         this.setAnimationStyle(R.style.AnimBottom);
  50.         //实例化一个ColorDrawable颜色为半透明
  51.         ColorDrawable dw = new ColorDrawable(0xb0000000);
  52.         //设置SelectPicPopupWindow弹出窗体的背景
  53.         this.setBackgroundDrawable(dw);
  54.         //mMenuView添加OnTouchListener监听判断获取触屏位置如果在选择框外面则销毁弹出框
  55.         mMenuView.setOnTouchListener(new OnTouchListener() {
  57.             public boolean onTouch(View v, MotionEvent event) {
  59.                 int height = mMenuView.findViewById(R.id.pop_layout).getTop();
  60.                 int y=(int) event.getY();
  61.                 if(event.getAction()==MotionEvent.ACTION_UP){
  62.                     if(y<height){
  63.                         dismiss();
  64.                     }
  65.                 }                
  66.                 return true;
  67.             }
  68.         });
  70.     }
  72. }

第三步：编写MainActivity类实现测试：

  1. package com.example.picpopupwindow;
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.Gravity;
  6. import android.view.View;
  7. import android.view.View.OnClickListener;
  8. import android.widget.TextView;
  10. public class MainActivity extends Activity {
  12.     //自定义的弹出框类
  13.     SelectPicPopupWindow menuWindow;
  15.     @Override
  16.     public void onCreate(Bundle savedInstanceState) {
  17.         super.onCreate(savedInstanceState);
  18.         setContentView(R.layout.activity_main);
  19.         TextView tv = (TextView) this.findViewById(R.id.text);
  20.         //把文字控件添加监听，点击弹出自定义窗口
  21.         tv.setOnClickListener(new OnClickListener() {            
  22.             public void onClick(View v) {
  23.                 //实例化SelectPicPopupWindow
  24.                 menuWindow = new SelectPicPopupWindow(MainActivity.this, itemsOnClick);
  25.                 //显示窗口
  26.                 menuWindow.showAtLocation(MainActivity.this.findViewById(R.id.main), Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL, 0, 0); //设置layout在PopupWindow中显示的位置
  27.             }
  28.         });
  29.     }
  31.     //为弹出窗口实现监听类
  32.     private OnClickListener  itemsOnClick = new OnClickListener(){
  34.         public void onClick(View v) {
  35.             menuWindow.dismiss();
  36.             switch (v.getId()) {
  37.             case R.id.btn_take_photo:
  38.                 break;
  39.             case R.id.btn_pick_photo:                
  40.                 break;
  41.             default:
  42.                 break;
  43.             }
  46.         }
  48.     };
  50. }

第四：运行效果如下：
此处输入图片的描述

源码下载链接 ： http://pan.baidu.com/s/1nuejKRB

效果二

自定义一个位于底部、占满屏幕的DiaglogFragment

  1. package rfidlib.com.fangaiwujiwu.view;
  3. import android.app.Dialog;
  4. import android.os.Bundle;
  5. import android.support.v4.app.DialogFragment;
  6. import android.view.Gravity;
  7. import android.view.View;
  8. import android.view.View.OnClickListener;
  9. import android.view.Window;
  10. import android.view.WindowManager;
  11. import android.widget.ImageButton;
  12. import android.widget.ListView;
  14. import java.util.Date;
  16. import rfidlib.com.fangaiwujiwu.R;
  18. public class DatePickerDialog extends DialogFragment implements OnClickListener {
  21.   private ImageButton mCancelBtn;
  22.   private ImageButton mAcceptBtn;
  23.   private ListView    listView;
  25.   private OnDatePickerClickListener mOnDatePickerClickListener;
  27.   public void setOnDatePickerClickListener(OnDatePickerClickListener l) {
  28.      mOnDatePickerClickListener = l;
  29.   }
  31.   public interface OnDatePickerClickListener {
  32.      public void onCancelClick();
  33.      public void onAcceptClick(Date date);
  34.   }
  36.   @Override
  37.   public Dialog onCreateDialog(Bundle savedInstanceState) {
  38.     // 使用不带theme的构造器，获得的dialog边框距离屏幕仍有几毫米的缝隙。
  39.     // Dialog dialog = new Dialog(getActivity());
  40.     Dialog dialog = new Dialog(getActivity(), R.style.CustomDatePickerDialog);
  41.     dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); // must be called before set content   去掉这句代码，在这个例子中也没有影响
  42.     dialog.setContentView(R.layout.dialog_datepicker);//设置Dialog的布局
  43.     dialog.setCanceledOnTouchOutside(true);//点击屏幕之外的地方Dialog会消失
  45.     // 设置靠近屏幕底部。
  46.     Window window = dialog.getWindow();
  47.     WindowManager.LayoutParams wlp = window.getAttributes();
  48.     wlp.gravity = Gravity.BOTTOM;
  49.     wlp.width = WindowManager.LayoutParams.MATCH_PARENT;//必须要进行设置，虽然style中已经设置了宽度match_parent，但是如果不加这句代码，距离    //边框还是有距离，什么原因不清楚
  50.     window.setAttributes(wlp);                          
  53.     mCancelBtn = (ImageButton) dialog.findViewById(R.id.dialog_dashboard_date_cancel);
  54.     mAcceptBtn = (ImageButton) dialog.findViewById(R.id.dialog_dashboard_date_accept);
  57.     mCancelBtn.setOnClickListener(this);
  58.     mAcceptBtn.setOnClickListener(this);
  60.     return dialog;
  61.  }
  65.   @Override
  66.   public void onClick(View v) {
  67.     int id = v.getId();
  68.     if (mOnDatePickerClickListener != null) {
  69.         if (id == R.id.dialog_dashboard_date_cancel) {
  70.              mOnDatePickerClickListener.onCancelClick();
  71.         } else if (id == R.id.dialog_dashboard_date_accept) {
  73.            /* mOnDatePickerClickListener.onAcceptClick(cal.getTime());*/
  74.         }
  75.     }
  76.   }
  78. }

在代码中使用

  1. DatePickerDialog  mDatePickerDialog = new DatePickerDialog();
  2. if (mDatePickerDialog.isVisible()) {
  3.     mDatePickerDialog.dismiss();
  4. } else {
  5.     mDatePickerDialog.show(getSupportFragmentManager(), "date");
  6. }
  1. <style name="CustomDatePickerDialog" parent="@style/AppTheme">
  2.     <item name="android:layout_width">match_parent</item>
  3.     <item name="android:layout_height">wrap_content</item>
  4.     <item name="android:windowIsFloating">true</item><!--设置Dialog悬浮在Activity上，如果设置为false,效果图2见下-->  
  5. </style>
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5.     android:orientation="vertical"
  6. >
  8.     <FrameLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:padding="8dp" >
  13.         <ImageButton
  14.             android:id="@+id/dialog_dashboard_date_cancel"
  15.             android:layout_width="wrap_content"
  16.             android:layout_height="match_parent"
  17.             android:layout_gravity="start"
  18.             android:contentDescription="@string/app_name"
  19.             android:src="@android:drawable/ic_menu_close_clear_cancel"
  20.             android:background="@android:color/transparent" />
  22.         <ImageButton
  23.             android:id="@+id/dialog_dashboard_date_accept"
  24.             android:layout_width="wrap_content"
  25.             android:layout_height="match_parent"
  26.             android:layout_gravity="end"
  27.             android:contentDescription="@string/app_name"
  28.             android:src="@android:drawable/ic_menu_save"
  29.             android:background="@android:color/transparent" />
  31.     </FrameLayout>
  33.     <View 
  34.           android:layout_width="match_parent"
  35.           android:layout_height="1dp"
  36.           android:background="@android:color/background_light" />
  37.     <LinearLayout  android:id="@+id/ll_dialog"
  38.           android:layout_width="match_parent"
  39.           android:layout_height="170dp"
  40.           android:orientation="vertical">
  41.         <ListView android:id="@+id/list_dialog"
  42.             android:layout_width="match_parent"
  43.             android:layout_height="wrap_content">
  44.         </ListView>
  45.         <TextView
  46.             android:layout_width="match_parent"
  47.             android:layout_height="wrap_content"
  48.             android:gravity="center"
  49.             android:text="已显示全部车位信息"/>
  50.     </LinearLayout>
  53. </LinearLayout>

效果图
此处输入图片的描述

源码链接：http://pan.baidu.com/s/1pKssI8r

实现从任意位置弹出选择框，同时其他部分变暗的效果

效果如下所示
此处输入图片的描述

选择框布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     >
  8.     <ScrollView
  9.         android:background="@color/subjectBackGroundColoe"
  10.         android:layout_alignParentTop="true"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="200dp">
  14.         <LinearLayout
  15.             android:layout_width="match_parent"
  16.             android:layout_height="match_parent"
  17.             android:orientation="vertical">
  19.             <TextView
  20.                 android:layout_width="match_parent"
  21.                 android:layout_height="50dp"
  22.                 android:text="第1个"
  23.                 android:gravity="center"/>
  24.             <TextView
  25.                 android:layout_width="match_parent"
  26.                 android:layout_height="50dp"
  27.                 android:text="第2个"
  28.                 android:gravity="center"/>
  29.             <TextView
  30.                 android:layout_width="match_parent"
  31.                 android:layout_height="50dp"
  32.                 android:text="第3个"
  33.                 android:gravity="center"/>
  34.             <TextView
  35.                 android:layout_width="match_parent"
  36.                 android:layout_height="50dp"
  37.                 android:text="第4个"
  38.                 android:gravity="center"/>
  39.             <TextView
  40.                 android:layout_width="match_parent"
  41.                 android:layout_height="50dp"
  42.                 android:text="第5个"
  43.                 android:gravity="center"/>
  44.             <TextView
  45.                 android:layout_width="match_parent"
  46.                 android:layout_height="50dp"
  47.                 android:text="第6个"
  48.                 android:gravity="center"/>
  49.             <TextView
  50.                 android:layout_width="match_parent"
  51.                 android:layout_height="50dp"
  52.                 android:text="第7个"
  53.                 android:gravity="center"/>
  54.             <TextView
  55.                 android:layout_width="match_parent"
  56.                 android:layout_height="50dp"
  57.                 android:text="第8个"
  58.                 android:gravity="center"/>
  59.             <TextView
  60.                 android:layout_width="match_parent"
  61.                 android:layout_height="50dp"
  62.                 android:text="第9个"
  63.                 android:gravity="center"/>
  64.         </LinearLayout>
  66.     </ScrollView>
  67. </RelativeLayout>

布局分析，将最外层的布局，设置为充满整个屏幕，即
android:layout_width="match_parent"
android:layout_height="match_parent"
在代码中给最外层的布局，设置一个半透明的背景，已达到弹出选择框的时候，整个屏幕变暗的效果。

将ScrollView设置为
android:background="@color/subjectBackGroundColoe"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="200dp"

设置ScrollView位于弹出框的最顶部，高度为200dp,宽度为填满整个窗体，同时给其设置非透明的背景，这样就可以达到整个屏幕只有顶部部分，而底部半透明的效果，即底部变暗的效果。

代码

  1. private void showSubjectPopupWindow(View view) {//想要选择框在哪个view下面，就把那个view作为参数传递进来
  3.         // 一个自定义的布局，作为显示的内容
  4.         View contentView = LayoutInflater.from(ctx).inflate(R.layout.subject_select_layout,null);
  7.         final PopupWindow popupWindow = new PopupWindow(contentView,
  8.                 ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, true);
  10.         //实例化一个ColorDrawable颜色为半透明，已达到变暗的效果
  11.         ColorDrawable dw = new ColorDrawable(0xb0000000);
  12.         // 如果不设置PopupWindow的背景，无论是点击外部区域还是Back键都无法dismiss弹框
  13.         // 我觉得这里是API的一个bug
  14.         popupWindow.setBackgroundDrawable(dw);
  16.         // 设置好参数之后再show
  17.         popupWindow.showAsDropDown(view, 0, 0);
  19.     }

在想要显示选择框的地方，调用showSubjectPopupWindow方法即可。

基本用法参考链接 http://www.cnblogs.com/mengdd/p/3569127.html
基本用法参考链接 http://note.youdao.com/share/?id=c658bf947612cedb1039650fb26f528d&type=note

背景变暗的参考链接 http://note.youdao.com/share/?id=e2b11e8a9741bc796b04c82b5267d3f3&type=note

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注