Android仿QQ侧滑效果

现在大多数APP都用到了侧滑，如QQ，加上一个简单的缩放效果，还有些是折叠效果。

先看效果图：



其实要实现也是很简单的.首先，使用第三方库SlideMenu(侧滑菜单);

然后加上动画效果就可以了。

那么动画效果要如何实现呢?

这里就要用到了菜单滑动时的监听器了：OnSlideStateChangeListener

public interface OnSlideStateChangeListener {
/**
* Invoked when slide state change
*
* @param slideState
*            {@link SlideMenu#STATE_CLOSE},{@link SlideMenu#STATE_OPEN}
*            ,{@link SlideMenu#STATE_DRAG},
*            {@link SlideMenu#STATE_SCROLL}
*/
public void onSlideStateChange(int slideState);

/**
* Invoked when slide offset change
*
* @param offsetPercent
*            negative means slide left, otherwise slide right
*/
public void onSlideOffsetChange(float offsetPercent);
}

通过源码可以看到里面有2个抽象方法：

onSlideStateChange是菜单的状态，CLOSE、OPEND等，注释很清楚

onSlideOffsetChange是菜单偏移量变化，参数是偏移量的百分比，菜单完全被遮盖是0，菜单完全显示的时候是1，这里回调的是一个不断变化的值offsetPercent(范围0-1).

所以，这里需要用到第二个方法，实现这个方法就能达到我们期望的效果了。

再来看看如何具体实现动画

1、向右滑出菜单

content页(中间页)由1.0缩小到0.9

菜单页由0.7放大至1.0，这里不固定，看需求而定。

这时offsetPercent的变化范围是 0~1

2、向左滑动隐藏菜单

content页(中间页)由0.9放大到1.0

菜单页由1.0缩小至0.7

这时offsetPercent的变化范围是 1~0

这里可能会用到点数学的知识。通过计算，得出公式：

// content页 1.0-0.9
contentView.setScaleY((float) ((offsetPercent * -0.1) + 1));
contentView.setScaleX((float) ((offsetPercent * -0.1) + 1));

//menu页 0.7-1.0
menuView.setScaleX((float) ((offsetPercent * 0.3) + 0.7));
menuView.setScaleY((float) ((offsetPercent * 0.3) + 0.7));

//向左平移
menuView.setTranslationX(-screenWidth / 4 * (1 - offsetPercent));

//透明度
menuView.setAlpha(offsetPercent);

//头像渐隐
chatFragment.setAvatarAlpha(1 - offsetPercent);

当然这里只是一种实现的方法，个人觉得还比较简单。

这里需要提的一点就是setScaleX、setScaleY等方法只有在SDK11之后使用。

不过现在市面上的手机基本上没有低于3.0的吧，所以就不考虑了。

源码下载