安卓学习笔记--- 给WebView添加漂亮的加载进度条

转载博客网址：

http://blog.csdn.net/oydaybreak/article/details/42348433

有时候我们会经常使用WebView去加载H5页面，如果没有一个进度条的话看起来又会显得特别突兀，但是如果又影响用户体验的话，又不会很好，所有就需要可以在WebView头部给加了个进度条，看起来不错哦。

布局XMl：activity_main.xml

<span class="pun" style="color: rgb(0, 170, 0);"><?</span><span class="pln" style="color: rgb(0, 0, 255);">xml version</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="str" style="color: rgb(194, 143, 91);">"1.0"</span><span class="pln" style="color: rgb(0, 0, 255);"> encoding</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="str" style="color: rgb(194, 143, 91);">"utf-8"</span><span class="pun" style="color: rgb(0, 170, 0);">?></span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="tag" style="color: rgb(249, 38, 89);"><RelativeLayout</span><span class="pln" style="color: rgb(0, 0, 255);">   </span><span class="atn" style="color: rgb(0, 170, 0);">xmlns:android</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"http://schemas.android.com/apk/res/android"</span><span class="pln" style="color: rgb(0, 0, 255);">        </span><span class="atn" style="color: rgb(0, 170, 0);">android:layout_width</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"match_parent"</span><span class="pln" style="color: rgb(0, 0, 255);">        </span><span class="atn" style="color: rgb(0, 170, 0);">android:layout_height</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"match_parent"</span><span class="tag" style="color: rgb(249, 38, 89);">></span><span class="pln" style="color: rgb(0, 0, 255);">        </span><span class="tag" style="color: rgb(249, 38, 89);"><WebView</span><span class="pln" style="color: rgb(0, 0, 255);">            </span><span class="atn" style="color: rgb(0, 170, 0);">android:id</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"@+id/webView"</span><span class="pln" style="color: rgb(0, 0, 255);">            </span><span class="atn" style="color: rgb(0, 170, 0);">android:layout_width</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"fill_parent"</span><span class="pln" style="color: rgb(0, 0, 255);">            </span><span class="atn" style="color: rgb(0, 170, 0);">android:layout_height</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"fill_parent"</span><span class="tag" style="color: rgb(249, 38, 89);">/></span><span class="pln" style="color: rgb(0, 0, 255);">                </span><span class="tag" style="color: rgb(249, 38, 89);"><ProgressBar</span><span class="pln" style="color: rgb(0, 0, 255);">          </span><span class="atn" style="color: rgb(0, 170, 0);">android:id</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"@+id/pb"</span><span class="pln" style="color: rgb(0, 0, 255);">          </span><span class="atn" style="color: rgb(0, 170, 0);">style</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"</span><span class="pun" style="color: rgb(0, 170, 0);">?</span><span class="pln" style="color: rgb(0, 0, 255);">android</span><span class="pun" style="color: rgb(0, 170, 0);">:</span><span class="pln" style="color: rgb(0, 0, 255);">attr</span><span class="pun" style="color: rgb(0, 170, 0);">/</span><span class="pln" style="color: rgb(0, 0, 255);">progressBarStyleHorizontal</span><span class="atv" style="color: rgb(194, 143, 91);">"</span><span class="pln" style="color: rgb(0, 0, 255);">          </span><span class="atn" style="color: rgb(0, 170, 0);">android:layout_width</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"fill_parent"</span><span class="pln" style="color: rgb(0, 0, 255);">          </span><span class="atn" style="color: rgb(0, 170, 0);">android:layout_height</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"3dip"</span><span class="pln" style="color: rgb(0, 0, 255);">          </span><span class="atn" style="color: rgb(0, 170, 0);">android:indeterminateOnly</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"false"</span><span class="pln" style="color: rgb(0, 0, 255);">          </span><span class="atn" style="color: rgb(0, 170, 0);">android:max</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"100"</span><span class="pln" style="color: rgb(0, 0, 255);">          </span><span class="atn" style="color: rgb(0, 170, 0);">android:progressDrawable</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"@drawable/progress_bar_states"</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="tag" style="color: rgb(249, 38, 89);">></span><span class="pln" style="color: rgb(0, 0, 255);">      </span><span class="tag" style="color: rgb(249, 38, 89);"></ProgressBar></span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="tag" style="color: rgb(249, 38, 89);"></RelativeLayout></span>

自定义进度条：

