Android花样loading进度条（一）-水平的网页加载进度条

背景

Android花样loading进度条系列文章主要讲解如何自定义所需的进度条，包括水平、圆形、环形、圆弧形、不规则形状等。
本篇我们从水平进度条讲起，主要是ProgressBar的水平样式应用。

进度条控件

Android提供的ProgressBar控件有水平、圆形两种形态，套用不同的主题可以实现不同的大小，基本上美观一点的设计在实现的时候都需要自定义ProgressBar样式。
这里讲水平ProgressBar的样式更换方法。

进度条样式自定义

progressDrawable属性可为ProgressBar更换指定绘图方式。适合网页加载提示的进度条样式效果为：

（图中红色条为进度指示条，红色背后的白色为背景色）
为此，我们写了pro_webview.xml作为progressDrawable引用的文件，内容如下：

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">        <item android:id="@android:id/background">        <shape>            <solid android:color="@color/white" />        shape>    item>        <item android:id="@android:id/secondaryProgress">        <clip>            <shape>                <solid android:color="@color/white" />            shape>        clip>    item>        <item android:id="@android:id/progress">        <clip>            <shape>                <solid android:color="@color/red_web" />            shape>        clip>    item>layer-list>

作几点说明：

@android:id/background：其对应的item表示进度条的背景色。
@android:id/secondaryProgress：其对应的item为第二进度条，一般表示缓冲进度条，比如音视频在播放的时候会缓冲数据，缓冲表示数据加载效果，而播放过程则使用第一进度条来显示了。第二进度条在网页加载中用不到，所以就设成白色了，和背景色一样。
@android:id/progress：其对应的item为进度指示条，可以理解为第一进度条，网页加载的进度在这里使用红色表示。
因为进度条是随着加载情况可以动态变化的，所progress、secondaryProgress的样式设置不能使用单纯的color或shape，需要用到clip标签，因为ClipDrawable可以很好地裁剪显示（这块是Android控件实现上的事情了，开发者不用管）。

配置进度条属性

将pro_webview.xml中设置的进度样式应用到ProgressBar属性中，代码如下：

"@+id/pro_webview"        style="?android:attr/progressBarStyleHorizontal"        android:layout_width="match_parent"        android:layout_height="4dip"        android:max="100"        android:progress="0"        android:progressDrawable="@drawable/pro_webview"        android:secondaryProgress="0" />

就可以在代码中使用设置好的ProgressBar来显示加载效果了。

与WebView结合

WebView在加载网页时候有接口可以计算出进度，通过不断更新ProgressBar的进度值，达到进度条随网页内容加载而动态变化的效果。动画如下：

更新ProgressBar的进度值的代码：

...webView.setWebChromeClient(webChromeClient);... // 获取加载进度 private WebChromeClient webChromeClient = new WebChromeClient() {     @Override     public void onProgressChanged(WebView view, int newProgress) {         if (newProgress == 100) {             proWebView.setVisibility(View.GONE);         } else {             if (proWebView.getVisibility() == View.GONE) {                 proWebView.setVisibility(View.VISIBLE);             }             proWebView.setProgress(newProgress);         }         super.onProgressChanged(view, newProgress);     } };

通过监听网页加载newProgress来判断是否显示进度条，当达到100时隐藏进度条，未达到100时，更新进度条的指示值就可以了。

总结

本篇从比较简单的水平网页加载进度条入手，讲解水平进度条的使用和样式修改方法。用到的进度条ProgressBar为Android原生的控件，后续的文章将从自定义控件的角度使用Canvas来绘制进度。

源码下载

https://github.com/ahuyangdong/ColorfulLoading

背景

进度条控件

进度条样式自定义

配置进度条属性

与WebView结合

总结

源码下载

更多相关文章

随机推荐