背景
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属性中，代码如下：
<ProgressBar
android:id="@+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来绘制进度。