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

转载请注明出处:王亟亟的大牛之路

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

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

先上下原图:

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


功能实现:

1:底部PopupWindow呈现

2:手势动作操作控件

3:按钮操作控件

4:控件内部的点击事件

How to do?

分析:

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

包结构:

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

Gradle:

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

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

例子里有一大堆的findID的东西,其实可以用注解来做这些事,可以参考http://blog.csdn.net/ddwhan0123/article/details/47399259

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-tempY<moveY){
                    dissmissPop();
                    //从上往下滑
                }else if(y-tempY>moveY){
                    popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);
                }
                break;
        }
        return true;
    }

来点下一些基础知识点(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定义的资源。

源码地址:https://github.com/ddwhan0123/BlogSample/tree/master/PopupWindowDemo

记得点个赞哦!!

时间: 2024-12-29 12:27:52

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

ios mjrefresh-mjRefresh的上拉加载和内容重合了怎么办

问题描述 mjRefresh的上拉加载和内容重合了怎么办 我用的mjRefresh的上拉加载,然后他跟我的内容覆盖到了一起,这个怎么解决

谷歌推iOS版音乐应用:不支持歌曲购买

北京时间11月16日上午消息,谷歌Apps负责人桑达尔·皮猜(Sundar Pichai)在今年5月的D11大会上表示,谷歌将在几周 内推出iOS版Google Play Music All Access应用.不过,这款应用直到本周五才推出.谷歌产品经理布兰顿·比林斯基(Brandon Bilinski)表示:"我们花了比预想中更长的时间,才使其达到当前如此好的水平."iOS版这一应用与Android版功能基本类似,但缺乏一项最关键功能:购买歌曲.不过这一情况很正常,iOS版Kindl

下拉刷新 上拉更多 支持ListView GridView WebView

http://www.stay4it.com/forum.php?mod=viewthread&tid=2&extra=page%3D1 终于有新货了.昨天改了下,在ListView和GridView加了个返回到顶部的按钮,listview可以重写加上header和footer,具体代码我注释掉了,还是用layout的方式去做下拉刷新,大家如果要加的话把注释的代码再打开就可以了. 新浪微博就是用的这样的方式 起初觉得有些bug,但是改过之后又觉得不妥,所以就改回去了,然后加上了返回到顶部的

jquery仿web qq,想让数据从数据库读出,怎么操作

问题描述 自己弄了个仿webqq的界面,里面的数据是直接写在页面上的.我想让数据从自己的数据库中读出,大神们,这个该怎么做?用Ajax?然后呢? 解决方案 解决方案二:得到返回的数据(比如json或xml)自己解析后填充到界面解决方案三:用aJax访问你的数据层什么的,返回JONS或者XML,解析这些数据,就可以了啊.解决方案四:返回jsonxml解决方案五:jquerysignalr去看下这个技术

我在主窗口上,添加一个菜单栏和jpanel,删除jpanel,然后再添加一个jpanel。结果主窗口上的菜单栏和关闭窗口点击不起作用了。希望大神给指点一下。

问题描述 packagecom.test;importjava.awt.Color;importjava.awt.Font;importjava.awt.Graphics;importjava.awt.event.ActionEvent;importjava.awt.event.ActionListener;importjavax.swing.*;publicclassMyTankGameextendsJFrameimplementsActionListener{JMenuBarjmb;//一个

qq音乐怎么上传歌词到网络?

  1.首先登录qq音乐,播放你需要上传歌词的歌曲.然后打开歌曲的桌面歌词,点击搜索歌曲. 2.输入歌曲跟歌手进行搜索,然后就会跳出相对应的歌词,点击确定. 3.但是如果就算是搜索到了歌曲,也不一定有歌词.那怎么办呢? 4.打开搜狗音乐或者直接百度输入你要的歌曲名跟歌手,点击歌词,然后进行搜狗搜索. 然后就会找到相应的歌曲跟歌词,确定无误后,在歌词的右上角点击LRC歌词下载. 然后把歌词下载到桌面上,桌面上就会出现一个后缀名LRC的文件. 返回到qq音乐,右击桌面歌词,选择关联本地歌词. 5.选

qq音乐怎么上传歌词到网络

  首先登录qq音乐,播放你需要上传歌词的歌曲.然后打开歌曲的桌面歌词,点击搜索歌曲. 输入歌曲跟歌手进行搜索,然后就会跳出相对应的歌词,点击确定. 但是如果就算是搜索到了歌曲,也不一定有歌词.那怎么办呢? 打开搜狗音乐或者直接百度输入你要的歌曲名跟歌手,点击歌词,然后进行搜狗搜索. 然后就会找到相应的歌曲跟歌词,确定无误后,在歌词的右上角点击LRC歌词下载. 然后把歌词下载到桌面上,桌面上就会出现一个后缀名LRC的文件. 返回到qq音乐,右击桌面歌词,选择关联本地歌词. 选择刚才下载好的LRC

qq音乐2015怎么上传歌词

  首先登录qq音乐,播放你需要上传歌词的歌曲.然后打开歌曲的桌面歌词,点击搜索歌曲. qq音乐 输入歌曲跟歌手进行搜索,然后就会跳出相对应的歌词,点击确定. qq音乐 但是如果就算是搜索到了歌曲,也不一定有歌词.那怎么办呢? 打开搜狗音乐或者直接百度输入你要的歌曲名跟歌手,点击歌词,然后进行搜狗搜索. qq音乐 qq音乐 然后就会找到相应的歌曲跟歌词,确定无误后,在歌词的右上角点击LRC歌词下载. 然后把歌词下载到桌面上,桌面上就会出现一个后缀名LRC的文件. 返回到qq音乐,右击桌面歌词,选

qq音乐2015怎么上传歌词到网络

  qq音乐怎么上传歌词到网络 使用qq音乐听歌尤其一些网络歌曲很多都没有歌词,如果想成为麦霸没有歌词也就只能哼几下了,如果能有歌词,边听边学岂不更好?所以接下来小编不废说了,告诉大家qq音乐怎么上传歌词. 1.首先登录qq音乐,播放你需要上传歌词的歌曲.然后打开歌曲的桌面歌词,点击搜索歌曲. 2.输入歌曲跟歌手进行搜索,然后就会跳出相对应的歌词,点击确定. 3.但是如果就算是搜索到了歌曲,也不一定有歌词.那怎么办呢? 4.打开搜狗音乐或者直接百度输入你要的歌曲名跟歌手,点击歌词,然后进行搜狗搜