Android自定义webView头部进度加载效果

不多说先来看下效果图：

1. 颜色渐变加载进度条（夜神模拟器）

 

绿色加载进度条（魅蓝note2）

 

看图说话：

上图是不是加载网页的时候会有一个进度条在横向加载，比以前网速不好的时候是一片空白给人的感觉友好多了是不，然后效果还不错。

实现思路

就是自己画一条进度线（大家应该都会吧）然后加载到webview的上面，开始进度条是隐藏的，进度线初始值为1，然后为了效果好一点，初始少于10的进度都让它加载到10的位置，等进度到100的时候0.2秒后隐藏。

请记得添加网络权限：

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

说多了都是泪 ，快吃晚饭了，直接代码说话：

代码讲解

步骤一：我们先来话进度线

#webviewprogressbar.java
package 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 ([e-mail])
 * 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, attrs, defstyleattr);
    initpaint(context);
  }
  private void initpaint(context context) {
    //颜色渐变从colors[0]到colors[2],透明度从0到1
//    lineargradient shader = new lineargradient(
//        0, 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, 0, getwidth() * progress / 100, height, paint);//画矩形从（0.0）开始到（progress,height）的区域
  }
}

上面代码的功能就是画一条线（颜色可渐变也可不变色），暴露设置进度的方法给使用者，然后调用 invalidate()刷新进度。

注意：使用渐变时数组的长度和透明度数组长度必须一致，否则会报错的

步骤二：自定义封装webview

#progresswebview.java
package 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 ([e-mail])
 * 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.java
package 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头部进度加载效果，希望对大家有所帮助