Android自定义View（六）——打造更完美的侧滑

开篇之前，先感谢@鸿洋_，我自定义view的大部分知识都是源于他的博客。

对代码有疑问的请移步：http://blog.csdn.net/lmj623565791/article/details/39257409,但此文是里面有些叙述是错误的，请大家自行测试。

以下分析完全是基于ScrollView，和View本身的一些方法是有出入的

虽然已经有很多人写过侧滑菜单了，但是我还是要写。为什么呢？因为我在测试他们写的代码时，发现了一些概念性的错误，虽然他们的效果是出来了（有的也没出来），但是其实他们得到的这个效果具有偶然性。

就拿ScrollView的scrollTo(float x,float y)方法和View的getScrollX()方法来说，至少在我测试下来有些概念是不正确的。getScrollX是view的方法，对应的是view的mScrollX变量，返回的是当前scroll在View的坐标系中的位置，最小也就是0，最大也就是(ScrollView的直接子布局的宽度-ScrollView的宽度)的绝对值(参见ScrollView源码的clamp方法)，不可能像有人说的会出现负值，可以形象的理解为ScrollBar在ScrollView里的x坐标；scrollTo中的参数，也就是去改变ScrollBar在ScrollView里的位置的：
调用scrollTo：

 /**
     * {@inheritDoc}
     *
     * <p>This version also clamps the scrolling to the bounds of our child.
     */
    @Override
    public void scrollTo(int x, int y) {
        // we rely on the fact the View.scrollBy calls scrollTo.
        if (getChildCount() > 0) {
            View child = getChildAt(0);
            x = clamp(x, getWidth() - mPaddingRight - mPaddingLeft, child.getWidth());
            y = clamp(y, getHeight() - mPaddingBottom - mPaddingTop, child.getHeight());
            if (x != mScrollX || y != mScrollY) {
                super.scrollTo(x, y);
            }
        }
    }

——>调用clamp方法：

/*
*1.如果传入的参数小于0或者child的范围还在ScrollView范围内或相等，会直接返回0;
*2.如果ScrollView的范围加上要调整的范围大于了child的范围，那么其实只需移动到child的最后端即可。
*所以当ScrollView的scrollTo调用 super.scrollTo()时，传入的参数永远不会小于0。
*/
 private static int clamp(int n, int my, int child) {
        if (my >= child || n < 0) {
            return 0;
        }
        if ((my + n) > child) {
            return child - my;
        }
        return n;
    }

——>如果有必要滑动，调用View的scrollTo方法

 /**
     * Set the scrolled position of your view. This will cause a call to
     * {@link #onScrollChanged(int, int, int, int)} and the view will be
     * invalidated.
     * @param x the x position to scroll to
     * @param y the y position to scroll to
     */
    public void scrollTo(int x, int y) {
        if (mScrollX != x || mScrollY != y) {
            //这里才发生了对mScrollX和mScrollY的赋值
            int oldX = mScrollX;
            int oldY = mScrollY;
            mScrollX = x;
            mScrollY = y;
            //重绘和回调的处理
            invalidateParentCaches();
            onScrollChanged(mScrollX, mScrollY, oldX, oldY);
            if (!awakenScrollBars()) {
                postInvalidateOnAnimation();
            }
        }
    }

——>最后再看getScrollX

 /**
     * Return the scrolled left position of this view. This is the left edge of
     * the displayed part of your view. You do not need to draw any pixels
     * farther left, since those are outside of the frame of your view on
     * screen.
     *
     * @return The left edge of the displayed part of your view, in pixels.
     */
    public final int getScrollX() {
        return mScrollX;
    }

基于以上的一些见解，所以有了优化过后的侧滑：

/**
 * 包名：com.ykbjson.customview
 * 描述：基于HorizontalScrollView的滑动菜单
 * 创建者：yankebin
 * 日期：2015/12/15
 */
public class SlideMenu extends HorizontalScrollView implements SlideBase {
    private String TAG = getClass().getSimpleName();
    /**
     * 滑动偏移量
     */
    private static final int BASE_SLIDE_BLOCK = 12;

    /**
     * 屏幕像素密度
     */
    private float density;

