当前位置:u赢电竞手机版 > 操作系统 > PopUpWindow使用详解(二)——进阶及答疑操作系统

PopUpWindow使用详解(二)——进阶及答疑操作系统

文章作者:操作系统 上传时间:2019-08-13

PopupWindow实现仿iOS QQ音乐上拉菜单栏(支持手势以及点击操作)

相关文章:
1、《PopUpWindow使用详解(一)——基本使用》
2、《PopUpWindow使用详解(二)——进阶及答疑》

How to do?

分析:

首先这是一个标准的底部的PopupWindow,pop(之后都这么简写了)内部有2排,每一排都有一系列按钮,
每一个按钮都有它的点击事件,pop支持手势显示or隐藏,这一系列就是我们要做的事,让我们带着需求来看代码。

包结构:

操作系统 1

这次没像以前,写一个Demo我导了一堆包,这次就用了Log的库:

Gradle:

 compile 'com.apkfuns.logutils:library:1.0.6'

实现类就一个public class HomeActivity extends Root implements View.OnClickListener, View.OnTouchListener

例子里有一大堆的findID的东西,其实可以用注解来做这些事,可以参考

OnClickListener来解决我们所有的点击事件,从按钮到pop中的小图标

OnTouchListener来解决我们滑动操作的业务,隐藏/显示 pop用

具体滑动隐藏/显示的方法:
moveY 是一个滑动距离判断值,定义多场多端你自己决定吧
MotionEvent.ACTION_DOWN 触摸到屏幕的那一刻 记录一个坐标。
MotionEvent.ACTION_UP 手指离开时的坐标,然后?

加加减减就出结果了,是不是So easy?

   @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                y=event.getY();
                LogUtils.d("--->HomeActivity onTouch  y=event.getY() " y);
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                float tempY=event.getY();
                LogUtils.d("--->HomeActivity onTouch  tempY=event.getY() " tempY);
                //从下往上滑
                if(y-tempYmoveY){
                    popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);
                }
                break;
        }
        return true;
    }

1、setTouchable(boolean touchable)

设置PopupWindow是否响应touch事件,默认是true,如果设置为false,即会是下面这个结果:(所有touch事件无响应,包括点击事件)

操作系统 2

对应代码:

[java] view plain copy

  1. private void showPopupWindow() {  
  2.     View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popuplayout, null);  
  3.     mPopWindow = new PopupWindow(contentView);  
  4.     mPopWindow.setWidth(ViewGroup.LayoutParams.FILL_PARENT);  
  5.     mPopWindow.setHeight(ViewGroup.LayoutParams.FILL_PARENT);  
  6.   
  7.     mPopWindow.setTouchable(false);  
  8.   
  9.     ………………//单项点击  
  10.   
  11.     mPopWindow.showAsDropDown(mMenuTv);  
  12. }  

来点下一些基础知识点(N2)

1.如何控制pop的位置?

popupWindow.showAtLocation();

如果只是设置在空间的下面只需要

popupWindow.showAsDropDown(控件);

左边:

popupWindow.showAtLocation(v, Gravity.NO_GRAVITY, location[0]-popupWindow.getWidth(), location[1]);

右边:

popupWindow.showAtLocation(v, Gravity.NO_GRAVITY, location[0] v.getWidth(), location[1]);  

2.pop中,所有小控件都是遵循于style="@style/popTheme",那这部分又是如何操作的?

Style!!

Style是针对窗体元素级别的,改变指定控件或者Layout的样式。

那再说下Theme:
Theme是针对窗体级别的,改变窗体样式

2.1 HOW to use Style?

1.在res/values 目录下新建一个名叫style.xml的文件。增加一个<resources>根节点。 
2.对每一个风格和主题,给<style>element增加一个全局唯一的名字,也可以选择增加一个父类属性。在后边我们可以用这个名字来应用风格,而父类属性标识了当前风格是继承于哪个风格。 
3.在<style>元素内部,申明一个或者多个<item>,每一个<item>定义了一个名字属性,并且在元素内部定义了这个风格的值。 
4.你可以应用在其他XML定义的资源。

 

