Android之SlidingPaneLayout侧滑效果扩展（SuperSlidingPaneLayout）

说到侧滑菜单，记得在很久很久以前，一说到侧滑菜单就会立刻想到SlidingMenu，在当时的印象里比较火的侧滑菜单就是SlidingMenu，最开始觉得那种效果还蛮新颖的，后来Google官方出了SlidingPaneLayout和DrawerLayout后，大部分的侧滑菜单效果也就基本被满足了。本博文主要讲到基于官方v4扩展包中的SlidingPaneLayout来扩展侧滑效果，我给SldingPaneLayout的扩展控件取了个好听的名字叫：SuperSlidingPaneLayout。

说到侧滑效果扩展，这里主要用到了平移、缩放、等效果组合来达到想要的效果。

首先我们在SuperSlidingPaneLayout中定义一个枚举来表示不同的侧滑效果模式：

public enum Mode {

DEFAULT(0),
TRANSLATION(1),
SCALE_MENU(2),
SCALE_PANEL(3),
SCALE_BOTH(4),
TRANSLATION_SCALE(5);

private int mValue;

Mode(int value){
this.mValue = value;
}

private static Mode getFromInt(int value){

for(Mode mode : Mode.values()){
if(mode.mValue == value)
return mode;
}

return DEFAULT;
}
}

接着我们可以在SlidingPaneLayout源码中找到一个dispatchOnPanelSlide方法，其代码如下：

void dispatchOnPanelSlide(View panel) {
if (mPanelSlideListener != null) {
mPanelSlideListener.onPanelSlide(panel, mSlideOffset);
}
}

从方法字面意思我们不难看出这是一个调度面板滑动的方法，说白了就是里面就是一个面板滑动的监听事件，我们可以通过(slidingPaneLayout.setPanelSlideListener)设置监听来监听面板的滑动情况，既然是扩展，就不想影响监听事件，这里我们在SuperSlidingPaneLayout中新增一个方法，代码如下：

private void dispatchOnPanelMode(View panel, float slideOffset){
if (mMenuPanel == null) {
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = getChildAt(i);
if (child != panel) {
mMenuPanel = child;
break;
}
}
}
final float scale = 1 - 0.2f * slideOffset;
final float scaleLeft = 1 - 0.2f * (1 - slideOffset);
switch (mMode){
case TRANSLATION://平移效果
mMenuPanel.setTranslationX((slideOffset-1) * mMenuPanel.getWidth());
panel.setScaleX(1);
panel.setScaleY(1);

break;
case SCALE_MENU://缩放菜单效果
mMenuPanel.setPivotX(-0.2f * mMenuPanel.getWidth());
mMenuPanel.setPivotY(mMenuPanel.getHeight() / 2.0f);
mMenuPanel.setScaleX(scaleLeft);
mMenuPanel.setScaleY(scaleLeft);
panel.setScaleX(1);
panel.setScaleY(1);

break;
case SCALE_PANEL://缩放面板效果
panel.setPivotX(0);
panel.setPivotY(panel.getHeight()/2.0f);
panel.setScaleX(scale);
panel.setScaleY(scale);

break;
case SCALE_BOTH://菜单面板都缩放效果
mMenuPanel.setPivotX(-0.2f * mMenuPanel.getWidth());
mMenuPanel.setPivotY(mMenuPanel.getHeight() / 2.0f);
mMenuPanel.setScaleX(scaleLeft);
mMenuPanel.setScaleY(scaleLeft);

panel.setPivotX(0);
panel.setPivotY(panel.getHeight()/2.0f);
panel.setScaleX(scale);
panel.setScaleY(scale);

break;
case TRANSLATION_SCALE://平移缩放效果
mMenuPanel.setTranslationX((slideOffset-1) * mMenuPanel.getWidth() / 2.0f);
mMenuPanel.setPivotX(-0.2f * mMenuPanel.getWidth());
mMenuPanel.setPivotY(mMenuPanel.getHeight() / 2.0f);
mMenuPanel.setScaleX(scaleLeft);
mMenuPanel.setScaleY(scaleLeft);

panel.setPivotX(0);
panel.setPivotY(panel.getHeight()/2.0f);
panel.setScaleX(scale);
panel.setScaleY(scale);

break;
case DEFAULT://默认 即菜单固定
default:
panel.setPivotX(0);
panel.setPivotY(0);
panel.setScaleX(1);
panel.setScaleY(1);

break;
}
}

在这里简单说明下上面代码的意思，上面代码逻辑主要根据面板的偏移量来进行缩放、平移面板或菜单，达到不同的侧滑效果。

然后在dispatchOnPanelSlide中调用一下就可以了，代码如下：

void dispatchOnPanelSlide(View panel) {
dispatchOnPanelMode(panel,mSlideOffset);
if (mPanelSlideListener != null) {
mPanelSlideListener.onPanelSlide(panel, mSlideOffset);
}
}

这样几种不同的侧滑效果就算完成了，有木有很简单？下面我们来看下最终的效果图：



SuperSlidingPaneLayout最新源码已上传至github欢迎Star和Fork。