    /**
     * 菜单效果
     */
    private int mode;
    /**
     * 是否已加载过一次layout，这里onLayout中的初始化只需加载一次
     */
    private boolean loadOnce;

    /**
     * 左侧布局对象。
     */
    private View leftLayout;

    /**
     * 右侧布局对象。
     */
    private View rightLayout;
    /**
     * 菜单宽度
     */
    private int menuWidth;
    /**
     * 滑动开始时的x坐标
     */
    private float downX;
    /**
     * 滑动开始时的y坐标
     */
    private float downY;
    /**
     * 菜单状态
     */
    private boolean isMenuOpen;

    private boolean slideMenuContent;
    private float menuAlpha;
    private float contentAlpha;
    private float menuScale;
    private float contentScal;
    private float menuMove;

    /**
     * 重写SlidingLayout的构造函数
     *
     * @param context
     */
    public SlideMenu(Context context) {
        this(context, null);
    }

    /**
     * 重写SlidingLayout的构造函数
     *
     * @param context
     * @param attrs
     */
    public SlideMenu(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    /**
     * 重写SlidingLayout的构造函数
     *
     * @param context
     * @param attrs
     * @param defaultStyle
     */
    public SlideMenu(Context context, AttributeSet attrs, int defaultStyle) {
        super(context, attrs, defaultStyle);
        initAttributeSet(attrs);
        density = getResources().getDisplayMetrics().density;
        final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SlideMenu);
        mode = typedArray.getInteger(typedArray.getIndex(R.styleable.SlideMenu_slide_mode), MODE_NORMAL);
        menuWidth = typedArray.getDimensionPixelSize(R.styleable.SlideMenu_slide_menu_width, ToolUnit.dipTopx(300));
        slideMenuContent = typedArray.getBoolean(R.styleable.SlideMenu_slide_menu_content_enabled, true);
        menuAlpha = typedArray.getFloat(R.styleable.SlideMenu_menu_alpha_coefficient, 0.6f);
        contentAlpha = typedArray.getFloat(R.styleable.SlideMenu_content_alpha_coefficient, 1f);
        menuScale = typedArray.getFloat(R.styleable.SlideMenu_menu_scale_coefficient, 0.3f);
        contentScal = typedArray.getFloat(R.styleable.SlideMenu_content_scale_coefficient, 0.8f);
        menuMove = typedArray.getFloat(R.styleable.SlideMenu_menu_content_move_coefficient, 0.3f);
        typedArray.recycle();
        initContainer();
    }

    /**
     * 初始化一些属性
     *
     * @param attrs
     */
    private void initAttributeSet(AttributeSet attrs) {
        if (getChildCount() > 0) {
            throw new IllegalArgumentException("不允许在布局文件中添加子视图");
        }
        if (null == attrs) {
            setLayoutParams(new RelativeLayout.LayoutParams(-2, -1));
        }
        //删除ScrollView边界阴影
        setHorizontalFadingEdgeEnabled(false);
        setVerticalFadingEdgeEnabled(false);
        //删除ScrollView拉到尽头（顶部、底部、左侧、右侧），然后继续拉出现的阴影效果
        setOverScrollMode(OVER_SCROLL_NEVER);
    }

    /**
     * @param layoutResId
     */
    public void setBackGround(int layoutResId) {
        View view = LayoutInflater.from(getContext()).inflate(layoutResId, this, false);
        setBackGround(view);
    }

    /**
     * @param view
     */
    public void setBackGround(View view) {
        FrameLayout bgLayout = (FrameLayout) findViewById(BACKGROUND_CONTAINER_ID);
        bgLayout.addView(view, 0);
    }

    /**
     * @param layoutResId
     */
    public void setMenuBackGround(int layoutResId) {
        View view = LayoutInflater.from(getContext()).inflate(layoutResId, this, false);
        setMenuBackGround(view);
    }

    /**
     * @param view
     */
    public void setMenuBackGround(View view) {
        FrameLayout bgLayout = (FrameLayout) findViewById(MENU_CONTAINER_ID);
        bgLayout.addView(view, 0);
    }