QQ音乐上拉菜单栏(支持手势以及点击操作) 能力OK的小伙伴可以不看N2,源码在最下面 今天早上一个Andorid群的小伙伴问...

二、为什么要强制代码设置PopupWindow的Height、Width

在上篇,我们留了这么个疑问,设置contentView很容易理解,但width和height为什么要强制设置呢?我们在布局代码中不是已经写的很清楚了么?比如我们的popuplayout.xml的根布局:

[html] view plain copy

  1. <RelativeLayout  
  2.         xmlns:android=""  
  3.         android:layout_width="fill_parent"  
  4.         android:layout_height="fill_parent"  
  5.         android:background="#66000000">  
  6.         …………  
  7. </RelativeLayout>     

从根布局中,我们明明可以看到layout_width我们设置为了"fill_parent",layout_height设置为了“fill_parent”;为什么非要我们在代码中还要再设置一遍:

[java] view plain copy

  1. View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popuplayout, null);  
  2. mPopWindow = new PopupWindow(contentView);  
  3. mPopWindow.setWidth(ViewGroup.LayoutParams.FILL_PARENT);  
  4. mPopWindow.setHeight(ViewGroup.LayoutParams.FILL_PARENT);  

带着这个疑问,我们从两个角度来分析,”源码角度”看看就好,关键的解答在第二部分:布局角度;

功能实现:

1:底部PopupWindow呈现

2:手势动作操作控件

3:按钮操作控件

4:控件内部的点击事件

2、布局角度

这部分我们着重讲一个问题:控件的布局参数从哪里来?
我们看下面这段XML:

[html] view plain copy

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout  
  3.         xmlns:android=""  
  4.         android:layout_width="fill_parent"  
  5.         android:layout_height="fill_parent">  
  6.     <LinearLayout  
  7.             android:layout_width="match_parent"  
  8.             android:layout_height="wrap_content"  
  9.             android:background="@drawable/pop_bg"  
  10.             android:orientation="vertical"  
  11.             android:paddingBottom="2dp"  
  12.             android:layout_alignParentRight="true">  
  13.   
  14.         <TextView  
  15.                 android:id="@ id/pop_computer"  
  16.                 android:layout_width="wrap_content"  
  17.                 android:layout_height="wrap_content"  
  18.                 style="@style/pop_text_style"  
  19.                 android:text="计算机"/>  
  20.     </LinearLayout>  
  21. </RelativeLayout>  

很明显,这段代码是个三层结构,TextView是最终的子控件。
那我现在要问了:TextView的显示大小是由谁来决定的?
是由它自己的布局layout_width="wrap_content"、layout_height="wrap_content"来决定的吗?
当然不是!!!!它的大小,应该是在它父控件的基础上决定的。即LinearLayout的显示大小确定了以后,才能确定TextView的大小。
这好比,如果LinearLayout的大小是全屏的,那TextView的大小就由它自己来决定了,那如果LinearLayout的大小只有一像素呢?那TextView的所显示的大小无论它自己怎么设置,最大也就显示一像素!
所以我们的结论来了:控件的大小,是建立在父控件大小确定的基础上的。
那同样:LinearLayout的大小确定是要靠RelativeLayout来决定。
那问题来了:RelativeLayout的大小靠谁决定呢?
当然是它的父控件了。
我们以前讲过ViewTree的概念,即在android中任何一个APP都会有一个根结点,然后它所有的Activity和Fragmentr所对应的布局都会加入到这个ViewTree中;在ViewTree中每一个控件是一个结点:
比如下面这个ViewTree(画的很烂……)
操作系统 3