<span class="tag" style="color: rgb(249, 38, 89);"><layer-list</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="atn" style="color: rgb(0, 170, 0);">xmlns:android</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"http://schemas.android.com/apk/res/android"</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="tag" style="color: rgb(249, 38, 89);">></span><span class="pln" style="color: rgb(0, 0, 255);">    </span><span class="tag" style="color: rgb(249, 38, 89);"><item</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="atn" style="color: rgb(0, 170, 0);">android:id</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"@android:id/background"</span><span class="tag" style="color: rgb(249, 38, 89);">></span><span class="pln" style="color: rgb(0, 0, 255);">        </span><span class="tag" style="color: rgb(249, 38, 89);"><shape></span><span class="pln" style="color: rgb(0, 0, 255);">            </span><span class="tag" style="color: rgb(249, 38, 89);"><corners</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="atn" style="color: rgb(0, 170, 0);">android:radius</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"2dp"</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="tag" style="color: rgb(249, 38, 89);">/></span><span class="pln" style="color: rgb(0, 0, 255);">            </span><span class="tag" style="color: rgb(249, 38, 89);"><gradient</span><span class="pln" style="color: rgb(0, 0, 255);">                </span><span class="atn" style="color: rgb(0, 170, 0);">android:angle</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"270"</span><span class="pln" style="color: rgb(0, 0, 255);">                </span><span class="atn" style="color: rgb(0, 170, 0);">android:centerColor</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"#E3E3E3"</span><span class="pln" style="color: rgb(0, 0, 255);">                </span><span class="atn" style="color: rgb(0, 170, 0);">android:endColor</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"#E6E6E6"</span><span class="pln" style="color: rgb(0, 0, 255);">                </span><span class="atn" style="color: rgb(0, 170, 0);">android:startColor</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"#C8C8C8"</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="tag" style="color: rgb(249, 38, 89);">/></span><span class="pln" style="color: rgb(0, 0, 255);">        </span><span class="tag" style="color: rgb(249, 38, 89);"></shape></span><span class="pln" style="color: rgb(0, 0, 255);">    </span><span class="tag" style="color: rgb(249, 38, 89);"></item></span><span class="pln" style="color: rgb(0, 0, 255);">    </span><span class="tag" style="color: rgb(249, 38, 89);"><item</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="atn" style="color: rgb(0, 170, 0);">android:id</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"@android:id/progress"</span><span class="tag" style="color: rgb(249, 38, 89);">></span><span class="pln" style="color: rgb(0, 0, 255);">        </span><span class="tag" style="color: rgb(249, 38, 89);"><clip></span><span class="pln" style="color: rgb(0, 0, 255);">            </span><span class="tag" style="color: rgb(249, 38, 89);"><shape></span><span class="pln" style="color: rgb(0, 0, 255);">                </span><span class="tag" style="color: rgb(249, 38, 89);"><corners</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="atn" style="color: rgb(0, 170, 0);">android:radius</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"2dp"</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="tag" style="color: rgb(249, 38, 89);">/></span><span class="pln" style="color: rgb(0, 0, 255);">                </span><span class="tag" style="color: rgb(249, 38, 89);"><gradient</span><span class="pln" style="color: rgb(0, 0, 255);">                    </span><span class="atn" style="color: rgb(0, 170, 0);">android:centerColor</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"#4AEA2F"</span><span class="pln" style="color: rgb(0, 0, 255);">                    </span><span class="atn" style="color: rgb(0, 170, 0);">android:endColor</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"#31CE15"</span><span class="pln" style="color: rgb(0, 0, 255);">                    </span><span class="atn" style="color: rgb(0, 170, 0);">android:startColor</span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="atv" style="color: rgb(194, 143, 91);">"#5FEC46"</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="tag" style="color: rgb(249, 38, 89);">/></span><span class="pln" style="color: rgb(0, 0, 255);">                            </span><span class="tag" style="color: rgb(249, 38, 89);"></shape></span><span class="pln" style="color: rgb(0, 0, 255);">        </span><span class="tag" style="color: rgb(249, 38, 89);"></clip></span><span class="pln" style="color: rgb(0, 0, 255);">    </span><span class="tag" style="color: rgb(249, 38, 89);"></item></span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="tag" style="color: rgb(249, 38, 89);"></layer-list></span>

然后就是Activity的主要代码啦：

