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

Posted 2022-09-22 gdutxiaoxu

背景

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

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

实现原理简述

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9QWwhJsO-1663672637860)(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)]

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

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

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

系统 webview 实现吸顶效果

第一步：引入我的开源库

 implementation("io.github.gdutxiaoxu:nestedwebview:0.22")

第二步：借助 CoordinatorLayout behavior 实现吸顶效果

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="MissingDefaultResource">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?attr/colorPrimary"
            android:scaleType="fitXY"
            android:src="@drawable/tangyan"
            app:layout_scrollFlags="scroll" />

    </com.google.android.material.appbar.AppBarLayout>


    <io.github.gdutxiaoxu.nestedwebview.NestedWebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

X5 webview 实现吸顶效果

第一种方式

第一种方式，使用我封装好的 NestedX5WebView，在布局文件中指定 behavior

第一步：引入我的开源库

implementation("io.github.gdutxiaoxu:nestedx5webview:0.22")

第二步：借助 CoordinatorLayout behavior 实现吸顶效果

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="MissingDefaultResource">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        app:layout_behavior=".behavior.DisableAbleAppBarLayoutBehavior">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?attr/colorPrimary"
            android:scaleType="fitXY"
            android:src="@drawable/tangyan"
            app:layout_scrollFlags="scroll" />

    </com.google.android.material.appbar.AppBarLayout>


    <io.github.gdutxiaoxu.nestedwebview.x5.NestedX5WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

第二种方式

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

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="MissingDefaultResource">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?attr/colorPrimary"
            android:scaleType="fitXY"
            android:src="@drawable/tangyan"
            app:layout_scrollFlags="scroll" />

    </com.google.android.material.appbar.AppBarLayout>


    <com.tencent.smtt.sdk.WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

代理 X5 webview 相关的触摸事件

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

更多吸顶效果

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

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

NestedScrolling 机制深入解析

一步步带你读懂 CoordinatorLayout 源码

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

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

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

源码地址

nestedwebview, 可以帮忙给个 star 哦。

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