【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

时间: 11-30

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

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

先看效果图: 看到顶部蓝色的进度条了. 原理:用到了 android.webkit.WebChromeClient中的onProgressChanged,而android.webkit.WebViewClient是没有这个方法的.所以普通的WebView是无法实现进度条的. 下面直接上干货: /** * ProgressWebView * * @author lif * * */ @SuppressWarnings("deprecation") public class Progres

webView 加载进度条,webView返回键重写机制

1.图片延时加载 brower = (WebView) this.findViewById(R.id.brower); settings = brower.getSettings(); settings.setJavaScriptEnabled(true); //阻塞图片下载 settings.setBlockNetworkImage(true); private class Client extends WebViewClient     {         @Override        

见过吗?14个超有创意的加载进度条设计

所有进度条的功能在于注重细节,即使是最微小的细节可以改变整个用户体验.好的设计能够广泛传播,让人们分享并推荐你的设计.在下面的列表中,你会发现一批设计精美的加载进度条例子,可以免费下载. 您可能感兴趣的相关文章 22套 Web & Mobile PSD 用户界面素材 45套精美的手机界面设计素材和设计工具 分享30套精美的Web和手机开发UI素材 60个精美的免费移动开发PSD素材资源 45套新鲜出炉的精美 PSD 网页设计素材 Loading Bar by Andra Popovici Amo

仿微信中加载网页时带线行进度条的WebView的实现

finddreams:http://blog.csdn.net/finddreams/article/details/44172639 为了仿微信中加载网页时带进度条的WebView的实现,首先我们来看一下微信中的效果是什么样的: 明确需求之后,我们来开始动手做,首先我们来自定义一个带进度条的WebView,名字为ProgressWebView: /** * @Description:带进度条的WebView * @author http://blog.csdn.net/finddreams *

Android开发--------------WebView(二)之WebView的滑动底部顶部监听,加载进度条等设置

整理一下WebView的一些常用设置,滑动监听,让跳转的页面也在WebView里显示,加载进度,获得标题等等 一,滑动监听 滑动监听的话是需要在WebView基础之上在加强一下,因为在WebView没有直接监听滑动的方法,看WebView的源码则会发现有一个 protected void onScrollChanged(int l, int t, int oldl, int oldt) : 这个方法.是受到保护的所以我们无法直接使用,所以我们写一个加强的WebView,利用接口回调. Scrol

给WebView添加漂亮的加载进度条

为了增强用户体验,所有在WebView头部给加了个进度条,看起来不错哦. 布局XMl:activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent&q

自定义View基础之——图片加载进度条

学会了Paint,Canvas的基本用法之后,我们就可以动手开始实践了,先写个简单的图片加载进度条看看. 按照惯例,先看效果图,再决定要不要往下看: 既然看到这里了,应该是想了解这个图片加载进度条了,我们先看具体用法,再看自定义View的实现: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.co

Android ProgressDialog 加载进度

1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" > 5 6

缓冲进度条或加载进度条

缓冲进度条或加载进度条,在加载页面或者视频加载过程中,为了做到更好的UI及App功能体验交互,这些缓冲加载的等待效果是必不可少的: 下面来看一下旋转的动画效果:那么,他们的具体源码在这里:loading_1: <?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" andro