android 带进度条上传,Android 编写一个带进度条的Webview

今天是4月1号，大家愚人节快乐~清明节放假咯！清明节放假咯！清明节放假咯！重要的事情说三遍，祝大家玩得愉快！

言归正传，用Webview加载一个网页时，如果加载时间长，界面会一直空白，体验不太好，所以加个进度条更好看一下，主流APP也都有进度条效果，先上效果图：

progressBar.png

完整代码地址已上传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 就实现了！如果需要其他进度条效果，可以按需扩展~