「DragMoreScrollView」一种相册交互效果的实现

代码先行：https://github.com/CrazyPumPkin/DragMoreScrollView

有一天产品说某图片列表浏览大图要像iOS相册那样，于是便做了这么一个东西，静图如上，动图如下：

主要需求有以下几点：

• 上滑弹出详情，跟随图片底部滑动，松手整体运动至顶部，图片露出固定大小
• 下滑图片随手指轨迹移动并缩放，背景作透明度变化，松手退出大图浏览，且运动至原图片列表的位置（其实就是微信看图的那个效果）
• 在对图片进行放大缩小浏览的时候禁用上述两个交互效果

可以看到问题在于，一开始是一张看起来是普通的带缩放浏览功能的图片，上滑便变成了一个图文混搭的可上下滑动的ScrollView，从头实现一个控件貌似不是很有必要，所以我们这里选择继承ScrollView，让它帮我们处理浏览详情时的滑动。通读一遍ScrollView的onTouchEvent()方法，可知它实现滑动效果的关键代码在下面这里：

ScrollView.java
public boolean onTouchEvent(MotionEvent ev) {
        ...
        switch (actionMasked) {
            ...
            case MotionEvent.ACTION_MOVE:
               ...
                if (mIsBeingDragged) {
                    mLastMotionY = y - mScrollOffset[1];
                    final int oldY = mScrollY;
                    final int range = getScrollRange();
                    final int overscrollMode = getOverScrollMode();
                    boolean canOverscroll = overscrollMode == OVER_SCROLL_ALWAYS ||
                            (overscrollMode == OVER_SCROLL_IF_CONTENT_SCROLLS && range > 0);
                    // 调用View的overScrollBy()方法，该方法又调用了ScrollView重写的onOverScrollBy()方法，是实现滑动效果的关键代码
                    if (overScrollBy(0, deltaY, 0, mScrollY, 0, range, 0, mOverscrollDistance, true)
                            && !hasNestedScrollingParent()) {
                        mVelocityTracker.clear();
                    }
                    ...
                break;
            ...
        return true;
        }
}
protected void onOverScrolled(int scrollX, int scrollY,
            boolean clampedX, boolean clampedY) {
        //真正实现滑动的地方
        if (!mScroller.isFinished()) {
            final int oldX = mScrollX;
            final int oldY = mScrollY;
            mScrollX = scrollX;
            mScrollY = scrollY;
            invalidateParentIfNeeded();
            onScrollChanged(mScrollX, mScrollY, oldX, oldY);
            if (clampedY) {
                mScroller.springBack(mScrollX, mScrollY, 0, 0, 0, getScrollRange());
            }
        } else {
            super.scrollTo(scrollX, scrollY);
        }
        awakenScrollBars();
    }
View.java
protected boolean overScrollBy(int deltaX, int deltaY,
            int scrollX, int scrollY,
            int scrollRangeX, int scrollRangeY,
            int maxOverScrollX, int maxOverScrollY,
            boolean isTouchEvent) {
         ...
        onOverScrolled(newScrollX, newScrollY, clampedX, clampedY);
        return clampedX || clampedY;
    }

ok，知道了ScrollView的滑动机制后，我们可以重写它的onOverScrollBy方法，当处于浏览图片状态下时，我们通过消费掉该方法的deltaY来拦截ScrollView的滑动，从而让我们自己来掌控滑动的效果（例如下滑退出大图），当上滑进入详情时，我们又将滑动交付给ScrollView自己去完成

@Override
protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
    if(想拦截滑动事件){
        handle(deltaY);
        deltaY = 0;
    }
    return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
}

大致思路就是如此，实现起来也不难，代码见Github，注释里已写得很清楚。