我正在参与「兔了个兔」构思投稿大赛，概况请看：「兔了个兔」构思投稿大赛

前言

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