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欢迎StarFork


 本篇
Android之SlidingPaneLayout侧滑效果扩展(SuperSlidingPaneLayout) Android之SlidingPaneLayout侧滑效果扩展(SuperSlidingPaneLayout)
前言:说到侧滑菜单,记得在很久很久以前,一说到侧滑菜单就会立刻想到SlidingMenu,在当时的印象里比较火的侧滑菜单就是SlidingMenu,最开始觉得那种效果还蛮新颖的,后来Google官方出了SlidingPaneLayout和D
2016-10-08
下一篇 
代码统计工具实测点评 代码统计工具实测点评
1. CodeMetric:CodeMetric启动后(如下图) 1.1. 代码统计项:代码统计主要包括:注释行、空白行、代码行、总行数(不包括空白行)、总行数(包括空白行)、注释率、空白率、字符数。(也就是下图里面的度量项) 1.2. 基
2016-09-26
  目录