Android用Webview加载一个网页时,如果加载时间长,界面会一直空白,体验不太好,所以加个进度条更好看一下,主流APP也都有进度条效果,
完整代码地址已上传Github:带进度条的Webview
之前看到一篇博文:Android WebView顶部进度条,作者直接用的ProgressBar方式实现的,但不知是代码有问题,还是我的使用姿势不对,一进来加载进度条就直接到100%了,有知道问题出在哪里的还请不吝赐教,在下面评论里指出来,感谢!
回到正题,看这个效果也不难,就想直接用自定义View写一个出来,ProgressView .java用来实现进度条效果:public class ProgressView extends View { private Paint mPaint; private int mWidth, mHeight; private int progress;//加载进度
public ProgressView(Context context) { this(context, null);
} public ProgressView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0);
} public ProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);
init();
} private void init() { //初始化画笔
mPaint = new Paint();
mPaint.setDither(true);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(10);
mPaint.setColor(Color.RED);
} @Override
protected void onSizeChanged(int w, int h, int ow, int oh) {
mWidth = w;
mHeight = h; super.onSizeChanged(w, h, ow, oh);
} @Override
protected void onDraw(Canvas canvas) {
canvas.drawRect(0, 0, mWidth * progress / 100, mHeight, mPaint); super.onDraw(canvas);
} /**
* 设置新进度 重新绘制
*
* @param newProgress 新进度
*/
public void setProgress(int newProgress) { this.progress = newProgress;
invalidate();
} /**
* 设置进度条颜色
*
* @param color 色值
*/
public void setColor(int color) {
mPaint.setColor(color);
}
}
然后在Webview中使用,Webview的父类是 AbsoluteLayout,所以可以通过addView()的方式将我们自定义的进度条加进去,代码如下:public class Html5Webview extends WebView { private ProgressView progressView;//进度条
private Context context; public Html5Webview(Context context) { this(context, null);
} public Html5Webview(Context context, AttributeSet attrs) { this(context, attrs, 0);
} public Html5Webview(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.context = context;
init();
} private void init() { //初始化进度条
progressView = new ProgressView(context);
progressView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dp2px(context, 4)));
progressView.setColor(Color.BLUE);
progressView.setProgress(10); //把进度条加到Webview中
addView(progressView); //初始化设置
initWebSettings();
setWebChromeClient(new MyWebCromeClient());
setWebViewClient(new MyWebviewClient());
} private class MyWebCromeClient extends WebChromeClient { @Override
public void onProgressChanged(WebView view, int newProgress) { if (newProgress == 100) { //加载完毕进度条消失
progressView.setVisibility(View.GONE);
} else { //更新进度
progressView.setProgress(newProgress);
} super.onProgressChanged(view, newProgress);
}
} /**
* dp转换成px
*
* @param context Context
* @param dp dp
* @return px值
*/
private int dp2px(Context context, float dp) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dp * scale + 0.5f);
}
}
主要是通过MyWebCromeClient 的onProgressChanged方法里面的进度值调用progressView.setProgress()方法去更新进度条,当加载100%的时候让进度条消失。恩,一个带加载进度条的WebView 就实现了!如果需要其他进度条效果,可以按需扩展~