文章详情页 WebView与 下面评论区RecyclerView如何连贯滑动的
作者：王正一
链接：
https://segmentfault.com/a/1190000019272870
很多大厂 App 新闻类客户端文章详情页都内容区域是 Webview，下面评论区域是 RecylcerView 但是可以连贯在一起滚动，是如何做到的呢？ 相信这篇文章会给你一定的启发。
1
从一个简单的DEMO看什么是嵌套滚动
我们先来看一下DEMO的效果，直观的感受一下什么是嵌套滚动：
在解释上图涉及到哪些嵌套滑动操作之前，我先贴一下嵌套布局的xml结构：
其中：
1. NestedWebViewRecyclerViewGroup为最外层滑动容器;
2. com.wzy.nesteddetail.view.NestedScrollWebView为布局顶部可嵌套滑动的View;
3. TextView为布局中部不可滑动的View;
4. android.support.v7.widget.RecyclerView为布局底部可滑动的View;
现在我们来说明一下，简单的DEMO效果中包含了哪些嵌套滑动操作:
1. 向上滑动顶部WebView时，首先滑动WebView的内容，WebView的内容滑动到底后再滑动外层容器。外层容器滑动到RecyclerView完全露出后，再将滑动距离或者剩余速度传递给RecyclerView继续滑动.
2. 滑动底部RecyclerView时，首先滑动RecyclerView的内容，RecyclerView的内容滑动到顶后再滑动外层容器。外层容器也滑动到顶后，再将滑动距离或者剩余速度传递给WebView继续滑动.
3. 触摸本身不可滑动的TextView时，滑动事件被外层容器拦截。外层容器根据滑动方向和是否滑动到相应阈值，再将相应的滑动距离或者速度传递给WebView或者RecyclerView.
再不知道NestedScrolling机制之前，我相信大部分人想实现上面的滑动效果都是比较头大的，特别是滑动距离和速度要从WebView->外层容器->RecyclerView并且还要支持反向传递。
有了Google提供的牛逼嵌套滑动机制，再加上这篇文章粗浅的科普，我相信大部分人都能够实现这种滑动效果。这种效果最常见的应用场景就是各种新闻客户端的详情页。
2
NestedScrolling接口简介
Android在support.v4包中提供了用于View支持嵌套滑动的两个接口:
-
NestedScrollingParent
-
NestedScrollingChild
我先用比较白话的语言介绍一下NestedScrolling的工作原理：
1. Google从逻辑上区分了滑动的两个角色：NestedScrollingParent简称ns parent，NestedScrollingChild简称ns child。对应了滑动布局中的外层滑动容器和内部滑动容器。
2. ns child在收到DOWN事件时，找到离自己最近的ns parent，与它进行绑定并关闭它的事件拦截机制。
3. ns child会在接下来的MOVE事件中判定出用户触发了滑动手势，并把事件拦截下来给自己消费。
4. 消费MOVE事件流时，对于每一个MOVE事件增加的滑动距离：
-
4.1. ns child并不是直接自己消费，而是先将它交给ns parent，让ns parent可以在ns child滑动前进行消费。
-
4.2. 如果ns parent没有消费或者滑动没消费完，ns child再消费剩下的滑动。
-
4.3. 如果ns child消费后滑动还是有剩余，会把剩下的滑动距离再交给ns parent消费。
-
4.4. 最后如果ns parent消费滑动后还有剩余，ns child可以做最终处理。
5. ns child在收到UP事件时，可以计算出需要滚动的速度，ns child对于速度的消费流程是：
-
5.1 ns child在进行flying操作前，先询问ns parent是否需要消费该速度。如果ns parent消费该速度，后续就由ns parent带飞，自己就不消费该速度了。如果ns parent不消费，则ns child进行自己的flying操作。
-
5.2 ns child在flying过程中，如果已经滚动到阈值速度仍没有消费完，会再次将速度分发给ns parent，将ns parent进行消费。
NestedScrollingParent和NestedScrollingChild的源码定义也是为了配合滑动实现定义出来的：
NestedScrollingChild
// 设置是否开启嵌套滑动
void setNestedScrollingEnabled(boolean enabled);
// 获得设置开启了嵌套滑动
boolean isNestedScrollingEnabled();
// 沿给定的轴线开始嵌套滚动
boolean startNestedScroll(@ScrollAxis int axes);
// 停止当前嵌套滚动
void stopNestedScroll();
// 如果有ns parent，返回true
boolean hasNestedScrollingParent();
// 消费滑动时间前，先让ns parent消费
boolean dispatchNestedPreScroll(int dx , int dy, @Nullable int[] consumed, @Nullable int[] offsetInWindow);
// ns parent消费ns child剩余滚动后是否还有剩余。return true代表还有剩余
boolean dispatchNestedScroll(int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, @Nullable int[] offsetInWindow);
// 消费fly速度前，先让ns parent消费
boolean dispatchNestedPreFling(float velocityX, float velocityY);
// ns parent消费ns child消费后的速度之后是否还有剩余。return true代表还有剩余
boolean dispatchNestedFling(float velocityX, float velocityY, boolean consumed);
NestedScrollingParent
// 决定是否接收子View的滚动事件
boolean onStartNestedScroll();
// 响应子View的滚动
void onNestedScrollAccepted();
// 滚动结束的回调
void onStopNestedScroll();
// ns child滚动前回调
void onNestedPreScroll();
// ns child滚动后回调
void onNestedScroll();
// ns child flying前回调
boolean onNestedPreFling();
// ns child flying后回调
boolean onNestedFling();
// 返回当前布局嵌套滚动的坐标轴
int getNestedScrollAxes();
Google为了让开发者更加方便的实现这两个接口，提供了NestedScrollingParentHelper和NestedScrollingChildHelper这两个辅助。所以实现NestedScrolling这两个接口的常用写法是：
ns child:
public class NestedScrollingWebView extends WebView implements NestedScrollingChild {
private NestedScrollingChildHelper mChildHelper;
private NestedScrollingChildHelper getNestedScrollingHelper() {
if (mChildHelper == null) {
mChildHelper = new NestedScrollingChildHelper(this);
}
return mChildHelper;
}
@Override
public void setNestedScrollingEnabled(boolean enabled) {
getNestedScrollingHelper().setNestedScrollingEnabled(enabled);
}
@Override
public boolean isNestedScrollingEnabled() {
return getNestedScrollingHelper().isNestedScrollingEnabled();
}
@Override
public boolean startNestedScroll(int axes) {
return getNestedScrollingHelper().startNestedScroll(axes);
}
@Override
public void stopNestedScroll() {
getNestedScrollingHelper().stopNestedScroll();
}
@Override
public boolean hasNestedScrollingParent() {
return getNestedScrollingHelper().hasNestedScrollingParent();
}
@Override
public boolean dispatchNestedPreScroll(int dx, int dy, @Nullable int[] consumed, @Nullable int[] offsetInWindow) {
return getNestedScrollingHelper().dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow);
}
@Override
public boolean dispatchNestedScroll(int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, @Nullable int[] offsetInWindow) {
return getNestedScrollingHelper().dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, offsetInWindow);
}
@Override
public boolean dispatchNestedFling(float velocityX, float velocityY, boolean consumed) {
return getNestedScrollingHelper().dispatchNestedFling(velocityX, velocityY, consumed);
}
@Override
public boolean dispatchNestedPreFling(float velocityX, float velocityY) {
return getNestedScrollingHelper().dispatchNestedPreFling(velocityX, velocityY);
}
@Override
public boolean startNestedScroll(int axes, int type) {
return getNestedScrollingHelper().startNestedScroll(axes, type);
}
@Override
public void stopNestedScroll(int type) {
getNestedScrollingHelper().stopNestedScroll(type);
}
@Override
public boolean hasNestedScrollingParent(int type) {
return getNestedScrollingHelper().hasNestedScrollingParent(type);
}
@Override
public boolean dispatchNestedScroll(int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, @Nullable int[] offsetInWindow, int type) {
return getNestedScrollingHelper().dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, offsetInWindow, type);
}
@Override
public boolean dispatchNestedPreScroll(int dx, int dy, @Nullable int[] consumed, @Nullable int[] offsetInWindow, int type) {
return getNestedScrollingHelper().dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow, type);
}
}
ns parent:
public class NestedScrollingDetailContainer extends ViewGroup implements NestedScrollingParent {
private NestedScrollingParentHelper mParentHelper;
private NestedScrollingParentHelper getNestedScrollingHelper() {
if (mParentHelper == null) {
mParentHelper = new NestedScrollingParentHelper(this);
}
return mParentHelper;
}
@Override
public boolean onStartNestedScroll(View child, View target, int nestedScrollAxes) {
return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
}
@Override
public int getNestedScrollAxes() {
return getNestedScrollingHelper().getNestedScrollAxes();
}
@Override
public void onNestedScrollAccepted(View child, View target, int axes) {
getNestedScrollingHelper().onNestedScrollAccepted(child, target, axes);
}
@Override
public void onStopNestedScroll(View child) {
getNestedScrollingHelper().onStopNestedScroll(child);
}
@Override
public boolean onNestedPreFling(View target, float velocityX, float velocityY) {
// 处理预先flying事件
return false;
}
@Override
public boolean onNestedFling(View target, float velocityX, float velocityY, boolean consumed) {
// 处理后续flying事件
return false;
}
@Override
public void onNestedScroll(@NonNull View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
// 处理后续scroll事件
}
@Override
public void onNestedPreScroll(@NonNull View target, int dx, int dy, @Nullable int[] consumed) {
// 处理预先滑动scroll事件
}
}
3
效果实现
只知道原理大家肯定是不满足的，结合原理进行实操才是关键。这里以DEMO的效果为例，想要实现DEMO的效果，需要自定义两个嵌套滑动容器：
-
自定义一个支持嵌套WebView和RecyclerView滑动的外部容器。
-
自定义一个实现NestedScrollingChild接口的WebView。
外部滑动容器
在实现外部滑动的容器的时候，我们首先需要考虑这个外部滑动容器的滑动阈值是什么？
答: 外部滑动的滑动阈值=外部容器中所有子View的高度-外部容器的高度。
同理类似WebView的滑动阈值=WebView的内容高度-WebView的容器高度。
对应代码实现:
private int mInnerScrollHeight; // 可滑动的最大距离
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width;
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
if (widthMode == MeasureSpec.EXACTLY) {
width = measureWidth;
} else {
width = mScreenWidth;
}
int left = getPaddingLeft();
int right = getPaddingRight();
int top = getPaddingTop();
int bottom = getPaddingBottom();
int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
LayoutParams params = child.getLayoutParams();
int childWidthMeasureSpec = getChildMeasureSpec(widthMeasureSpec, left + right, params.width);
int childHeightMeasureSpec = getChildMeasureSpec(heightMeasureSpec, top + bottom, params.height);
measureChild(child, childWidthMeasureSpec, childHeightMeasureSpec);
}
setMeasuredDimension(width, measureHeight);
findWebView(this);
findRecyclerView(this);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childTotalHeight = 0;
mInnerScrollHeight = 0;
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
child.layout(0, childTotalHeight, childWidth, childHeight + childTotalHeight);
childTotalHeight += childHeight;
mInnerScrollHeight += childHeight;
}
mInnerScrollHeight -= getMeasuredHeight();
}
其次，需要考虑当WebView传递上滑事件和RecyclerView传递下滑事件时如何处理：
1. 向上滑动时，如果WebView内容还没有到底，该事件交给WebView处理；如果WebView内容已经滑动到底，但是滑动距离没有超过外部容器的最大滑动距离，该事件由滑动容器自身处理；如果WebView内容已经滑动到底，并且滑动距离超过了外部容器的最大滑动距离，这时将滑动事件传递给底部的 RecyclerView，让RecyclerView处理;
2. 向下滑动时，如果RecyclerView没有到顶部，该事件交给RecyclerView处理；如果RecyclerView已经到顶部，并且外部容器的滑动距离不为0，该事件由外部容器处理；如果RecyclerView已经到顶部，并且外部容器的滑动距离已经为0，则该事件交给WebView处理;
对应的WebView传递上滑速度和RecyclerView传递下滑速度，处理和Scroll传递类似。
对应代码实现:
@Override
public void onNestedPreScroll(@NonNull View target, int dx, int dy, @Nullable int[] consumed, int type) {
boolean isWebViewBottom = !canWebViewScrollDown();
boolean isCenter = isParentCenter();
if (dy > 0 && isWebViewBottom && getScrollY() < getInnerScrollHeight()) {
//为了WebView滑动到底部，继续向下滑动父控件
scrollBy(0, dy);
if (consumed != null) {
consumed[1] = dy;
}
} else if (dy < 0 && isCenter) {
//为了RecyclerView滑动到顶部时，继续向上滑动父控件
scrollBy(0, dy);
if (consumed != null) {
consumed[1] = dy;
}
}
if (isCenter && !isWebViewBottom) {
//异常情况的处理
scrollToWebViewBottom();
}
}
@Override
public boolean onNestedPreFling(View target, float velocityX, float velocityY) {
if (target instanceof NestedScrollingWebView) {
//WebView滑到底部时，继续向下滑动父控件和RV
mCurFlyingType = FLYING_FROM_WEBVIEW_TO_PARENT;
parentFling(velocityY);
} else if (target instanceof RecyclerView && velocityY < 0 && getScrollY() >= getInnerScrollHeight()) {
//RV滑动到顶部时，继续向上滑动父控件和WebView，这里用于计算到达父控件的顶部时RV的速度
mCurFlyingType = FLYING_FROM_RVLIST_TO_PARENT;
parentFling((int) velocityY);
} else if (target instanceof RecyclerView && velocityY > 0) {
mIsRvFlyingDown = true;
}
return false;
}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
int currY = mScroller.getCurrY();
switch (mCurFlyingType) {
case FLYING_FROM_WEBVIEW_TO_PARENT://WebView向父控件滑动
if (mIsRvFlyingDown) {
//RecyclerView的区域的fling由自己完成
break;
}
scrollTo(0, currY);
invalidate();
checkRvTop();
if (getScrollY() == getInnerScrollHeight() && !mIsSetFlying) {
//滚动到父控件底部，滚动事件交给RecyclerView
mIsSetFlying = true;
recyclerViewFling((int) mScroller.getCurrVelocity());
}
break;
case FLYING_FROM_PARENT_TO_WEBVIEW://父控件向WebView滑动
scrollTo(0, currY);
invalidate();
if (currY <= 0 && !mIsSetFlying) {
//滚动父控件顶部，滚动事件交给WebView
mIsSetFlying = true;
webViewFling((int) -mScroller.getCurrVelocity());
}
break;
case FLYING_FROM_RVLIST_TO_PARENT://RecyclerView向父控件滑动，fling事件，单纯用于计算速度。RecyclerView的flying事件传递最终会转换成Scroll事件处理.
if (getScrollY() != 0) {
invalidate();
} else if (!mIsSetFlying) {
mIsSetFlying = true;
//滑动到顶部时，滚动事件交给WebView
webViewFling((int) -mScroller.getCurrVelocity());
}
break;
}
}
}
最后，我们需要考虑，如果用户触摸的是内部的一个不可滑动View时，这时事件是没法通过NestedScrolling机制传递给自身的。所以需要主动拦截这种事件，拦截标准：
1. MOVE超过的TOUCH SLOP距离。
2. 当前触摸的不是支持NestedScrolling机制的View。
相应代码如下:
private int mLastY;
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mLastY = (int) event.getY();
break;
case MotionEvent.ACTION_MOVE:
if (mLastY == 0) {
mLastY = (int) event.getY();
return true;
}
int y = (int) event.getY();
int dy = y - mLastY;
mLastY = y;
scrollBy(0, -dy);
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
mLastY = 0;
break;
}
return true;
}
private int mLastMotionY;
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
final int action = ev.getAction();
switch (action & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_MOVE:
// 拦截落在不可滑动子View的MOVE事件
final int y = (int) ev.getY();
final int yDiff = Math.abs(y - mLastMotionY);
boolean isInNestedChildViewArea = isTouchNestedInnerView((int)ev.getRawX(), (int)ev.getRawY());
if (yDiff > TOUCH_SLOP && !isInNestedChildViewArea) {
mIsBeingDragged = true;
mLastMotionY = y;
final ViewParent parent = getParent();
if (parent != null) {
parent.requestDisallowInterceptTouchEvent(true);
}
}
break;
case MotionEvent.ACTION_DOWN:
mLastMotionY = (int) ev.getY();
mIsBeingDragged = false;
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
mIsBeingDragged = false;
break;
}
return mIsBeingDragged;
}
private boolean isTouchNestedInnerView(int x, int y) {
List innerView = new ArrayList<>();
if (mChildWebView != null) {
innerView.add(mChildWebView);
}
if (mChildRecyclerView != null) {
innerView.add(mChildRecyclerView);
}
for (View nestedView : innerView) {
if (nestedView.getVisibility() != View.VISIBLE) {
continue;
}
int[] location = new int[2];
nestedView.getLocationOnScreen(location);
int left = location[0];
int top = location[1];
int right = left + nestedView.getMeasuredWidth();
int bottom = top + nestedView.getMeasuredHeight();
if (y >= top && y <= bottom && x >= left && x <= right) {
return true;
}
}
return false;
}
实现一个支持嵌套滑动的WebView
本身WebView是不支持嵌套滑动的，想要支持嵌套滑动，我们需要让WebView实现NestedScrollingChild接口，并且处理好TouchEvent方法中的事件传递。
实现NestedScrollingChild接口比较简单，上面也介绍过了，可以使用Google提供的NestedScrollingChildHelper辅助类。
处理TouchEvent的思路，需要遵循以下步骤：
1. DOWN事件时通知父布局，自己要开始嵌套滑动了。
2. 对于MOVE事件，先交给父布局消费。父布局判断WebView不能向下滑动了，就父布局消费；还能向下滑动，就给WebView消费。
3. 对于Flying事件，同样先咨询父布局是否消费。父布局判断WebView不能向下滑动了，就父布局消费；还能向下滑动，就给WebView消费。
WebView最大滑动距离=WebView自身内容的高度-WebView容器的高度
思路比较简单，我们看一下对应的核心代码：
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mWebViewContentHeight = 0;
mLastY = (int) event.getRawY();
mFirstY = mLastY;
if (!mScroller.isFinished()) {
mScroller.abortAnimation();
}
initOrResetVelocityTracker();
mIsSelfFling = false;
mHasFling = false;
mMaxScrollY = getWebViewContentHeight() - getHeight();
startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL);
if (getParent() != null) {
getParent().requestDisallowInterceptTouchEvent(true);
}
break;
case MotionEvent.ACTION_MOVE:
initVelocityTrackerIfNotExists();
mVelocityTracker.addMovement(event);
int y = (int) event.getRawY();
int dy = y - mLastY;
mLastY = y;
if (getParent() != null) {
getParent().requestDisallowInterceptTouchEvent(true);
}
if (!dispatchNestedPreScroll(0, -dy, mScrollConsumed, null)) {
scrollBy(0, -dy);
}
if (Math.abs(mFirstY - y) > TOUCHSLOP) {
//屏蔽WebView本身的滑动，滑动事件自己处理
event.setAction(MotionEvent.ACTION_CANCEL);
}
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
if (isParentResetScroll() && mVelocityTracker != null) {
mVelocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
int yVelocity = (int) -mVelocityTracker.getYVelocity();
recycleVelocityTracker();
mIsSelfFling = true;
flingScroll(0, yVelocity);
}
break;
}
super.onTouchEvent(event);
return true;
}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
final int currY = mScroller.getCurrY();
if (!mIsSelfFling) {
// parent flying
scrollTo(0, currY);
invalidate();
return;
}
if (isWebViewCanScroll()) {
scrollTo(0, currY);
invalidate();
}
if (!mHasFling
&& mScroller.getStartY() < currY
&& !canScrollDown()
&& startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL)
&& !dispatchNestedPreFling(0, mScroller.getCurrVelocity())) {
//滑动到底部时，将fling传递给父控件和RecyclerView
mHasFling = true;
dispatchNestedFling(0, mScroller.getCurrVelocity(), false);
}
}
}
总结
NestedScrolling机制看似复杂，但其实就是实现两个接口的事情，而且Google提供了强大的辅助类Helper来帮助我们实现接口。
这种机制将滑动事件的传递封装起来，通过Helper辅助类实现ns parent和ns child之间的连接和交互。通过接口回调，也实现了ns parent和ns child的解耦。
DEMO项目链接：
https://github.com/wangzhengyi/Android-NestedDetail