从上面的ViewTree中可以看到,每一个结点都是有父结点的(除了根结点,根结点不是应用的根结点,与我们应用无关),所以每一个控件都是可以找到父控件的的布局大小的。
但我们的contentView是怎么来的呢?

[java] view plain copy

  1. View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.popuplayout, null);  

直接inflate出来的,我们对它没有设置根结点!
那问题来了?它的大小由谁来解决呢?
好像没有谁能决定了,因为他没有父结点。那它到底是多大呢?未知!
所以只有通过代码让用户去手动设置了!所以这就是为什么非要用户设置width和height的原因了。

好了,到这里,有关PopupWIndow的东东也就讲完了,希望大家能学到东西。

如果本文有帮到你,记得加关注哦

源码下载地址:

请大家尊重原创者版权,转载请标明出处: 谢谢

能力OK的小伙伴可以不看N2,源码在最下面

今天早上一个Andorid群的小伙伴问了我一些PopupWindow的问题,正好昨天晚上我注意到QQ音乐的一个菜单栏,那么今天就按照那个实现做一下(UI瞎凑合的你懂的)

先上下原图:

操作系统 4

再贴一下我们的效果(除了长得不像也没什么,哈哈哈):

操作系统 5


4、setBackgroundDrawable(Drawable background)

这个函数可是吊了,这个函数不只能设置背景……,因为你加上它之后,setOutsideTouchable()才会生效;

而且,只有加上它之后,PopupWindow才会对手机的返回按钮有响应:即,点击手机返回按钮,可以关闭PopupWindow;如果不加setBackgroundDrawable()将关闭的PopupWindow所在的Activity.
这个函数要怎么用,这里应该就不用讲了吧,可以填充进去各种Drawable,比如new BitmapDrawable(),new ColorDrawable(),等;
我们这里主要从源码的角度来看看setBackgroundDrawable()后,PopupWindow都做了些什么。
首先看看setBackgroundDrawable(),将传进去的background赋值给mBackground;

[java] view plain copy

  1. void setBackgroundDrawable(Drawable background) {  
  2.     mBackground = background;  
  3. }  

然后再看看显示showAsDropDown()显示的时候,都做了些什么。代码如下:

[java] view plain copy

  1. public void showAsDropDown(View anchor, int xoff, int yoff) {  
  2.     …………  
  3.     //准备窗口  
  4.     WindowManager.LayoutParams p = createPopupLayout(anchor.getWindowToken());  
  5.     preparePopup(p);  
  6.   
  7.     …………  
  8.     //显示窗口  
  9.     invokePopup(p);  
  10. }  

在这段代码中,先是准备窗口用来显示,然后再利用invokePopup()来显示窗体。
我们看看在preparePopup(p)中是怎么准备窗体的:

[html] view plain copy

  1. private void preparePopup(WindowManager.LayoutParams p) {  
  2.     if (mBackground != null) {  
  3.         final ViewGroup.LayoutParams layoutParams = mContentView.getLayoutParams();  
  4.         int height = ViewGroup.LayoutParams.MATCH_PARENT;  
  5.         if (layoutParams != null &&  
  6.                 layoutParams.height == ViewGroup.LayoutParams.WRAP_CONTENT) {  
  7.             height = ViewGroup.LayoutParams.WRAP_CONTENT;  
  8.         }  
  9.   
  10.         // when a background is available, we embed the content view  
  11.         // within another view that owns the background drawable  
  12.         PopupViewContainer popupViewContainer = new PopupViewContainer(mContext);  
  13.         PopupViewContainer.LayoutParams listParams = new PopupViewContainer.LayoutParams(  
  14.                 ViewGroup.LayoutParams.MATCH_PARENT, height  
  15.         );  
  16.         popupViewContainer.setBackgroundDrawable(mBackground);  
  17.         popupViewContainer.addView(mContentView, listParams);  
  18.   
  19.         mPopupView = popupViewContainer;  
  20.     } else {  
  21.         mPopupView = mContentView;  
  22.     }  
  23.     mPopupWidth = p.width;  
  24.     mPopupHeight = p.height;  
  25. }  

