我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

前面刚更完文就发现，webview页面用的链接还是我掘金的个人页面，但RabbitAPP怎么能添加和兔子不相干的东西呢，所以我使用小工具将自己很喜欢的一个定格动画视频转成GIF图，然后上传到某图库中转换为链接，最后放入WebView页面充当url，最后再把那个很丑的进度条样式给改回水平进度条了。

正篇

操作步骤

首先找到视频，然后下载下来，接着我们就可以开始网上寻找在线视频转GIF工具了，我这里推荐：Convertio — 文件转换器，这个工具功能挺强大，主要是能把转换的文件保存24小时，然后我们将转好的文件就放入图库中，将得到的url链接地址复制下来，放入我们的安卓项目中：

private fun loadWeb(){
    binding.vWebView.loadUrl("https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d013b4366d5c46af9c90655d2c92c83c~tplv-k3u1fbpfcp-watermark.image?")
}

采用最简单的loadUrl方法，去请求网页，然后在这代码之前，我们需要对进度条进行控制：

binding.vWebView.webChromeClient = object : WebChromeClient() {
    override fun onProgressChanged(view: WebView?, newProgress: Int) {
        Log.i("onPageStarted", "页面加载")
        binding.progressBar.progress = newProgress
        if (newProgress == 100) {
            binding.progressBar.visibility = View.GONE
        }
    }

当加载到100%时隐藏ProgressBar控件

布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".WebViewTest">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        />


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <WebView
            android:id="@+id/vWebView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </FrameLayout>

</LinearLayout>

布局比较简单，就不加以赘述。

效果展示

本篇最重要的当然是效果展示：

总结

GIF真的蛮强大，感觉和看视频差不多，就是没有音轨，不过加上音频就很像啊，但GIF也很明显有着其缺憾，就是明显画质很低，可这也挡不住兔兔真可爱啊！

一起看兔兔——安卓添加WebView与进度条加载

前言

正篇

操作步骤

效果展示

总结