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

前言

本来准备过年时候慢慢写，但过完年才发现一篇都没写，真是难为情，今天我们就看看RabbitAPP中进入webview中使用的兔兔进度条，参考了51博客网的自定义progress的方法（自定义view之自定义电池效果_xiyangyang8110的技术博客_51CTO博客），其实还是挺简陋的，本来想画一个兔子跑的指示器的progress的，但是想了半天没动手，还是采用这种最简单的方法。

正篇

最终效果

首先我们来看看效果：

由于网络非常好，所以加载速度也很快，我们可以看到兔子背景逐渐被红色覆盖。

实现方法

实现方法其实很简单，先给一张图片，然后调用ProgressBar控件覆盖它，并且重新写ProgressBar的样式：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="StyleRabbitProgressBar" parent="Widget.AppCompat.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/shape_progressbar</item>
    </style>
</resources>

我们这里使用了ProgressBar的水平进度条样式，然后对其sprogressDrawable重新添加shape:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--progressbar的背景颜色-->
    <!--    <item android:id="@android:id/background">-->
    <!--        <shape>-->
    <!--            <corners android:radius="5dip" />-->
    <!--            <gradient-->
    <!--                android:startColor="@color/black"-->
    <!--                android:centerColor="@color/blue"-->
    <!--                android:endColor="@color/black"-->
    <!--                android:angle="270"-->
    <!--                />-->
    <!--        </shape>-->
    <!--    </item>-->
    <!--progressBar的缓冲进度颜色-->
    <!--    <item android:id="@android:id/secondaryProgress">-->
    <!--        <clip>-->
    <!--            <shape>-->
    <!--                <corners android:radius="5dip" />-->
    <!--                <gradient-->
    <!--                    android:startColor="@color/white"-->
    <!--                    android:centerColor="@color/white"-->
    <!--                    android:endColor="@color/white"-->
    <!--                    android:angle="270"-->
    <!--                    />-->
    <!--            </shape>-->
    <!--        </clip>-->
    <!--    </item>-->
    <!--progressBar的最终进度颜色-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:startColor="#33E91E63"
                    android:centerColor="#33E91E63"
                    android:endColor="#33E91E63"
                    android:angle="270"
                    />
            </shape>
        </clip>
    </item>
</layer-list>

根据需要对进度颜色进行控制，我们最终采用棕红色，对进度条颜色变更，最后我们加入到webview页面的布局中：

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/rabbit_progress" />
    <ProgressBar
        android:id="@+id/progressRabbit"
        android:layout_marginTop="5dp"
        android:layout_marginStart="4dp"
        style="@style/StyleRabbitProgressBar"
        android:layout_width="130dp"
        android:layout_height="120dp"
        android:max="100" />
</RelativeLayout>

最后，再到webview页面的Activity代码中控制显示：

 binding.vWebView.webChromeClient = object : WebChromeClient() {
            override fun onProgressChanged(view: WebView?, newProgress: Int) {
                Log.i("onPageStarted", "页面加载")

                binding.progressRabbit.progress = newProgress
            }

我们通过WebView的webChromeClient方法对onProgressChanged复写，对其中的newProgress参数赋值给我们进度条控件的progress参数，这样就起到了对网页加载的可视化。

于是我们就可以在web加载的时候看到上面有个兔子，兔子的背景全红后就加载好网页了。

总结

这个进度条现在越看越难受，下一次会把进度条重新制作一遍，还是把它作为指示器去绘制一个进度条比较好，不过之前我写自定义view都是用Java，Kotlin中还是不会写，希望能尽快学会用Kotlin自定义view，感谢您的观看。