android:QQ多种側滑菜单的实现

行是知之始,知是行之成。这篇文章主要讲述android:QQ多种側滑菜单的实现相关的知识,希望能为你提供帮助。
在这篇文章中写了
自己定义HorizontalScrollView实现qq側滑菜单
然而这个菜单效果仅仅是普通的側拉效果 我们还能够实现抽屉式側滑菜单 就像这样
第一种效果

android:QQ多种側滑菜单的实现

文章图片

另外一种效果
android:QQ多种側滑菜单的实现

文章图片

第三种效果
android:QQ多种側滑菜单的实现

文章图片

第四种效果
android:QQ多种側滑菜单的实现

文章图片

其他代码都和上篇文章同样,仅仅是在MyHorizontalScrollView.class重写onScrollChanged这种方法
第一种的側滑效果代码非常easy
【android:QQ多种側滑菜单的实现】
@Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { // TODO Auto-generated method stub super.onScrollChanged(l, t, oldl, oldt); ViewHelper.setTranslationX(mMenu, l); }

通过setTranslationX方法设置mMenu的x坐标偏移量 当中的l=getScrollX()
设置完这些就能实现这种側滑效果
android:QQ多种側滑菜单的实现

文章图片

另外一种側滑效果代码和第一种类似。仅仅只是是对mMenu的x坐标的偏移量再添加1倍,使得mMenu菜单仿佛从右边出来一样

@Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { // TODO Auto-generated method stub super.onScrollChanged(l, t, oldl, oldt); ViewHelper.setTranslationX(mMenu, 2*l); }

android:QQ多种側滑菜单的实现

文章图片

第三种側滑效果,我们发现用到了缩放动画,所以要有个0~1的变化率,因为初始的l=getScrollX()=mMenuWidth 。终于的l=0 所以从这里我们能够得到

//scale 1~0的变化率 float scale = l*1.0f/mMenuWidth;


代码例如以下

@Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { // TODO Auto-generated method stub super.onScrollChanged(l, t, oldl, oldt); //scale 1~0的变化率 float scale = l*1.0f/mMenuWidth; //Content的缩放比例1~0.7 float rightScale=scale*0.3f+0.7f; //设置缩放中心 ViewHelper.setPivotX(mContent,0); ViewHelper.setPivotY(mContent,mContent.getHeight()/2); //进行缩放 ViewHelper.setScaleX(mContent, rightScale); ViewHelper.setScaleY(mContent, rightScale); }


至于这里我为什么设置缩放中心为mContent  x=0 y=height/2 是为了在側滑后 mContent左側离屏幕右側的距离不变 否则 距离也会进行缩放
android:QQ多种側滑菜单的实现

文章图片


第四种效果我们会发现相比着第三种 不过左側的mMenu的效果不同  会发现 进行了缩放 和透明

代码例如以下

@Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { // TODO Auto-generated method stub super.onScrollChanged(l, t, oldl, oldt); //scale 1~0的变化率 float scale = l*1.0f/mMenuWidth; //Content的缩放比例1~0.7 float rightScale=scale*0.3f+0.7f; //Menu的透明度变化0~1 float leftAlpha=1.0f-scale; //Menu的缩放变化0.3-1.0 float leftScale=1.0f-scale*0.7f; //mContent设置缩放中心 ViewHelper.setPivotX(mContent,0); ViewHelper.setPivotY(mContent,mContent.getHeight()/2); //mContent进行缩放 ViewHelper.setScaleX(mContent, rightScale); ViewHelper.setScaleY(mContent, rightScale); /* * 对mMenu进行缩放和设置透明度 * */ ViewHelper.setScaleX(mMenu, leftScale); ViewHelper.setScaleY(mMenu, leftScale); ViewHelper.setAlpha(mMenu, leftAlpha); }

就实现了这种效果
android:QQ多种側滑菜单的实现

文章图片

这两天我也尝试着进行矩形翻转的效果  模拟器上成功了 在真机上就不行了  就不帖上了 感觉浪费了好多时间  o(︶︿︶)o 唉
关于qqv6.2.3的側拉效果是
android:QQ多种側滑菜单的实现

文章图片

我们仅仅要降低mMenu的x坐标的偏移量就能实现  代码例如以下

@Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { // TODO Auto-generated method stub super.onScrollChanged(l, t, oldl, oldt); ViewHelper.setTranslationX(mMenu, l*0.6f); }


效果如图:
android:QQ多种側滑菜单的实现

文章图片

这几个动画 可能在别人看来非常easy  我想了好久啊啊  一天半的光阴啊啊 万恶的矩阵切换。,。~~NN、DFAGDAJFHJK

看到qq才想起来 今天是我生日  都不敢想它  今年才大二就这么大了 o(︶︿︶)o 唉
生日快乐。

參考:慕课网课程  qq5.0側滑菜单





















    推荐阅读