代码先行: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,注释里已写得很清楚。