参考的文章
感谢这些作者的分享
https://www.jianshu.com/p/24038d957e93
https://developer.android.com/jetpack/androidx/releases/swiperefreshlayout
https://wangyeming.github.io/2017/07/16/use-webview-in-viewpager/
在使用viewpager时，如果某一页存在webview，则会出现webview中轮播图或者其他滑动控件，无法滑动的问题。这种情况是可以仅通过app端就解决的。
解决问题的思路
1、如何控制使用webview处理事件还是viewpager处理事件。
2、根据什么来判断webview处理事件还是viewpager处理事件。
问题一：如何控制
所有的滑动冲突问题解决的思路就是两个：
- 内部拦截法
- 外部拦截法
在这个场景中，在webview外面，可能还包了fragment等众多viewgroup，并且最终判断谁处理事件的依据在webview中，所以这里使用内部拦截法更方便。
public class ScrollConflictWebView extends WebView {
private boolean 判断依据 = false;
public ScrollConflictWebView(Context context) {
super(context);
}
public ScrollConflictWebView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
判断依据 = false;
//Down时拦截事件保证在move时可以拿到事件。
requestDisallowInterceptTouchEvent(true);
break;
case MotionEvent.ACTION_MOVE:
//Move时决定是否还要拦截事件
requestDisallowInterceptTouchEvent(!判断依据);
break;
default:
requestDisallowInterceptTouchEvent(false);
break;
}
return super.onTouchEvent(event);
}
}
可能你在测试时，会出现无法拦截的情况，我也遇到了，因为使用了SwipeRefreshLayout。下文会说到。
问题2：如何判断
我找到了两种思路，第一种
- 通过js交互实现，h5告诉客户端什么情况下是可以滑动的，或者什么位置是可以滑动的。
- 通过webview自身的回调：onOverScrolled来判断。参考了这个文章
显然，第一种方法是非常麻烦的，涉及到js交互，不具备通用性。因为测试了uc和夸克，发现在他们的浏览器中，都自动解决了滑动冲突，所以必然是有其他可以判断的依据的，最终找到了第二种方法。
@Override
protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
isScrollX = clampedX;
}
这个方法触发的时机是webview滑动到边界时会触发，如果是横向滑动，则clamped则为true。这样的话，我们只要在clamped为true的时候，把事件交给viewpager来处理就行了。
public class ScrollConflictWebView extends WebView {
private boolean 判断依据 = false;
public ScrollConflictWebView(Context context) {
super(context);
}
public ScrollConflictWebView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
判断依据 = false;
//Down时拦截事件保证在move时可以拿到事件。
requestDisallowInterceptTouchEvent(true);
break;
case MotionEvent.ACTION_MOVE:
//Move时决定是否还要拦截事件
requestDisallowInterceptTouchEvent(!判断依据);
break;
default:
requestDisallowInterceptTouchEvent(false);
break;
}
return super.onTouchEvent(event);
}
@Override
protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
判断依据 = clampedX;
}
}
坑
上面说到了，如果你Webview的父布局中存在SwipeRefreshLayout，会发现，可能disallow无法传递到viewpager。理论上，不做任何处理，viewgroup的disallow方法，会挨个往父布局传递。但是为什么会传递失败呢？这就得看下SwipeRefreshLayout的源码(appcompat版本：1.2.0-alpha03)了：
@Override
public void requestDisallowInterceptTouchEvent(boolean b) {
// if this is a List < L or another view that doesn't support nested
// scrolling, ignore this request so that the vertical scroll event
// isn't stolen
if ((android.os.Build.VERSION.SDK_INT < 21 && mTarget instanceof AbsListView)
|| (mTarget != null && !ViewCompat.isNestedScrollingEnabled(mTarget))) {
// Nope.
} else {
super.requestDisallowInterceptTouchEvent(b);
}
}
从源码可以看出，如果SwipeRefreshLayout包裹的布局不支持NestedScroll的话，就不做任何处理。
其实这个是appcompat在1.2.0中才修改的，1.1.0版本是给了方法自己控制的：
image.png
一开始的思路是让SwipeRefreshLayout下面一层View支持nestedScroll，但是这样的话，会导致下拉刷新无法触发。
那就只能手动去修改disallow方法了：
public class AllowSwipeRefreshLayout extends QFSwipeRefreshLayout {
public AllowSwipeRefreshLayout(@NonNull @NotNull Context context) {
super(context, null);
}
public AllowSwipeRefreshLayout(@NonNull @NotNull Context context, @Nullable @org.jetbrains.annotations.Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
public void requestDisallowInterceptTouchEvent(boolean b) {
getParent().requestDisallowInterceptTouchEvent(b);
super.requestDisallowInterceptTouchEvent(b);
}
}
这样修改以后，disallow就可以正常传递给viewpager了。到这里，就完美的解决了webview嵌套在Viewpager中的滑动冲突问题。
最终实现效果与uc和夸克一致。
网友评论