【原理篇】WebView 实现嵌套滑动，丝滑般实现吸顶效果，完美兼容 X5 webview

2023-10-21 17:10
文章标签 实现 完美 效果 滑动 嵌套 兼容 webview x5 原理篇 吸顶 丝滑般

本文主要是介绍【原理篇】WebView 实现嵌套滑动，丝滑般实现吸顶效果，完美兼容 X5 webview，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文首发我的微信公众号徐公，收录于 Github·AndroidGuide，这里有 Android 进阶成长知识体系, 希望我们能够一起学习进步，关注公众号徐公，5 年中大厂程序员，一起建立核心竞争力

上一篇文章 【使用篇】WebView 实现嵌套滑动，丝滑般实现吸顶效果，完美兼容 X5 webview
已经讲解了如何实现嵌套滑动，这篇文章，让我们一起来看他的实现原理。废话不多说，开始进入正文。

前言

讲解之前，先简单说一下嵌套滑动的一些概念。（熟悉这个的哥们可以直接跳过这个）

说到嵌套滑动，大家应该都不陌生。他是 Google 在 5.0 之后推出来的 NestedScroll 机制。

可能初学者会有这样的疑问？想比较于传统的事件分发机制，NetstedScroll 机制有什么优点。

在传统的事件分发机制 中，一旦某个 View 或者 ViewGroup 消费了事件，就很难将事件交给父 View 进行共同处理。而 NestedScrolling 机制很好地帮助我们解决了这一问题。我们只需要按照规范实现相应的接口即可，子 View 实现 NestedScrollingChild，父 View 实现 NestedScrollingParent ，通过 NestedScrollingChildHelper 或者 NestedScrollingParentHelper 完成交互。

如果对于 NestedScrolling 机制不了解的，可以看我几年前写的这篇文章。
NestedScrolling 机制深入解析

他结合 CoordinatorLayout 可以实现很多炫酷的效果，比如吸顶效果等。

有兴趣的话可以看这些文章。

使用CoordinatorLayout打造各种炫酷的效果

自定义Behavior —— 仿知乎，FloatActionButton隐藏与展示

NestedScrolling 机制深入解析

一步步带你读懂 CoordinatorLayout 源码

自定义 Behavior -仿新浪微博发现页的实现

ViewPager，ScrollView 嵌套ViewPager滑动冲突解决

自定义 behavior - 完美仿 QQ 浏览器首页，美团商家详情页

原理实现

废话不多说，今天，让我们一起来看看 WebView 怎样实现嵌套滑动。

请添加图片描述

原理简述

我们知道，嵌套滑动目前主要有几个接口 NestedScrollingChild，NestedScrollingParent 。

对于一个 ACTION_MOVE 动作

  • scrolling child 在滑动之前，会通过 NestedScrollingChildHelper 查找是否有响应的 scrolling parent，如果有的话，会先询问scrolling parent 是否需要先于scrolling child 滑动，如果需要的话，scrolling parent 进行相应的滑动，并消费一定的距离；
  • 接着scrolling child 进行相应的滑动，并消耗一定的距离值 dx，dy
    scrolling child 滑动完之后，询问scrolling parent 是否还需要继续进行滑动，需要的话，进行相应的处理。
  • 滑动结束之后，Scrolling child 会停止滑动，并通过 NestedScrollingChildHelper 通知相应的 Scrolling Parent 停止滑动。
  • 手指抬起的时候（Action_up) 的时候，根据滑动速度，计算是否相应 fling

而我们的 WebView 如果要实现嵌套滑动，那就可以借助这套机制。

实现

第一步，实现 NestedScroolChild3 接口，并重写相应的方法

public class NestedWebView extends WebView implements NestedScrollingChild3 {public NestedWebView(Context context) {this(context, null);}public NestedWebView(Context context, AttributeSet attrs) {this(context, attrs, android.R.attr.webViewStyle);}public NestedWebView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);setOverScrollMode(WebView.OVER_SCROLL_NEVER);initScrollView();mChildHelper = new NestedScrollingChildHelper(this);setNestedScrollingEnabled(true);}// 省略
}

