欢迎来到 IT实训基地-南通科迅教育
咨询电话:0513-81107100
PopupWindow实现仿iOS QQ音乐上拉菜单栏(支持手势以及点击操作)
2016/12/14
科迅教育
294
南通零基础IT培训学校效果怎么样

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

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

先上下原图:

这里写图片描述

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

这里写图片描述



功能实现:

1:底部PopupWindow呈现

2:手势动作操作控件

3:按钮操作控件

4:控件内部的点击事件

How to do?

分析:

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

包结构:

这里写图片描述


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

Gradle:

?
1
<codeclass="hljs vhdl"> compile'com.apkfuns.logutils:library:1.0.6'</code>

实现类就一个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?

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<codeclass="hljs cs">  @Override
    publicbooleanonTouch(View v, MotionEvent event) {
        switch(event.getAction()) {
            caseMotionEvent.ACTION_DOWN:
                y=event.getY();
                LogUtils.d("--->HomeActivity onTouch  y=event.getY() "+y);
                break;
            caseMotionEvent.ACTION_MOVE:
                break;
            caseMotionEvent.ACTION_UP:
                floattempY=event.getY();
                LogUtils.d("--->HomeActivity onTouch  tempY=event.getY() "+tempY);
                //从下往上滑
                if(y-tempY<movey){else=""y-tempy="">moveY){
                    popupWindow.showAtLocation(v, Gravity.BOTTOM,0,0);
                }
                break;
        }
        returntrue;
    }</movey){></code>

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

1.如何控制pop的位置?

popupWindow.showAtLocation();

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

?
1
<codeclass="hljs avrasm">popupWindow.showAsDropDown(控件);</code>

左边:

?
1
<codeclass="hljs avrasm">popupWindow.showAtLocation(v, Gravity.NO_GRAVITY, location[0]-popupWindow.getWidth(), location[1]);</code>

右边:

?
1
<codeclass="hljs avrasm">popupWindow.showAtLocation(v, Gravity.NO_GRAVITY, location[0]+v.getWidth(), location[1]);  </code>

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

Style!!

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

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

2.1 HOW to use Style?

?
1
2
3
4
1.在res/values 目录下新建一个名叫style.xml的文件。增加一个<resources>根节点。
2.对每一个风格和主题,给<style>element增加一个全局唯一的名字,也可以选择增加一个父类属性。在后边我们可以用这个名字来应用风格,而父类属性标识了当前风格是继承于哪个风格。
3.在<style>元素内部,申明一个或者多个<item>,每一个<item>定义了一个名字属性,并且在元素内部定义了这个风格的值。
4.你可以应用在其他XML定义的资源。
77
关闭
先学习,后交费申请表
每期5位名额
在线咨询
免费电话
QQ联系
先学习,后交费
TOP
您好,您想咨询哪门课程呢?
关于我们
机构简介
官方资讯
地理位置
联系我们
0513-91107100
周一至周六     8:30-21:00
微信扫我送教程
手机端访问
南通科迅教育信息咨询有限公司     苏ICP备15009282号     联系地址:江苏省南通市人民中路23-6号新亚大厦三楼             法律顾问:江苏瑞慈律师事务所     Copyright 2008-