前言

本来准备过年时候慢慢写，但过完年才发现一篇都没写，真是难为情，今天我们就看看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，感谢您的观看。