从 上面可以看出,如果mBackground不这空,会首先生成一个PopupViewContainer的ViewContainer,然后把 mContentView做为子布局add进去,然后把popupViewContainer做为PopupWindow做为根布局。

[html] view plain copy

  1. popupViewContainer.addView(mContentView, listParams);  

那如果mBackground不为空,那就直接把mContentView做为View传递给PopupWindow窗体。

[java] view plain copy

  1. mPopupView = mContentView  

到此,我们知道,如果mBackground不为空,会在我们设置的contentView外再包一层布局。
那下面,我们再看看包的这层布局都干了什么:
先列出来完整的代码,然后再分步讲(已做精简,如需知道更多,可参看源码)

[java] view plain copy

  1. private class PopupViewContainer extends FrameLayout {  
  2.     private static final String TAG = "PopupWindow.PopupViewContainer";  
  3.   
  4.     public PopupViewContainer(Context context) {  
  5.         super(context);  
  6.     }  
  7.     …………  
  8.    @Override  
  9.    public boolean dispatchKeyEvent(KeyEvent event) {  
  10.        if (event.getKeyCode() == KeyEvent.KEYCODE_BACK) {  
  11.            if (event.getAction() == KeyEvent.ACTION_DOWN  
  12.                    && event.getRepeatCount() == 0) {  
  13.                …………  
  14.            } else if (event.getAction() == KeyEvent.ACTION_UP) {  
  15.                KeyEvent.DispatcherState state = getKeyDispatcherState();  
  16.                if (state != null && state.isTracking(event) && !event.isCanceled()) {  
  17.                    dismiss();  
  18.                    return true;  
  19.                }  
  20.            }  
  21.            return super.dispatchKeyEvent(event);  
  22.        } else {  
  23.            return super.dispatchKeyEvent(event);  
  24.        }  
  25.    }  
  26.   
  27.     @Override  
  28.     public boolean onTouchEvent(MotionEvent event) {  
  29.         final int x = (int) event.getX();  
  30.         final int y = (int) event.getY();  
  31.           
  32.         if ((event.getAction() == MotionEvent.ACTION_DOWN)  
  33.                 && ((x < 0) || (x >= getWidth()) || (y < 0) || (y >= getHeight()))) {  
  34.             dismiss();  
  35.             return true;  
  36.         } else if (event.getAction() == MotionEvent.ACTION_OUTSIDE) {  
  37.             dismiss();  
  38.             return true;  
  39.         } else {  
  40.             return super.onTouchEvent(event);  
  41.         }  
  42.     }  
  43.     …………  
  44. }  

这里总共需要注意三部分:
(1)、PopupViewContainer派生自FrameLayout
从PopupViewContainer声明上可以看到,PopupViewContainer派生自FrameLayout;所以,这也是它能将我们传进来的contentView添加为自己的子布局的原因。
(2)、返回按钮捕捉

[java] view plain copy

  1. public boolean dispatchKeyEvent(KeyEvent event) {  
  2.    if (event.getKeyCode() == KeyEvent.KEYCODE_BACK) {  
  3.        if (event.getAction() == KeyEvent.ACTION_DOWN  
  4.                && event.getRepeatCount() == 0) {  
  5.            …………  
  6.        } else if (event.getAction() == KeyEvent.ACTION_UP) {  
  7.            //抬起手指时  
  8.            KeyEvent.DispatcherState state = getKeyDispatcherState();  
  9.            if (state != null && state.isTracking(event) && !event.isCanceled()) {  
  10.                //隐藏窗体  
  11.                dismiss();  
  12.                return true;  
  13.            }  
  14.        }  
  15.        return super.dispatchKeyEvent(event);  
  16.    } else {  
  17.        return super.dispatchKeyEvent(event);  
  18.    }  
  19. }  