    @Override
    public void initContainer() {
        ViewGroup bgLayout = (ViewGroup) createContainer(BACKGROUND_CONTAINER_ID);
        addView(bgLayout);
        LinearLayout container = (LinearLayout) createContainer(MAIN_CONTAINER_ID);
        bgLayout.addView(container);
        View menu = createContainer(MENU_CONTAINER_ID);
        View content = createContainer(CONTENT_CONTAINER_ID);
        container.addView(menu);
        container.addView(content);

    }

    @Override
    public View createContainer(int id) {
        View container = new LinearLayout(getContext());
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(-2, -1);
        if (id == MENU_CONTAINER_ID) {
            container = new FrameLayout(getContext());
            params.width = menuWidth;

        } else if (id == BACKGROUND_CONTAINER_ID) {
            container = new FrameLayout(getContext());
        } else if (id == CONTENT_CONTAINER_ID) {
            ((LinearLayout) container).setOrientation(LinearLayout.VERTICAL);
            params.width = getResources().getDisplayMetrics().widthPixels;
        } else {
            ((LinearLayout) container).setOrientation(LinearLayout.HORIZONTAL);
        }

        //防止手机休眠唤醒后或其他情况引起scroll自动滚动
        container.setFocusable(true);
        container.setFocusableInTouchMode(true);
        container.setId(id);
        container.setLayoutParams(params);

        return container;
    }

    @Override
    public void setMenu(int layoutId) {
        ViewGroup left = (ViewGroup) findViewById(MENU_CONTAINER_ID);
        if (left.getChildCount() > 1) {
            throw new IllegalArgumentException("菜单视图已存在");
        }
        View menu = LayoutInflater.from(getContext()).inflate(layoutId, null, false);
        setMenu(menu);
    }

    @Override
    public void setMenu(View menuView) {
        addChildView(menuView, MENU_CONTAINER_ID);
    }

    @Override
    public void setContent(int layoutId) {
        ViewGroup right = (ViewGroup) findViewById(CONTENT_CONTAINER_ID);
        if (right.getChildCount() > 0) {
            throw new IllegalArgumentException("内容视图已存在");
        }
        View content = LayoutInflater.from(getContext()).inflate(layoutId, null, false);
        setContent(content);
    }

    @Override
    public void setContent(View contentView) {
        addChildView(contentView, CONTENT_CONTAINER_ID);
    }

    @Override
    public void addChildView(View view, int id) {
        ViewGroup container = (ViewGroup) findViewById(id);
        if (null == container) {
            throw new NullPointerException("视图容器为空");
        }

        if (null == view.getLayoutParams()) {
            view.setLayoutParams(new ViewGroup.LayoutParams(-1, -1));
        }

        container.addView(view);
    }


    @Override
    public void onLayoutInit() {
        loadOnce = true;
        // 获取左侧布局对象
        leftLayout = findViewById(MENU_CONTAINER_ID);
        // 获取右侧布局对象
        rightLayout = findViewById(CONTENT_CONTAINER_ID);
        scrollTo(menuWidth, 0);
    }

    /**
     * 设置菜单动画模式
     *
     * @param mode
     */
    public void setMode(int mode) {
        this.mode = mode;
    }

