携手创作，共同生长！这是我参加「日新方案 8 月更文挑战」的第2天，点击检查活动详情

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

背景

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

最近项目在开发中，需求完成 WebView 吸顶的作用。刚开始在 Demo 完成的时分，运用的是普通的 WebView。切换到项目的时分，由于运用的是 X5 WebView，在处理过程中。又遇到了一些问题，觉得挺有代表性的，就记录了下来。

如果你也有相似的问题，能够参考这种思路处理。

完成原理简述

解说之前，我们先来看一下作用图

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

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

所以，我们能够自己完成 NestedScrollChild 接口，去完成嵌套滑动。详细的完成原理，能够参照我的这一篇博客。

【原理篇】WebView 完成嵌套滑动，丝滑般完成吸顶作用，完美兼容 X5 webview

系统 webview 完成吸顶作用

第一步：引进我的开源库

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

第二步：凭借 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.21")

第二步：凭借 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 哦。