从上面的代码来看,PopupViewContainer捕捉了KeyEvent.KEYCODE_BACK事件,并且在用户在点击back按钮,抬起手指的时候(event.getAction() == KeyEvent.ACTION_UP)将窗体隐藏掉。
所以,添加上mBackground以后,可以在用户点击返回按钮时,隐藏窗体!
(3)、捕捉Touch事件——onTouchEvent

[java] view plain copy

  1. public boolean onTouchEvent(MotionEvent event) {  
  2.     final int x = (int) event.getX();  
  3.     final int y = (int) event.getY();  
  4.       
  5.     if ((event.getAction() == MotionEvent.ACTION_DOWN)  
  6.             && ((x < 0) || (x >= getWidth()) || (y < 0) || (y >= getHeight()))) {  
  7.         dismiss();  
  8.         return true;  
  9.     } else if (event.getAction() == MotionEvent.ACTION_OUTSIDE) {  
  10.         dismiss();  
  11.         return true;  
  12.     } else {  
  13.         return super.onTouchEvent(event);  
  14.     }  
  15. }  

从这代码来看,PopupViewContainer捕捉了两种touch事件,MotionEvent.ACTION_DOWN和MotionEvent.ACTION_OUTSIDE;将接收到这两个事件时,会将窗体隐藏掉。
MotionEvent.ACTION_DOWN的触发很好理解,即当用户点击到PopupViewContainer事件时,就隐藏掉;
所以,下面的情况就来了:
假如有一个TextView,我们没有对它设置点击响应。那只要加了background,那点击事件就会传给下层的PopupViewContainer,从而使窗体消失。
那还有个问题,MotionEvent.ACTION_OUTSIDE是个什么鬼?它是怎么触发的。我们在下面开一段细讲。
(4)MotionEvent.ACTION_OUTSIDE与setOutsideTouchable(boolean touchable)
可能把这两个放在一块,大家可能就恍然大悟了,表着急,一个个来看。
先看看setOutsideTouchable(boolean touchable)的代码:

[java] view plain copy

  1. public void setOutsideTouchable(boolean touchable) {  
  2.    mOutsideTouchable = touchable;  
  3. }  

然后再看看mOutsideTouchable哪里会用到
下面代码,我做了严重精减,等下会再完整再讲这一块

[java] view plain copy

  1. private int computeFlags(int curFlags) {  
  2.     curFlags &= ~(WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH);  
  3.     …………  
  4.     if (mOutsideTouchable) {  
  5.         curFlags |= WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH;  
  6.     }  
  7.     …………  
  8.     return curFlags;  
  9. }  

这段代码主要是用各种变量来设置window所使用的flag;
首先,将curFlags所在运算的各种Flag,全部置为False;代码如下:

[java] view plain copy

  1. curFlags &= ~(WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH);  

然后,再根据用户设置的变量来开启:

[java] view plain copy

  1. if (mOutsideTouchable) {  
  2.    curFlags |= WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH;  
  3. }  

既然讲到FLAG_WATCH_OUTSIDE_TOUCH,那我们来看看FLAG_WATCH_OUTSIDE_TOUCH所代表的意义:

操作系统 6

这段话的意思是说,如果窗体设置了FLAG_WATCH_OUTSIDE_TOUCH这个flag,那么 用户点击窗体以外的位置时,将会在窗体的MotionEvent中收到MotionEvetn.ACTION_OUTSIDE事件。
参见:《WindowManager.LayoutParams》

所以在PopupViewContainer中添加了对MotionEvent.ACTION_OUTSIDE的捕捉!当用户点击PopupViewContainer以外的区域时,将dismiss掉PopupWindow

