android 实现仿QQ5.0 侧滑菜单
2014-09-23 08:53
309 查看
实现仿QQ5.0侧滑菜单
上一篇我们实现了最简单的侧滑菜单 ,稍微修改上一篇的代码来实现QQ5.0的侧滑效果
1、原理分析
1、QQ的内容区域会伴随菜单的出现而缩小2、QQ的侧滑菜单给人的感觉是隐藏在内容的后面,而不是拖出来的感觉
3、QQ的侧滑菜单有一个缩放以及透明度的效果
那么我们如何能做到呢:
对于1:这个好办,我们可以在滑动的时候,不断的改变内容区域的大小;如何改变呢?我们在菜单出现的整个过程中,不断记录菜单显示的宽度与其总宽度的比值,是个从0到1的过程,然后把0~1转化为1~0.7(假设内容区域缩小至0.7);不断去缩小内容区域;
对于3:也比较好办,上面已经可以得到0到1的这个值了,那么缩放和透明度的动画就不在话下了;
对于2:我们使用的HorizontalScrollView,然后水平放置了菜单和内容,如何让菜单可以隐藏到内容的后面呢?其实也比较简单,在菜单出现的过程中,不断设置菜单的x方向的偏移量;0的时候完全隐藏,0.3的时候,隐藏x方向偏移量为0.7个宽度,类推~~~
如果你对属性动画不了解,可以参:Android
属性动画(Property Animation) 完全解析 (上)和Android
属性动画(Property Animation) 完全解析 (下)
2、代码实现
1、初步的代码
布局文件和上一篇一模一样,这里就不重复粘贴了
2、实现思路
SrollView,肯定有一个ScrollChanged方法
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
// TODO Auto-generated method stub
super.onScrollChanged(l, t, oldl, oldt);
float scale=l*1.0f / mMenuWidth;
float leftScale=1-0.3f*scale;
float rightScale=0.8f + scale*0.2f;
ViewHelper.setScaleX(mMenu, leftScale);
ViewHelper.setScaleY(mMenu, leftScale);
ViewHelper.setAlpha(mMenu, 0.6f+0.4f*(1- scale));
ViewHelper.setTranslationX(mMenu, mMenuWidth*scale*0.6f);
ViewHelper.setPivotX(mContent, 0);
ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale);
}
3、动画比例计算
我们在onScrollChanged里面,拿到 l 也就是个getScrollX,即菜单已经显示的宽度值;float scale=l*1.0f / mMenuWidth;与菜单的宽度做除法运算,在菜单隐藏到显示整个过程,会得到1.0~0.0这么个变化的区间;
有了这个区间,就可以根据这个区间设置动画了;
1、首先是内容区域的缩放比例计算:
我们准备让在菜单出现的过程中,让内容区域从1.0~0.8进行变化~~
那么怎么把1.0~0.0转化为1.0~0.8呢,其实很简单了:
float rightScale = 0.8f + scale * 0.2f; (scale 从1到0 ),是不是哦了~
接下来还有3个动画:
2、菜单的缩放比例计算
仔细观察了下QQ,菜单大概缩放变化是0.7~1.0
float leftScale = 1 - 0.3f * scale;
3、菜单的透明度比例:
我们设置为0.6~1.0;即:0.6f + 0.4f * (1 - scale)
4、菜单的x方向偏移量:
看一下QQ,并非完全从被内容区域覆盖,还是有一点拖出的感觉,所以我们的偏移量这么设置:
tranlateX = mMenuWidth * scale * 0.6f ;刚开始还是让它隐藏一点点~~~
4、完整实现
只需要将2中的代码复制过去就可以了
就这么几行。这里属性动画用的nineoldandroids为了保持向下的兼容;主要就是设置了各种动画,上面都详细说了~~~
然后,记得把我们的菜单和内容的布局,单独声明出来为我们的mMenu ,mContent ~没了,就改了这么几行~
相关文章推荐
- Android 自定义View修炼-仿QQ5.0 的侧滑菜单效果的实现
- Android 高仿 QQ5.0 侧滑菜单效果 HorizontalScrollView
- Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
- android DrawerLayout实现仿QQ侧滑菜单
- Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
- Android使用DrawerLayout实现仿QQ双向侧滑菜单
- Android:高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
- Android QQ5.0侧滑菜单
- Android 高仿QQ5.2双向侧滑菜单DrawerLayout实现源码
- android类似qq5.0侧滑菜单的ResideMenu
- Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
- QQ5.0 新版 侧滑菜单效果实现!
- Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭【学习鸿洋_视频博客笔记总结】
- Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
- Android QQ5.0 侧滑菜单效果 自定义控件
- Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
- Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
- 基于Android实现仿QQ5.0侧滑
- 仿QQ5.0侧滑菜单实现
- Android QQ5.0侧滑菜单