打造狂拽炫酷的主流自定义侧滑控件--仿酷狗和QQ5.0集成控件
2016-09-25 10:26
309 查看
在上文中,我们实现了普通的侧滑项目,在本篇中,咱们继续完善上篇。这个效果是仿QQ5.0和酷狗侧滑特效的。使用的话大家下载源码看demo,页很简单。同样,不上传github了。使用请下载源码直接复制进你的项目。
请把主界面的背景图片改成你自己的布局xml文件,使用include包含进去。include导入的主界面请使用LinearLayout父布局。
具备非常强的视觉差特效。
我们来回顾下上篇文章的内容。点击回顾自定义高级控件打造主流的侧滑菜单控件
计算屏幕宽度
计算menu菜单界面和主界面宽度
设置触摸事件监听(onTouchEvent)
设置初始布局位置(onLayout)在了解上篇内容之后,咱们现在加以拓展。咱们的目标效果是下面这样。
在上面这个效果图,我们可以看见有缩放动画,有透明度变化,有平移动画。
咱们的思路是怎么样的呢?咱们只需要在上篇基础上加上滚动事件监听。不过需要注意的是,计算缩放的进度技巧。
目前的动画效果的有scale,translate,rotate旋转等,还有透明度Alpha动画以及渐变动画等。咱们今天只用到了scale缩放和translate平移和透明度alpha变化。
我们需要导入一个快捷的View动画的帮助工具类,这个百度可以随便搜到,叫做nineoldandroidsjar。到最后我会提供给大家下载。里面的ViewHelper封装了动画帮助的方法。
ok,我们需要充写的方法是onScrollChanged方法。缩放进度怎么计算呢? 其实很简单,我们首先看到onScrollChanged(int l, int t, int oldl, int oldt);这个方法,这个方法里面的参数
l当前的水平滚动位置
t当前的垂直滚动位置
oldl之前的水平滚动位置
oldt之前的垂直滚动位置
缩放的scale参数最大值是1,那么咱们随着手指的滑动缩放应该是多少好呢?
通过当前水平滚动的位置,我们可以得到缩放进度,即水平滚动的距离 / 总距离。而菜单页的总距离就是mMenuWidth。两者的比值就可以当做一个进度值。那么缩放的比例scale就等于1X进度。我们知道这些,于是我们可以将缩放的比例设置在0.7到1之间,scale缩放比例 = 0.7+0.3X进度比例 。然后透明度呢?我们可以同样采用这种方法进行设置,alpha透明度
= 0.8+0.2X进度比例,这个可以通过实际测试而定。
ViewHelper类是nineoldandroidsjar里面的,从上面看起来使用起来还是非常方便的。
加上上面的onScrollChanded方法,咱们以及实现了缩放等动画效果。那么我们要想更加精确地计算及得到更好体验的滑动效果,还需要在手势监听中计算。
当手势滑动的距离小于屏幕宽度的五分之一时候,我们滑不到预期位置,相反,我们可以滑动到预期位置。那么如何实现呢? 这个地方我采用的方式是通过判断menu菜单界面是否隐藏来作为判断值。
我们重写一下onTouchEvent方法。首先,我们得到按下的坐标位置,然后再得到松开的坐标位置,假设松开的横坐标为X2,按下时候的横坐标为X1.如果X2 - X1>0,就说明了向右滑动,反之,向左移动。那么我们可以对其绝对值进行判断,如果大于某个定值,就能滑到预期位置。小于就停在原位置。
我们先声明一个标志来判断菜单界面是否可视,默认初始化是不可见的,所以设置为false。
具体的代码如下:
好了,到这为止,咱们就完成了整个侧滑SlidingMenu。
最后提供给大家源码下载。
源码下载
请把主界面的背景图片改成你自己的布局xml文件,使用include包含进去。include导入的主界面请使用LinearLayout父布局。
具备非常强的视觉差特效。
我们来回顾下上篇文章的内容。点击回顾自定义高级控件打造主流的侧滑菜单控件
计算屏幕宽度
计算menu菜单界面和主界面宽度
设置触摸事件监听(onTouchEvent)
设置初始布局位置(onLayout)在了解上篇内容之后,咱们现在加以拓展。咱们的目标效果是下面这样。
在上面这个效果图,我们可以看见有缩放动画,有透明度变化,有平移动画。
咱们的思路是怎么样的呢?咱们只需要在上篇基础上加上滚动事件监听。不过需要注意的是,计算缩放的进度技巧。
目前的动画效果的有scale,translate,rotate旋转等,还有透明度Alpha动画以及渐变动画等。咱们今天只用到了scale缩放和translate平移和透明度alpha变化。
我们需要导入一个快捷的View动画的帮助工具类,这个百度可以随便搜到,叫做nineoldandroidsjar。到最后我会提供给大家下载。里面的ViewHelper封装了动画帮助的方法。
ok,我们需要充写的方法是onScrollChanged方法。缩放进度怎么计算呢? 其实很简单,我们首先看到onScrollChanged(int l, int t, int oldl, int oldt);这个方法,这个方法里面的参数
l当前的水平滚动位置
t当前的垂直滚动位置
oldl之前的水平滚动位置
oldt之前的垂直滚动位置
缩放的scale参数最大值是1,那么咱们随着手指的滑动缩放应该是多少好呢?
通过当前水平滚动的位置,我们可以得到缩放进度,即水平滚动的距离 / 总距离。而菜单页的总距离就是mMenuWidth。两者的比值就可以当做一个进度值。那么缩放的比例scale就等于1X进度。我们知道这些,于是我们可以将缩放的比例设置在0.7到1之间,scale缩放比例 = 0.7+0.3X进度比例 。然后透明度呢?我们可以同样采用这种方法进行设置,alpha透明度
= 0.8+0.2X进度比例,这个可以通过实际测试而定。
protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); //缩放比例 float scale = (float)l/mMenuWidth; Log.e("TAG", scale+""); //左菜单缩放 float scaleLeft = 1-0.3f*scale; ViewHelper.setScaleX(mMenuLayout, scaleLeft); ViewHelper.setScaleY(mMenuLayout, scaleLeft); //透明度缩放 float alphaLeft = 1- scale; ViewHelper.setAlpha(mMenuLayout, alphaLeft); //主界面 float scaleRight = 0.93f + scale * 0.07f; ViewHelper.setScaleX(mMainLayout, scaleRight); ViewHelper.setScaleY(mMainLayout, scaleRight); //视觉差平移 ViewHelper.setTranslationX(mMenuLayout, mMenuWidth * scale); }
ViewHelper类是nineoldandroidsjar里面的,从上面看起来使用起来还是非常方便的。
加上上面的onScrollChanded方法,咱们以及实现了缩放等动画效果。那么我们要想更加精确地计算及得到更好体验的滑动效果,还需要在手势监听中计算。
当手势滑动的距离小于屏幕宽度的五分之一时候,我们滑不到预期位置,相反,我们可以滑动到预期位置。那么如何实现呢? 这个地方我采用的方式是通过判断menu菜单界面是否隐藏来作为判断值。
boolean flag = false;//用来标志菜单界面不可见
我们重写一下onTouchEvent方法。首先,我们得到按下的坐标位置,然后再得到松开的坐标位置,假设松开的横坐标为X2,按下时候的横坐标为X1.如果X2 - X1>0,就说明了向右滑动,反之,向左移动。那么我们可以对其绝对值进行判断,如果大于某个定值,就能滑到预期位置。小于就停在原位置。
我们先声明一个标志来判断菜单界面是否可视,默认初始化是不可见的,所以设置为false。
if(flag == false){ //当menu菜单界面不可见时 ... //对坐标改变的绝对值进行判断 ... }else{ //当menu菜单界面可见时 ... //对坐标改变的绝对值进行判断}
具体的代码如下:
public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: downX = ev.getX();//按下的横坐标 break; case MotionEvent.ACTION_UP: upX = ev.getX();//松开的横坐标 d = upX - downX;//计算绝对值判断是否滑动 float ds = Math.abs(d); if(flag==false){ //左移 if(d<0){ this.smoothScrollTo(mMenuWidth, 0); flag = false; } //右移 if(d>0){ if(ds>mScreenWidth/5){ this.smoothScrollTo(0, 0); flag = true;//显示 }else{ this.smoothScrollTo(mMenuWidth, 0); flag = false;//隐藏 } } }else if(flag == true){ //左移 if(d<0){ if(ds<mScreenWidth/5){ this.smoothScrollTo(0, 0); flag = true; }else{ this.smoothScrollTo(mMenuWidth, 0); flag = false; } } //右移 if(d>0){ this.smoothScrollTo(0, 0); flag = true; } } return true; default: break; } return super.onTouchEvent(ev); }
好了,到这为止,咱们就完成了整个侧滑SlidingMenu。
最后提供给大家源码下载。
源码下载
相关文章推荐
- 自定义高级控件打造主流的侧滑菜单控件
- Android 自定义View修炼-打造完美的自定义侧滑菜单/侧滑View控件(转)
- 安卓开发笔记——自定义HorizontalScrollView控件(实现QQ5.0侧滑效果)
- Android 自定义View修炼-打造完美的自定义侧滑菜单/侧滑View控件
- 自定义HorizontalScrollView控件(实现QQ5.0侧滑效果)
- Android控件View打造完美的自定义侧滑菜单
- Android 自定义View修炼-打造完美的自定义侧滑菜单/侧滑View控件
- Android 高仿微信头像截取 打造不一样的自定义控件
- Android 高仿微信头像截取 打造不一样的自定义控件
- Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果
- Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果
- Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果
- 自定义Android侧滑菜单控件
- Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果
- 一个集成自定义分页和列可拖动的GridView控件
- Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果
- Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果
- 集成自动化的条形码功能到internet应用程序,网站或自定义Java应用程序的条码控件Java Barcode Package
- 构建自定义控件之五——自定义控件集成javascript
- WPF入门(02):打造自定义风格的控件