【WebView】带加载进度条的WebView及Chrome联调

标签：android   移动   webview   chrome   progressbar   

先看效果图：

看到顶部蓝色的进度条了。

原理：用到了 android.webkit.WebChromeClient中的onProgressChanged，而android.webkit.WebViewClient是没有这个方法的。所以普通的WebView是无法实现进度条的。

下面直接上干货：

/**
 * ProgressWebView
 * 
 * @author lif
 * 
 * 
 */
@SuppressWarnings("deprecation")
public class ProgressWebView extends WebView {

	private ProgressBar progressbar;

	@SuppressLint("NewApi")
	public ProgressWebView(Context context, AttributeSet attrs) {
		super(context, attrs);
		progressbar = new ProgressBar(context, null,
				android.R.attr.progressBarStyleHorizontal);
		progressbar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
				16, 0, 0));
		addView(progressbar);
		setWebViewClient(new WebCustomClient());
		setWebChromeClient(new WebChromeClient());
		// 发布取消
		//<a target=_blank href="http://www.itbookstudy.com/forum.php?mod=viewthread&tid=108500" style="word-wrap: break-word; color: rgb(51, 51, 51); text-decoration: none; font-family: 'Microsoft Yahei', Hei, Tahoma, SimHei, sans-serif; font-size: 20px; font-weight: bold; line-height: 30px; background-color: rgb(241, 242, 246);" se_prerender_url="complete">Web开发调试之Chrome远程调试(Remote Debugging)</a>会用到
		// setWebContentsDebuggingEnabled(true);
		getSettings().setDomStorageEnabled(true);
	}

	public class WebCustomClient extends android.webkit.WebViewClient {
		@Override
		public void onPageFinished(WebView view, String url) {
			// TODO Auto-generated method stub
			super.onPageFinished(view, url);
			// 页面下载完毕,却不代表页面渲染完毕显示出来
			// WebChromeClient中progress==100时也是一样
			if (view.getContentHeight() != 0) {
				// 这个时候网页才显示
			}
		}

		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			// TODO Auto-generated method stub
			// 自身加载新链接,不做外部跳转
			view.loadUrl(url);
			return true;
		}

	}

	public class WebChromeClient extends android.webkit.WebChromeClient {
		@Override
		public void onProgressChanged(WebView view, int newProgress) {
			if (newProgress == 100) {
				progressbar.setVisibility(GONE);
			} else {
				if (progressbar.getVisibility() == GONE)
					progressbar.setVisibility(VISIBLE);
				progressbar.setProgress(newProgress);
			}
			super.onProgressChanged(view, newProgress);
		}

	}

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		LayoutParams lp = (LayoutParams) progressbar.getLayoutParams();
		lp.x = l;
		lp.y = t;
		progressbar.setLayoutParams(lp);
		super.onScrollChanged(l, t, oldl, oldt);
	}
}

调用代码：

	// ~~~ 设置数据
		webview.setVerticalScrollbarOverlay(true);
		webview.getSettings().setJavaScriptEnabled(true);
		webview.getSettings().setAllowFileAccess(true);
		webview.getSettings().setSavePassword(false);
		webview.setDownloadListener(new DownloadListener() {
			@Override
			public void onDownloadStart(String url, String userAgent,
					String contentDisposition, String mimetype,
					long contentLength) {
				if (url != null
						&& (url.startsWith("http://") || url
								.startsWith("file:///")))
					startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
			}
		});

		webview.loadUrl(url);

注意：关于Chrome远程开发调试可以参考移动端Web开发调试之Chrome远程调试(Remote Debugging)

【WebView】带加载进度条的WebView及Chrome联调

标签：android   移动   webview   chrome   progressbar   

原文地址：http://blog.csdn.net/jabony/article/details/42590613