不多说先来看下效果图：
1. 颜色渐变加载进度条（夜神模拟器）
绿色加载进度条（魅蓝note2）
看图说话：
上图是不是加载网页的时候会有一个进度条在横向加载，比以前网速不好的时候是一片空白给人的感觉友好多了是不，然后效果还不错。
实现思路
就是自己画一条进度线（大家应该都会吧）然后加载到WebVIEw的上面，开始进度条是隐藏的，进度线初始值为1，然后为了效果好一点，初始少于10的进度都让它加载到10的位置，等进度到100的时候0.2秒后隐藏。
请记得添加网络权限：
<uses-permission androID:name="androID.permission.INTERNET" />
说多了都是泪 ，快吃晚饭了，直接代码说话：
代码讲解
步骤一：我们先来话进度线
#WebVIEwProgressbar.javapackage com.losileeya.materialprogresswebvIEw.Widget;import androID.content.Context;import androID.graphics.Canvas;import androID.graphics.Paint;import androID.util.AttributeSet;import androID.vIEw.VIEw;import com.losileeya.materialprogresswebvIEw.R;/** * User: Losileeya (847457332@qq.com) * Date: 2016-04-24 * Time: 14:43 * 类描述：自定义进度条 * * @version : */public class WebVIEwProgressbar extends VIEw { private int progress = 1;//进度默认为1 private final static int HEIGHT = 5;//进度条高度为5 private Paint paint;//进度条的画笔 // 渐变颜色数组 private final static int colors[] = new int[]{0xFF7AD237,0xFF8AC14A,0x35B056 }; //int类型颜色值格式：0x+透明值+颜色的rgb值 public WebVIEwProgressbar(Context context) { this (context,null); } public WebVIEwProgressbar(Context context,AttributeSet attrs) { this(context,attrs,0); } public WebVIEwProgressbar(Context context,AttributeSet attrs,int defStyleAttr) { super(context,defStyleAttr); initPaint(context); } private voID initPaint(Context context) { //颜色渐变从colors[0]到colors[2],透明度从0到1// linearGradIEnt shader = new linearGradIEnt(// 0,// 100,HEIGHT,// colors,// new float[]{0,0.5f,1.0f},// Shader.TileMode.MIRROR); paint=new Paint(Paint.DITHER_FLAG); paint.setStyle(Paint.Style.stroke);// 填充方式为描边 paint.setstrokeWIDth(HEIGHT);//设置画笔的宽度 paint.setAntiAlias(true);// 抗锯齿 paint.setDither(true);// 使用抖动效果paint.setcolor(context.getResources().getcolor(R.color.primary_light));//画笔设置颜色// paint.setShader(shader);//画笔设置渐变 } /** * 设置进度 * @param progress 进度值 */ public voID setProgress(int progress){ this.progress = progress; invalIDate();//刷新画笔 } @OverrIDe protected voID onDraw(Canvas canvas) { canvas.drawRect(0,getWIDth() * progress / 100,paint);//画矩形从（0.0）开始到（progress,height）的区域 }}上面代码的功能就是画一条线（颜色可渐变也可不变色），暴露设置进度的方法给使用者，然后调用 invalIDate()刷新进度。
注意：使用渐变时数组的长度和透明度数组长度必须一致，否则会报错的
步骤二：自定义封装webVIEw
#ProgressWebVIEw.javapackage com.losileeya.materialprogresswebvIEw.Widget;import androID.content.Context;import androID.graphics.Bitmap;import androID.os.Handler;import androID.util.AttributeSet;import androID.vIEw.VIEw;import androID.vIEw.VIEwGroup;import androID.webkit.WebChromeClIEnt;import androID.webkit.WebSettings;import androID.webkit.WebVIEw;import androID.webkit.WebVIEwClIEnt;/** * User: Losileeya (847457332@qq.com) * Date: 2016-04-24 * Time: 14:42 * 类描述：自定义带进度加载条的webVIEw * * @version : */public class ProgressWebVIEw extends WebVIEw { private WebVIEwProgressbar progressbar;//进度条的矩形（进度线） private Handler handler; private WebVIEw mWebVIEw; public ProgressWebVIEw(Context context,AttributeSet attrs) { super(context,attrs); //实例化进度条 progressbar = new WebVIEwProgressbar(context); //设置进度条的size progressbar.setLayoutParams(new VIEwGroup.LayoutParams (VIEwGroup.LayoutParams.MATCH_PARENT,VIEwGroup.LayoutParams.WRAP_CONTENT)); //刚开始时候进度条不可见 progressbar.setVisibility(GONE); //把进度条添加到webVIEw里面 addVIEw(progressbar); //初始化handle handler = new Handler(); mWebVIEw = this; initSettings(); } private voID initSettings() { // 初始化设置 WebSettings mSettings = this.getSettings(); mSettings.setJavaScriptEnabled(true);//开启JavaScript mSettings.setDomStorageEnabled(true);//开启DOM mSettings.setDefaultTextEnCodingname("utf-8");//设置字符编码 //设置web页面 mSettings.setAllowfileAccess(true);//设置支持文件流 mSettings.setSupportZoom(true);// 支持缩放 mSettings.setBuiltInZoomControls(true);// 支持缩放 mSettings.setUseWIDeVIEwPort(true);// 调整到适合webvIEw大小 mSettings.setLoaDWithOverviewmode(true);// 调整到适合webvIEw大小 mSettings.setDefaultZoom(WebSettings.ZoomDensity.FAR);// 屏幕自适应网页,如果没有这个，在低分辨率的手机上显示可能会异常 mSettings.setRenderPriority(WebSettings.RenderPriority.HIGH); //提高网页加载速度，暂时阻塞图片加载，然后网页加载好了，在进行加载图片 mSettings.setBlockNetworkImage(true); mSettings.setAppCacheEnabled(true);//开启缓存机制 setWebVIEwClIEnt(new MyWebClIEnt()); setWebChromeClIEnt(new MyWebChromeClIEnt()); } /** * 自定义WebChromeClIEnt */ private class MyWebChromeClIEnt extends WebChromeClIEnt { /** * 进度改变的回掉 * * @param vIEw WebVIEw * @param newProgress 新进度 */ @OverrIDe public voID onProgressChanged(WebVIEw vIEw,int newProgress) { if (newProgress == 100) { progressbar.setProgress(100); handler.postDelayed(runnable,200);//0.2秒后隐藏进度条 } else if (progressbar.getVisibility() == GONE) { progressbar.setVisibility(VISIBLE); } //设置初始进度10，这样会显得效果真一点，总不能从1开始吧 if (newProgress < 10) { newProgress = 10; } //不断更新进度 progressbar.setProgress(newProgress); super.onProgressChanged(vIEw,newProgress); } } private class MyWebClIEnt extends WebVIEwClIEnt { /** * 加载过程中 拦截加载的地址url * * @param vIEw * @param url 被拦截的url * @return */ @OverrIDe public boolean shouldOverrIDeUrlLoading(WebVIEw vIEw,String url) { mWebVIEw.loadUrl(url); return true; } /** * 页面加载过程中，加载资源回调的方法 * * @param vIEw * @param url */ @OverrIDe public voID onLoadResource(WebVIEw vIEw,String url) { super.onLoadResource(vIEw,url); } /** * 页面加载完成回调的方法 * * @param vIEw * @param url */ @OverrIDe public voID onPageFinished(WebVIEw vIEw,String url) { super.onPageFinished(vIEw,url); // 关闭图片加载阻塞 vIEw.getSettings().setBlockNetworkImage(false); } /** * 页面开始加载调用的方法 * * @param vIEw * @param url * @param favicon */ @OverrIDe public voID onPageStarted(WebVIEw vIEw,String url,Bitmap favicon) { super.onPageStarted(vIEw,url,favicon); } @OverrIDe public voID onReceivedError(WebVIEw vIEw,int errorCode,String description,String failingUrl) { super.onReceivedError(vIEw,errorCode,description,failingUrl); } @OverrIDe public voID onScaleChanged(WebVIEw vIEw,float oldScale,float newScale) { super.onScaleChanged(vIEw,oldScale,newScale); ProgressWebVIEw.this.requestFocus(); ProgressWebVIEw.this.requestFocusFromtouch(); } } /** *刷新界面（此处为加载完成后进度消失） */ private Runnable runnable = new Runnable() { @OverrIDe public voID run() { progressbar.setVisibility(VIEw.GONE); } };}上面的代码就是把进度线加到webVIEw里面，然后自定义WebChromeClIEnt通过重写onProgressChanged（）方法调用 progressbar.setProgress(newProgress)来更新进度，进度到100时再隐藏，是不是思路很清晰，其他的就是一些webVIEw的设置和封装这里都有清楚的注释，自己去看。
使用ProgressWebVIEw加载网页
布局使用：
#activity_main.xml<?xml version="1.0" enCoding="utf-8"?><com.losileeya.materialprogresswebvIEw.Widget.ProgressWebVIEw xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:ID="@+ID/webVIEw" androID:layout_wIDth="match_parent" androID:layout_height="match_parent"></com.losileeya.materialprogresswebvIEw.Widget.ProgressWebVIEw>
布局看起来是不是很清爽，对了，要的就是之效果：
实际使用也很简单：
#MainActivity.javapackage com.losileeya.materialprogresswebvIEw;import androID.os.Bundle;import androID.support.v7.app.AppCompatActivity;import com.losileeya.materialprogresswebvIEw.Widget.ProgressWebVIEw;public class MainActivity extends AppCompatActivity { //ProgressWebVIEw private ProgressWebVIEw mWebVIEw; @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVIEw(R.layout.activity_main); mWebVIEw = (ProgressWebVIEw) findVIEwByID(R.ID.webVIEw);//findVIEwByID webVIEw mWebVIEw.loadUrl("http://blog.csdn.net/u013278099/");//加载网址 mWebVIEw.setFocusable(true);//设置有焦点 mWebVIEw.setFocusableIntouchMode(true);//设置可触摸 }}总结
以上所述是小编给大家介绍的AndroID自定义webVIEw头部进度加载效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！
总结以上是内存溢出为你收集整理的Android自定义webView头部进度加载效果全部内容，希望文章能够帮你解决Android自定义webView头部进度加载效果所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）