<span class="pln" style="color: rgb(0, 0, 255);"></span><span class="typ" style="color: rgb(0, 170, 0);">ProgressBar</span><span class="pln" style="color: rgb(0, 0, 255);"> pb</span><span class="pun" style="color: rgb(0, 170, 0);">;</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="lit" style="color: rgb(204, 0, 204);">@Override</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="kwd" style="color: rgb(249, 38, 89);">protected</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="kwd" style="color: rgb(249, 38, 89);">void</span><span class="pln" style="color: rgb(0, 0, 255);"> onCreate</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="typ" style="color: rgb(0, 170, 0);">Bundle</span><span class="pln" style="color: rgb(0, 0, 255);"> savedInstanceState</span><span class="pun" style="color: rgb(0, 170, 0);">)</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="pun" style="color: rgb(0, 170, 0);">{</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="kwd" style="color: rgb(249, 38, 89);">super</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">onCreate</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="pln" style="color: rgb(0, 0, 255);">savedInstanceState</span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);">setContentView</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="pln" style="color: rgb(0, 0, 255);">R</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">layout</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">xxx</span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);">pb </span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="typ" style="color: rgb(0, 170, 0);">ProgressBar</span><span class="pun" style="color: rgb(0, 170, 0);">)</span><span class="pln" style="color: rgb(0, 0, 255);"> findViewById</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="pln" style="color: rgb(0, 0, 255);">R</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">id</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">pb</span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);">pb</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">setMax</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="lit" style="color: rgb(204, 0, 204);">100</span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="typ" style="color: rgb(0, 170, 0);">WebView</span><span class="pln" style="color: rgb(0, 0, 255);"> webView </span><span class="pun" style="color: rgb(0, 170, 0);">=</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="typ" style="color: rgb(0, 170, 0);">WebView</span><span class="pun" style="color: rgb(0, 170, 0);">)</span><span class="pln" style="color: rgb(0, 0, 255);"> findViewById</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="pln" style="color: rgb(0, 0, 255);">R</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">id</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">webview</span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);">webView</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">getSettings</span><span class="pun" style="color: rgb(0, 170, 0);">().</span><span class="pln" style="color: rgb(0, 0, 255);">setJavaScriptEnabled</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="kwd" style="color: rgb(249, 38, 89);">true</span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);">webView</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">getSettings</span><span class="pun" style="color: rgb(0, 170, 0);">().</span><span class="pln" style="color: rgb(0, 0, 255);">setSupportZoom</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="kwd" style="color: rgb(249, 38, 89);">true</span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);">  webView</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">getSettings</span><span class="pun" style="color: rgb(0, 170, 0);">().</span><span class="pln" style="color: rgb(0, 0, 255);">setBuiltInZoomControls</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="kwd" style="color: rgb(249, 38, 89);">true</span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);">webView</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">setWebChromeClient</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="kwd" style="color: rgb(249, 38, 89);">new</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="typ" style="color: rgb(0, 170, 0);">WebViewClient</span><span class="pun" style="color: rgb(0, 170, 0);">()</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);">webView</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">loadUrl</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="str" style="color: rgb(194, 143, 91);">"http://www.x.com"</span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="pun" style="color: rgb(0, 170, 0);">}</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="kwd" style="color: rgb(249, 38, 89);">private</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="kwd" style="color: rgb(249, 38, 89);">class</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="typ" style="color: rgb(0, 170, 0);">WebViewClient</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="kwd" style="color: rgb(249, 38, 89);">extends</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="typ" style="color: rgb(0, 170, 0);">WebChromeClient</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="pun" style="color: rgb(0, 170, 0);">{</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="lit" style="color: rgb(204, 0, 204);">@Override</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="kwd" style="color: rgb(249, 38, 89);">public</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="kwd" style="color: rgb(249, 38, 89);">void</span><span class="pln" style="color: rgb(0, 0, 255);"> onProgressChanged</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="typ" style="color: rgb(0, 170, 0);">WebView</span><span class="pln" style="color: rgb(0, 0, 255);"> view</span><span class="pun" style="color: rgb(0, 170, 0);">,</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="kwd" style="color: rgb(249, 38, 89);">int</span><span class="pln" style="color: rgb(0, 0, 255);"> newProgress</span><span class="pun" style="color: rgb(0, 170, 0);">)</span><span class="pln" style="color: rgb(0, 0, 255);"> </span><span class="pun" style="color: rgb(0, 170, 0);">{</span><span class="pln" style="color: rgb(0, 0, 255);">pb</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">setProgress</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="pln" style="color: rgb(0, 0, 255);">newProgress</span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="kwd" style="color: rgb(249, 38, 89);">if</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="pln" style="color: rgb(0, 0, 255);">newProgress</span><span class="pun" style="color: rgb(0, 170, 0);">==</span><span class="lit" style="color: rgb(204, 0, 204);">100</span><span class="pun" style="color: rgb(0, 170, 0);">){</span><span class="pln" style="color: rgb(0, 0, 255);">pb</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">setVisibility</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="typ" style="color: rgb(0, 170, 0);">View</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">GONE</span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="pun" style="color: rgb(0, 170, 0);">}</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="kwd" style="color: rgb(249, 38, 89);">super</span><span class="pun" style="color: rgb(0, 170, 0);">.</span><span class="pln" style="color: rgb(0, 0, 255);">onProgressChanged</span><span class="pun" style="color: rgb(0, 170, 0);">(</span><span class="pln" style="color: rgb(0, 0, 255);">view</span><span class="pun" style="color: rgb(0, 170, 0);">,</span><span class="pln" style="color: rgb(0, 0, 255);"> newProgress</span><span class="pun" style="color: rgb(0, 170, 0);">);</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="pun" style="color: rgb(0, 170, 0);">}</span><span class="pln" style="color: rgb(0, 0, 255);"></span><span class="pun" style="color: rgb(0, 170, 0);">}</span>

下面来看效果吧

看博主出的效果还是不错滴，我也是按照他的这种方法添加进去了，哈哈还不错呢，多谢啊