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

背景

最近项目在开发中，需要实现 WebView 吸顶的效果。刚开始在 Demo 实现的时候，使用的是普通的 WebView。切换到项目的时候，由于使用的是 X5 WebView，在解决过程中。又遇到了一些问题，觉得挺有代表性的，就记录了下来。

如果你也有相似的问题，可以参考这种思路解决。

实现原理简述

讲解之前，我们先来看一下效果图

webview 嵌套滑动.gif

说到嵌套滑动，很多人第一时间都会想到 CoordinatorLayout behavior ，但是 webview 本身并不是 NestedScrollChild 的，无法实现。

于是，我们可以自己实现 NestedScrollChild 接口，去实现嵌套滑动。具体的实现原理，可以参照我的这一篇博客。

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

系统 webview 实现吸顶效果

第一步：引入我的开源库

1 implementation("io.github.gdutxiaoxu:nestedwebview:0.21")
2 ```
3 第二步：借助 CoordinatorLayout  behavior 实现吸顶效果

 1<com.google.android.material.appbar.AppBarLayout
 2    android:id="@+id/appBarLayout"
 3    android:layout_width="match_parent"
 4    android:layout_height="250dp">
 5
 6    <ImageView
 7        android:layout_width="match_parent"
 8        android:layout_height="match_parent"
 9        android:background="?attr/colorPrimary"
10        android:scaleType="fitXY"
11        android:src="@drawable/tangyan"
12        app:layout_scrollFlags="scroll" />
13
14</com.google.android.material.appbar.AppBarLayout>
15
16
17<io.github.gdutxiaoxu.nestedwebview.NestedWebView
18    android:id="@+id/webview"
19    android:layout_width="match_parent"
20    android:layout_height="match_parent"
21    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

1## X5 webview 实现吸顶效果
2
3### 第一种方式
4
5
6
7第一种方式，使用我封装好的 NestedX5WebView，在布局文件中指定 behavior
8
9第一步：引入我的开源库

implementation("io.github.gdutxiaoxu:nestedx5webview:0.21")
```
第二步：借助 CoordinatorLayout behavior 实现吸顶效果

 1<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2    xmlns:app="http://schemas.android.com/apk/res-auto"
 3    xmlns:tools="http://schemas.android.com/tools"
 4    android:id="@+id/main_content"
 5    android:layout_width="match_parent"
 6    android:layout_height="match_parent"
 7    tools:ignore="MissingDefaultResource">
 8
 9    <com.google.android.material.appbar.AppBarLayout
10        android:id="@+id/appBarLayout"
11        android:layout_width="match_parent"
12        android:layout_height="250dp"
13        app:layout_behavior=".behavior.DisableAbleAppBarLayoutBehavior">
14
15        <ImageView
16            android:layout_width="match_parent"
17            android:layout_height="match_parent"
18            android:background="?attr/colorPrimary"
19            android:scaleType="fitXY"
20            android:src="@drawable/tangyan"
21            app:layout_scrollFlags="scroll" />
22
23    </com.google.android.material.appbar.AppBarLayout>
24
25
26    <io.github.gdutxiaoxu.nestedwebview.x5.NestedX5WebView
27        android:id="@+id/webview"
28        android:layout_width="match_parent"
29        android:layout_height="match_parent"
30        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
31
32</androidx.coordinatorlayout.widget.CoordinatorLayout>

第二种方式

使用腾讯的 WebView，在代码当中动态指定 X5ProxyWebViewClientExtension 即可

 1<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2    xmlns:app="http://schemas.android.com/apk/res-auto"
 3    xmlns:tools="http://schemas.android.com/tools"
 4    android:id="@+id/main_content"
 5    android:layout_width="match_parent"
 6    android:layout_height="match_parent"
 7    tools:ignore="MissingDefaultResource">
 8
 9    <com.google.android.material.appbar.AppBarLayout
10        android:id="@+id/appBarLayout"
11        android:layout_width="match_parent"
12        android:layout_height="250dp">
13
14        <ImageView
15            android:layout_width="match_parent"
16            android:layout_height="match_parent"
17            android:background="?attr/colorPrimary"
18            android:scaleType="fitXY"
19            android:src="@drawable/tangyan"
20            app:layout_scrollFlags="scroll" />
21
22    </com.google.android.material.appbar.AppBarLayout>
23
24
25    <com.tencent.smtt.sdk.WebView
26        android:id="@+id/webview"
27        android:layout_width="match_parent"
28        android:layout_height="match_parent"
29        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
30
31</androidx.coordinatorlayout.widget.CoordinatorLayout>

代理 X5 webview 相关的触摸事件

1        val x5CallBackClient = X5CallBackClient(webView.view, webView)
2        webView.setWebViewCallbackClient(x5CallBackClient)
3        webView.webViewClientExtension = X5ProxyWebViewClientExtension(x5CallBackClient)

更多吸顶效果

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

源码地址

https://github.com/gdutxiaoxu/nestedwebview