[java] view plain copy

  1. public boolean onTouchEvent(MotionEvent event) {  
  2.     final int x = (int) event.getX();  
  3.     final int y = (int) event.getY();  
  4.       
  5.     if ((event.getAction() == MotionEvent.ACTION_DOWN)  
  6.             && ((x < 0) || (x >= getWidth()) || (y < 0) || (y >= getHeight()))) {  
  7.         dismiss();  
  8.         return true;  
  9.     } else if (event.getAction() == MotionEvent.ACTION_OUTSIDE) {  
  10.         dismiss();  
  11.         return true;  
  12.     } else {  
  13.         return super.onTouchEvent(event);  
  14.     }  
  15. }  

(5)重看PopupWindow的computeFlags(int curFlags)函数
完整的computeFlags()函数如下:

[java] view plain copy

  1. private int computeFlags(int curFlags) {  
  2.     curFlags &= ~(  
  3.             WindowManager.LayoutParams.FLAG_IGNORE_CHEEK_PRESSES |  
  4.             WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE |  
  5.             WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE |  
  6.             WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH |  
  7.             WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS |  
  8.             WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM |  
  9.             WindowManager.LayoutParams.FLAG_SPLIT_TOUCH);  
  10.     if(mIgnoreCheekPress) {  
  11.         curFlags |= WindowManager.LayoutParams.FLAG_IGNORE_CHEEK_PRESSES;  
  12.     }  
  13.     if (!mFocusable) {  
  14.         curFlags |= WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE;  
  15.         if (mInputMethodMode == INPUT_METHOD_NEEDED) {  
  16.             curFlags |= WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM;  
  17.         }  
  18.     } else if (mInputMethodMode == INPUT_METHOD_NOT_NEEDED) {  
  19.         curFlags |= WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM;  
  20.     }  
  21.     if (!mTouchable) {  
  22.         curFlags |= WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE;  
  23.     }  
  24.     if (mOutsideTouchable) {  
  25.         curFlags |= WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH;  
  26.     }  
  27.     if (!mClippingEnabled) {  
  28.         curFlags |= WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS;  
  29.     }  
  30.     if (isSplitTouchEnabled()) {  
  31.         curFlags |= WindowManager.LayoutParams.FLAG_SPLIT_TOUCH;  
  32.     }  
  33.     if (mLayoutInScreen) {  
  34.         curFlags |= WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN;  
  35.     }  
  36.     if (mLayoutInsetDecor) {  
  37.         curFlags |= WindowManager.LayoutParams.FLAG_LAYOUT_INSET_DECOR;  
  38.     }  
  39.     if (mNotTouchModal) {  
  40.         curFlags |= WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL;  
  41.     }  
  42.     return curFlags;  
  43. }  

这段代码同样是分两段:
第一段:将所有要计算的FLAG,全部在结果curFlags中置为FALSE;

[java] view plain copy

  1. curFlags &= ~(  
  2.         WindowManager.LayoutParams.FLAG_IGNORE_CHEEK_PRESSES |  
  3.         WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE |  
  4.         WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE |  
  5.         WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH |  
  6.         WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS |  
  7.         WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM |  
  8.         WindowManager.LayoutParams.FLAG_SPLIT_TOUCH);  

第二段:然后根据用户设置的变量,逐个判断是否打开。比如下面这个:

[java] view plain copy

  1. //看到了吧,我们的setTouchable(boolean touchable)最终也是通过在这里设置的  
  2. if (!mTouchable) {  
  3.     curFlags |= WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE;  
  4. }  

好了,结合源码就给大家讲到这里了。最后总结一下:
**如果我们给PopupWindow添加了mBackground,那它将会:**

  • setOutsideTouchable(true)将生效,具有外部点击隐藏窗体的功能
  • 手机上的返回键将可以使窗体消失
  • 对于PopupWindow上层没有捕捉的点击事件,点击之后,仍然能使窗体消失。

源码在文章底部给出

本文由u赢电竞手机版发布于操作系统,转载请注明出处:PopUpWindow使用详解(二)——进阶及答疑操作系统

关键词: