WebView加载过程进度条显示

好久没写了，一看都11月份了，最近一直在忙项目开发，经常遇到webview，很不满意之前的加载过程，经同事指点，会了以下这一招，加载过程顶部显示进度条，以下是实现代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

WebSettings webSettings = wvOther.getSettings(); webSettings.setRenderPriority(RenderPriority.HIGH); if (HttpUtils.isNetworkConnected(this)) { webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);// 根据cache-control决定是否从网络上取数据。 } else { webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);// 只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据 } wvOther.setWebChromeClient(new MyChromeClient()); // 开启 DOM storage API 功能 webSettings.setDomStorageEnabled(true); // 开启 database storage API 功能 webSettings.setDatabaseEnabled(true); String cacheDirPath = getFilesDir().getAbsolutePath() + "/ba/webcache"; // String cacheDirPath = // getCacheDir().getAbsolutePath()+Constant.APP_DB_DIRNAME; // 设置数据库缓存路径 webSettings.setDatabasePath(cacheDirPath); // 设置 Application Caches 缓存目录 webSettings.setAppCachePath(cacheDirPath); // 开启 Application Caches 功能 webSettings.setAppCacheEnabled(true); webSettings.setBuiltInZoomControls(false); // 放大缩放按钮 // 如果访问的页面中有JavaScript，则WebView必须设置支持JavaScript webSettings.setJavaScriptEnabled(true); // 设置可以支持缩放 webSettings.setSupportZoom(true); // 扩大比例的缩放 webSettings.setUseWideViewPort(true); // 自适应屏幕 webSettings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); webSettings.setLoadWithOverviewMode(true); wvOther.loadUrl(slideUrl); wvOther.setWebViewClient(new WebViewClient() { public boolean shouldOverrideUrlLoading(WebView view, String url) { // 重写此方法表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边 view.loadUrl(url); return true; } @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); mCustomView.showLoadStateView(CustomView.STATE_NONE); } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); mCustomView.showLoadStateView(CustomView.STATE_NONE); } @Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { super.onReceivedError(view, errorCode, description, failingUrl); mCustomView.showLoadStateView(CustomView.STATE_EMPTY); } });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// 设置加载进度 public class MyChromeClient extends android.webkit.WebChromeClient { @Override public void onProgressChanged(WebView view, int newProgress) { mProgressBar.setProgress(newProgress); if (newProgress == 100) { mProgressBar.setVisibility(View.GONE); } else { mProgressBar.setVisibility(View.VISIBLE); } super.onProgressChanged(view, newProgress); } @Override public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); // mTv_title.setText(title); } }

布局中需添加：

1 2 3 4 5 6 7 8 9 10

<ProgressBar android:id="@+id/mProgressBar" style="?android:attr/progressBarStyleHorizontal" android:layout_width="fill_parent" android:layout_height="3dp" android:layout_below="@+id/otherTitle" android:background="@null" android:indeterminateOnly="false" android:max="100" android:progressDrawable="@drawable/progress_bar_horizontal" />

progress_bar_horizontal.xml：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@android:id/background" android:drawable="@color/transparent"/> <item android:id="@android:id/progress"> <clip> <shape> <gradient android:angle="270" android:centerColor="@color/progress2" android:centerY="0.75" android:endColor="@color/progress3" android:startColor="@color/progress1" /> </shape> </clip> </item> </layer-list>

color.xml:

1 2 3 4

<!-- 网页加载进度条颜色变化 --> <color name="progress1">#B9DEF5</color> <color name="progress2">#CDE7F8</color> <color name="progress3">#E7F3FC</color>

实现效果如下：

不难，就是配置多了点，因为觉得经常会用到，所以做了下记录~~~