项目中用到WebView加上进度条放在顶部，让用户知道加载进度情况，可以提高用户体验： 效果：

加载显示进度条.jpg

下面我们来实现这个效果：

自定义ProgressWebView 继承WebView

创建WebChromeClient 继承WebChromeClie public class WebChromeClient extends android.webkit.WebChromeClient { @Override public void onProgressChanged(WebView view, int newProgress) { if (newProgress == 100) { mProgressBar.setVisibility(GONE); } else { if (mProgressBar.getVisibility() == GONE) mProgressBar.setVisibility(VISIBLE); mProgressBar.setProgress(newProgress); } super.onProgressChanged(view, newProgress); } } 重新onScrollChanged @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { LayoutParams lp = (LayoutParams) mProgressBar.getLayoutParams(); lp.x = l; lp.y = t; mProgressBar.setLayoutParams(lp); super.onScrollChanged(l, t, oldl, oldt); }

构造方法

public ProgressWebView(Context context, AttributeSet attrs) { super(context, attrs); mProgressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, 8); mProgressBar.setLayoutParams(layoutParams); Drawable drawable = context.getResources().getDrawable( R.drawable.web_progress_bar_states); mProgressBar.setProgressDrawable(drawable); addView(mProgressBar); setWebChromeClient(new WebChromeClient()); }

完整ProgressWebView类代码 ：

public class ProgressWebView extends WebView { private ProgressBar mProgressBar; public ProgressWebView(Context context, AttributeSet attrs) { super(context, attrs); mProgressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, 8); mProgressBar.setLayoutParams(layoutParams); Drawable drawable = context.getResources().getDrawable( R.drawable.web_progress_bar_states); mProgressBar.setProgressDrawable(drawable); addView(mProgressBar); setWebChromeClient(new WebChromeClient()); } public class WebChromeClient extends android.webkit.WebChromeClient { @Override public void onProgressChanged(WebView view, int newProgress) { if (newProgress == 100) { mProgressBar.setVisibility(GONE); } else { if (mProgressBar.getVisibility() == GONE) mProgressBar.setVisibility(VISIBLE); mProgressBar.setProgress(newProgress); } super.onProgressChanged(view, newProgress); } } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { LayoutParams lp = (LayoutParams) mProgressBar.getLayoutParams(); lp.x = l; lp.y = t; mProgressBar.setLayoutParams(lp); super.onScrollChanged(l, t, oldl, oldt); } }

如何使用

xml布局引用

<com.aikaifa.webview.ProgressWebView android:id="@+id/baseweb_webview" android:layout_width="match_parent" android:layout_height="match_parent" />

其中com.aikaifa.webview 为包名，你可以改成你自己的包名

找到ProgressWebView控件

mWebView = (ProgressWebView) findViewById(R.id.baseweb_webview); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { return false; } }); String url ="http://mp.weixin.qq.com/s?__biz=MzAwODQ5MTA2NQ==&mid=402389923&idx=1&sn=3c89c329e7bf83ce8ff2364726ebd6a7#rd"; mWebView.loadUrl(url);

注意一点，不要漏了在AndroidManifest.xml 加上网络权限

<uses-permission android:name="android.permission.INTERNET" />

最终效果：

加载中.jpg

这样WebView顶部进度条就实现完毕了。