第二步：

  • 在 ACTION_DOWN 的时候，先调用 startNestedScroll 方法，告诉 NestedScrollParent，说我要滑动了
  • 接着，在 ACTION_MOVE 的时候，调用 dispatchNestedPreScroll 方法，让 NestedScrollParent 有机会可以提前滑动，接着调用自身的 dispatchNestedScroll 方法，进行活动
   public boolean onTouchEvent(MotionEvent ev) {initVelocityTrackerIfNotExists();MotionEvent vtev = MotionEvent.obtain(ev);final int actionMasked = ev.getActionMasked();if (actionMasked == MotionEvent.ACTION_DOWN) {mNestedYOffset = 0;}vtev.offsetLocation(0, mNestedYOffset);switch (actionMasked) {case MotionEvent.ACTION_DOWN:if ((mIsBeingDragged = !mScroller.isFinished())) {final ViewParent parent = getParent();if (parent != null) {parent.requestDisallowInterceptTouchEvent(true);}}if (!mScroller.isFinished()) {abortAnimatedScroll();}mLastMotionY = (int) ev.getY();mActivePointerId = ev.getPointerId(0);startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL, ViewCompat.TYPE_TOUCH);break;case MotionEvent.ACTION_MOVE:final int activePointerIndex = ev.findPointerIndex(mActivePointerId);if (activePointerIndex == -1) {Log.e(TAG, "Invalid pointerId=" + mActivePointerId + " in onTouchEvent");break;}final int y = (int) ev.getY(activePointerIndex);int deltaY = mLastMotionY - y;if (dispatchNestedPreScroll(0, deltaY, mScrollConsumed, mScrollOffset,ViewCompat.TYPE_TOUCH)) {deltaY -= mScrollConsumed[1];mNestedYOffset += mScrollOffset[1];}if (!mIsBeingDragged && Math.abs(deltaY) > mTouchSlop) {final ViewParent parent = getParent();if (parent != null) {parent.requestDisallowInterceptTouchEvent(true);}mIsBeingDragged = true;if (deltaY > 0) {deltaY -= mTouchSlop;} else {deltaY += mTouchSlop;}}if (mIsBeingDragged) {mLastMotionY = y - mScrollOffset[1];final int oldY = getScrollY();final int range = getScrollRange();// Calling overScrollByCompat will call onOverScrolled, which// calls onScrollChanged if applicable.if (overScrollByCompat(0, deltaY, 0, oldY, 0, range, 0,0, true) && !hasNestedScrollingParent(ViewCompat.TYPE_TOUCH)) {mVelocityTracker.clear();}final int scrolledDeltaY = getScrollY() - oldY;final int unconsumedY = deltaY - scrolledDeltaY;mScrollConsumed[1] = 0;dispatchNestedScroll(0, scrolledDeltaY, 0, unconsumedY, mScrollOffset,ViewCompat.TYPE_TOUCH, mScrollConsumed);mLastMotionY -= mScrollOffset[1];mNestedYOffset += mScrollOffset[1];}break;

第三步：在 ACTION_UP 的时候，计算一下垂直方向的滑动速度，并进行分发

case MotionEvent.ACTION_UP:final VelocityTracker velocityTracker = mVelocityTracker;velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);int initialVelocity = (int) velocityTracker.getYVelocity(mActivePointerId);if ((Math.abs(initialVelocity) > mMinimumVelocity)) {if (!dispatchNestedPreFling(0, -initialVelocity)) {dispatchNestedFling(0, -initialVelocity, true);fling(-initialVelocity);}} else if (mScroller.springBack(getScrollX(), getScrollY(), 0, 0, 0,getScrollRange())) {ViewCompat.postInvalidateOnAnimation(this);}mActivePointerId = INVALID_POINTER;endDrag();break;

同时重写 computeScroll 方法，处理惯性滑动

// 在更新 mScrollX 和 mScrollY 的时候会调用
public void computeScroll() {if (mScroller.isFinished()) {return;}mScroller.computeScrollOffset();final int y = mScroller.getCurrY();int unconsumed = y - mLastScrollerY;mLastScrollerY = y;// Nested Scrolling Pre PassmScrollConsumed[1] = 0;dispatchNestedPreScroll(0, unconsumed, mScrollConsumed, null,ViewCompat.TYPE_NON_TOUCH);unconsumed -= mScrollConsumed[1];if (unconsumed != 0) {// Internal Scrollfinal int oldScrollY = getScrollY();overScrollByCompat(0, unconsumed, getScrollX(), oldScrollY, 0, getScrollRange(),0, 0, false);final int scrolledByMe = getScrollY() - oldScrollY;unconsumed -= scrolledByMe;// Nested Scrolling Post PassmScrollConsumed[1] = 0;dispatchNestedScroll(0, 0, 0, unconsumed, mScrollOffset,ViewCompat.TYPE_NON_TOUCH, mScrollConsumed);unconsumed -= mScrollConsumed[1];}if (unconsumed != 0) {abortAnimatedScroll();}// 判断是否滑动完成，没有完成的话，继续滑动 mScrollerif (!mScroller.isFinished()) {ViewCompat.postInvalidateOnAnimation(this);}
}

最后，为了确保 onTouchEvent 能够收到触摸事件，我们在 onInterceptTouchEvent 中进行拦截

public boolean onInterceptTouchEvent(MotionEvent ev) {final int action = ev.getAction();if ((action == MotionEvent.ACTION_MOVE) && (mIsBeingDragged)) { // most commonreturn true;}switch (action & MotionEvent.ACTION_MASK) {case MotionEvent.ACTION_MOVE:final int y = (int) ev.getY(pointerIndex);final int yDiff = Math.abs(y - mLastMotionY);// 判断一下滑动距离并且是竖直方向的滑动if (yDiff > mTouchSlop&& (getNestedScrollAxes() & ViewCompat.SCROLL_AXIS_VERTICAL) == 0) {// 代表药进行拦截mIsBeingDragged = true;mLastMotionY = y;initVelocityTrackerIfNotExists();mVelocityTracker.addMovement(ev);mNestedYOffset = 0;// 请求父类不要拦截事件final ViewParent parent = getParent();if (parent != null) {parent.requestDisallowInterceptTouchEvent(true);}}break;case MotionEvent.ACTION_DOWN:mLastMotionY = (int) ev.getY();mActivePointerId = ev.getPointerId(0);initOrResetVelocityTracker();mVelocityTracker.addMovement(ev);mScroller.computeScrollOffset();mIsBeingDragged = !mScroller.isFinished();startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL);break;return mIsBeingDragged;
}

处理完之后，我们的 webview 就实现了 NestedScrol 机制，可以进行嵌套滑动了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZLoWwHcf-1663672759560)(https://raw.githubusercontent.com/gdutxiaoxu/blog_image/master/22/04/webview%20%E5%B5%8C%E5%A5%97%E6%BB%91%E5%8A%A8.gif)]

X5 webView 兼容

当我将代码搬到 x5 webview 的时候，这时候进行滑动，发现无法联动了。

class NestedWebView extends com.tencent.smtt.sdk.WebView implements NestedScrollingChild3

原因分析

这是什么原因呢？

我们点进去 X5 webView 里面的代码，发现 webView 是继承 FrameLayout，而不是继承系统 WebView。

因此我们直接 extends com.tencent.smtt.sdk.WebView，对触摸事件进行拦截，实际上是对 FrameLayout 进行拦截处理，而不是对里面的 WebView 进行拦截处理，那肯定达不到嵌套滑动。

解决方案

我们先来看一下 X5 webView 的 View Tree 结构，因为 X5 webView 代码是混淆的，我们想要通过代码直接看出他的 View Tree，是不太方便的。

于是，我们可以通过代码，将 x5 webView viewTree 结构打印出来

webView = view.findViewById<WebView>(R.id.webview)
val childCount = webView.childCount
Log.i(TAG, "onViewCreated: webView  is $webView, childCount is $childCount")for (i in 0 until childCount) {Log.i(TAG, "x5 webView: childView[$i]  is ${webView.getChildAt(i)}")
}

运行以上代码，得到以下结果

可以看到 X5 WebView 应该就是在 WebView 的基础之上包了一层 FrameLayout。

那我们对没有办法拿到里面的 TencentWebViewProxy$InnerWebView 对象，其实是有的。他在里面有一个 getView 的方法。

拿到这个对象之后，我们有办法进行拦截处理嘛，像 onTouchEvent, onInterceptTouchEvent 方法？

我们在官方文档中 X5 webview 常见问题 找到这样的描述

3.10 如何重写TBS WebView 的屏幕事件（例如 overScrollBy）
需 setWebViewCallbackClient 和 setWebViewClientExtension 参考代码示例 http://res.imtt.qq.com/tbs/BrowserActivity.zip

通过代码跟踪&调试，我们发现了 WebViewCallBackClient 的接口

当 X5 里面的 webview 进行滑动的时候，会调用相应的方法。那么，我们这时候就可以依样画葫芦，将上面 NestedWebView 的代码逻辑搬下来。

重写 onTouchEvent, onInterceptTouchEvent, computeScroll 这几个关键方法。

这样就实现了嵌套滑动。

具体的代码可以见 nestedwebview

总结

  1. 借助 NestedScrool 机制，要实现嵌套滑动其实还是蛮简单的，基本按照模板代码魔改一下就好了，要学会举一反三。
  2. 如果要实现一些自定义的效果，那么我们可以通过 Behavior 来实现，具体的可以参照 自定义 behavior - 完美仿 QQ 浏览器首页，美团商家详情页

参考博客

NestedWebView working properly with ScrollingViewBehavior

X5 WebView 官网

源码地址

nestedwebview, 可以帮忙给个 star 哦。

如果觉得对你有所帮助的话，可以关注我我的微信公众号徐公，这里有 Android 进阶成长知识体系, 希望我们能够一起学习进步，关注公众号徐公，一起建立核心竞争力

这篇关于【原理篇】WebView 实现嵌套滑动，丝滑般实现吸顶效果，完美兼容 X5 webview的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/255768。

相关文章

C++对象布局及多态实现探索之内存布局（整理的很多链接）

C++对象布局及多态实现探索之内存布局（整理的很多链接）

本文通过观察对象的内存布局，跟踪函数调用的汇编代码。分析了C++对象内存的布局情况，虚函数的执行方式，以及虚继承，等等 文章链接：http://dev.yesky.com/254/2191254.shtml      论C/C++函数间动态内存的传递 (2005-07-30)   当你涉及到C/C++的核心编程的时候，你会无止境地与内存管理打交道。 文章链接：http://dev.yesky
阅读更多...
通过SSH隧道实现通过远程服务器上外网

通过SSH隧道实现通过远程服务器上外网

搭建隧道 autossh -M 0 -f -D 1080 -C -N user1@remotehost##验证隧道是否生效，查看1080端口是否启动netstat -tuln | grep 1080## 测试ssh 隧道是否生效curl -x socks5h://127.0.0.1:1080 -I http://www.github.com 将autossh 设置为服务，隧道开机启动
阅读更多...
时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测

时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测

时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测 目录 时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测基本介绍程序设计参考资料 基本介绍 MATLAB实现LSTM时间序列未来多步预测-递归预测。LSTM是一种含有LSTM区块（blocks）或其他的一种类神经网络，文献或其他资料中LSTM区块可能被描述成智能网络单元，因为
阅读更多...
vue项目集成CanvasEditor实现Word在线编辑器

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor 前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
阅读更多...
android一键分享功能部分实现

android一键分享功能部分实现

为什么叫做部分实现呢，其实是我只实现一部分的分享。如新浪微博，那还有没去实现的是微信分享。还有一部分奇怪的问题：我QQ分享跟QQ空间的分享功能，我都没配置key那些都是原本集成就有的key也可以实现分享，谁清楚的麻烦详解下。 实现分享功能我们可以去www.mob.com这个网站集成。免费的，而且还有短信验证功能。等这分享研究完后就研究下短信验证功能。 开始实现步骤（新浪分享，以下是本人自己实现
阅读更多...
基于Springboot + vue 的抗疫物质管理系统的设计与实现

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页：
阅读更多...
移动硬盘盒：便携与交互的完美结合 PD 充电IC

移动硬盘盒：便携与交互的完美结合 PD 充电IC

在数字化时代的浪潮中，数据已成为我们生活中不可或缺的一部分。随着数据的不断增长，人们对于数据存储的需求也在不断增加。传统的存储设备如U盘、光盘等，虽然具有一定的便携性，但在容量和稳定性方面往往难以满足现代人的需求。而移动硬盘，以其大容量、高稳定性和可移动性，成为了数据存储的优选方案。然而，单纯的移动硬盘在携带和使用上仍存在诸多不便，于是，移动硬盘盒应运而生，以其独特的便携性和交互性，成为了数据存储
阅读更多...
探索蓝牙协议的奥秘：用ESP32实现高质量蓝牙音频传输

探索蓝牙协议的奥秘：用ESP32实现高质量蓝牙音频传输

蓝牙（Bluetooth）是一种短距离无线通信技术，广泛应用于各种电子设备之间的数据传输。自1994年由爱立信公司首次提出以来，蓝牙技术已经经历了多个版本的更新和改进。本文将详细介绍蓝牙协议，并通过一个具体的项目——使用ESP32实现蓝牙音频传输，来展示蓝牙协议的实际应用及其优点。 蓝牙协议概述 蓝牙协议栈 蓝牙协议栈是蓝牙技术的核心，定义了蓝牙设备之间如何进行通信。蓝牙协议
阅读更多...
以canvas方式绘制粒子背景效果，感觉还可以

以canvas方式绘制粒子背景效果，感觉还可以

这个是看到项目中别人写好的，感觉这种写法效果还可以，就存留记录下 就是这种的背景效果。如果想改背景颜色可以通过canvas.js文件中的fillStyle值改。 附上demo下载地址。 https://download.csdn.net/download/u012138137/11249872
阅读更多...
echarts省份标注加散点效果

echarts省份标注加散点效果

这个是安徽的效果图，鼠标移到红色标注或者对应的市区位置都会显示对应的数值。 先直接上代码： import anhuiMapJson from './anhui.json'getCoords: function(city) {var res = [];if (city != null) {for (var c in this.cityMap.features) {if (this.cityMa
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2