打造狂拽炫酷的主流自定义侧滑控件--仿酷狗和QQ5.0集成控件

在上文中，我们实现了普通的侧滑项目，在本篇中，咱们继续完善上篇。这个效果是仿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);这个方法，这个方法里面的参数

1. l当前的水平滚动位置
2. t当前的垂直滚动位置
3. oldl之前的水平滚动位置
4. 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。

最后提供给大家源码下载。

源码下载