【android】带加载进度条的WebView (附demo下载)

/**
 *
 * 此WebViewWithProgress继承自Relativielayout,
 * 如果要设置webview的属性，要先调用getWebView()来取得
 * webview的实例
 *
 * @author Administrator
 *
 */
public class WebViewWithProgress extends RelativeLayout{

	private Context context;
	private WebView mWebView = null;
	//水平进度条
	private ProgressBar progressBar = null;
	//包含圆形进度条的布局
	private RelativeLayout progressBar_circle = null;
	//进度条样式,Circle表示为圆形，Horizontal表示为水平
	private int mProgressStyle = ProgressStyle.Horizontal.ordinal();
	//默认水平进度条高度
	public static int DEFAULT_BAR_HEIGHT = 8;
	//水平进度条的高
	private int mBarHeight = DEFAULT_BAR_HEIGHT; 

	public enum ProgressStyle{
		Horizontal,
		Circle;
	};

	public WebViewWithProgress(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		this.context = context;
		init();
	}

	public WebViewWithProgress(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		this.context = context;
        TypedArray attributes = context.obtainStyledAttributes(attrs,R.styleable.WebViewWithProgress);
        mProgressStyle = attributes.getInt(R.styleable.WebViewWithProgress_progressStyle,ProgressStyle.Horizontal.ordinal());
        mBarHeight = attributes.getDimensionPixelSize(R.styleable.WebViewWithProgress_barHeight, DEFAULT_BAR_HEIGHT);
        attributes.recycle();
		init();
	}

	private void init(){
		mWebView = new WebView(context);
		this.addView(mWebView, LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
		if(mProgressStyle == ProgressStyle.Horizontal.ordinal()){
			progressBar = (ProgressBar) LayoutInflater.from(context).inflate(R.layout.progress_horizontal, null);
			progressBar.setMax(100);
			progressBar.setProgress(0);
			WebViewWithProgress.this.addView(progressBar, LayoutParams.FILL_PARENT, mBarHeight);
		}else{
			progressBar_circle = (RelativeLayout) LayoutInflater.from(context).inflate(R.layout.progress_circle, null);
			WebViewWithProgress.this.addView(progressBar_circle, LayoutParams.FILL_PARENT,  LayoutParams.FILL_PARENT);
		}
		mWebView.setWebViewClient(new WebViewClient(){

			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				// TODO Auto-generated method stub
				view.loadUrl(url);
				return true;
			}
		});
		mWebView.setWebChromeClient(new WebChromeClient(){

			@Override
			public void onProgressChanged(WebView view, int newProgress) {
				// TODO Auto-generated method stub
				super.onProgressChanged(view, newProgress);
				if(newProgress == 100){
					if(progressBar!=null){
						progressBar.setVisibility(View.GONE);
					}
					if(progressBar_circle!=null){
						progressBar_circle.setVisibility(View.GONE);
					}
				}else{
					if(mProgressStyle == ProgressStyle.Horizontal.ordinal()){
						progressBar.setVisibility(View.VISIBLE);
						progressBar.setProgress(newProgress);
					}else{
						progressBar_circle.setVisibility(View.VISIBLE);
					}
				}
			}

		});
	}

	public WebView getWebView()
	{
		return mWebView;
	}

}

在xml中使用：

    <com.example.WebViewWithProgress
        android:id="@+id/detail_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/page_bg"
        WebViewWithProgress:progressStyle="horizontal"
        />

在代码中设置webview属性：

		mWebViewWithProgress = (WebViewWithProgress) findViewById(R.id.detail_webview);
		mWebView = mWebViewWithProgress.getWebView();
		mWebView.getSettings().setJavaScriptEnabled(false);
		mWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
		mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

效果：

demo下载：带加载进度条的WebView