    /**
     * 在onLayout中重新设定左侧布局和右侧布局的参数。
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (changed && !loadOnce) {
            onLayoutInit();
        }
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        //l是当前scroller的相对（scrollview起始位置）坐标，这样计算出来的系数刚好是menu的显示宽度的占比
        float scale = l * 1.0f / menuWidth;
        switch (mode) {
            case MODE_CONTENT_SCROLL_ONLY:
                ViewHelper.setTranslationX(leftLayout, menuWidth * scale);
                if (slideMenuContent) {
                    ViewGroup menu = ((ViewGroup) leftLayout);
                    View menuContent = menu.getChildAt(menu.getChildCount() - 1);
                    //控制menu的顶层视图不滑动，但速度和scroller的速度不等，实现层次移动效果
                    ViewHelper.setTranslationX(menuContent, -menuWidth * scale * menuMove);
                }
                break;
            case MODE_SCROLL_ALL_WITH_SCALE:
                float leftScale = 1 - menuScale * scale;
                float rightScale = contentScal + scale * (1 - contentScal);
                ViewHelper.setScaleX(leftLayout, leftScale);
                ViewHelper.setScaleY(leftLayout, leftScale);
                ViewHelper.setAlpha(leftLayout, menuAlpha + (1 - menuAlpha) * (1 - scale));

                ViewHelper.setPivotX(rightLayout, 0);
                ViewHelper.setPivotY(rightLayout, rightLayout.getHeight() / 2);
                ViewHelper.setScaleX(rightLayout, rightScale);
                ViewHelper.setScaleY(rightLayout, rightScale);
                break;
            default:
                break;
        }
        ViewHelper.setAlpha(rightLayout, contentAlpha + (1 - contentAlpha) * (1 - scale));
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        if (action == MotionEvent.ACTION_UP) {
            int scrollX = (int) (ev.getRawX() - downX);
            int slideWidth = menuWidth / BASE_SLIDE_BLOCK;
            if (scrollX == 0 || scrollX == menuWidth) {
                return false;
            }
            int slideX = Math.abs(scrollX);
            //右滑
            if (scrollX > 0) {
                if (slideX >= slideWidth) {
                    smoothScrollTo(0, 0);
                    isMenuOpen = true;
                } else {
                    if (isMenuOpen) {
                        smoothScrollTo(0, 0);
                    } else {
                        smoothScrollTo(menuWidth, 0);
                    }
                }
            }
            //左滑
            else if (scrollX < 0) {
                if (slideX >= slideWidth) {
                    smoothScrollTo(menuWidth, 0);
                    isMenuOpen = false;
                } else {
                    if (isMenuOpen) {
                        smoothScrollTo(0, 0);
                    } else {
                        smoothScrollTo(menuWidth, 0);
                    }
                }
            }
            //未滑动
            else {
                if (!isMenuOpen) {
                    smoothScrollTo(menuWidth, 0);
                } else {
                    smoothScrollTo(0, 0);
                }
            }
            downX = 0;
            downY = 0;
            return true;
        } else if (action == MotionEvent.ACTION_MOVE) {
            if (downX == 0) {
                downX = ev.getRawX();
            }
            if (downY == 0) {
                downY = ev.getRawY();
            }
        }

        return super.onTouchEvent(ev);
    }

    /**
     * 打开菜单
     */
    public void openMenu() {
        if (isMenuOpen) {
            return;
        }

        smoothScrollTo(0, 0);
        isMenuOpen = true;
    }

    /**
     * 关闭菜单
     */
    public void closeMenu() {
        if (!isMenuOpen) {
            return;
        }

        smoothScrollTo(menuWidth, 0);
        isMenuOpen = false;
    }

    /**
     * 切换菜单状态
     */
    public void toggle() {
        if (isMenuOpen) {
            closeMenu();
        } else {
            openMenu();
        }
    }
}

一些自定义属性（不要吐槽我的命名(^o^)/）

   <declare-styleable name="SlideMenu" >
        <attr name="slide_mode" format="integer">
            <!-- 菜单、内容都一起移动-->
            <flag name="MODE_NORMAL" value="1"/>
            <!-- 菜单不移动-->
            <flag name="MODE_SCROLL_CONTENT" value="2"/>
            <!-- 菜单、内容移动的同时还缩放menu和content视图-->
            <flag name="MODE_SCROLL_WIDTH_SCALE" value="3"/>
        </attr>
        <!-- 菜单的宽度 dp-->
        <attr name="slide_menu_width" format="dimension"/>
        <!-- 菜单内容移动（菜单父视图不动）-->
        <attr name="slide_menu_content_enabled" format="boolean"/>
        <!-- 菜单内容移动的系数-->
        <attr name="menu_content_move_coefficient" format="float"/>
        <!-- 菜单缩放的比例-->
        <attr name="menu_scale_coefficient" format="float"/>
        <!-- 内容缩放的比例-->
        <attr name="content_scale_coefficient" format="float"/>
        <!-- 菜单透明的比例-->
        <attr name="menu_alpha_coefficient" format="float"/>
        <!-- 内容透明的比例-->
        <attr name="content_alpha_coefficient" format="float"/>
    </declare-styleable>

最后，无图无真相啊：