又到了每次的实际项目开发中的需求讨论了。这次是因为做的项目是原生内嵌WebView，所以当我们的WebView在加载网页的时候，需要有个加载进度条，当然这时候有很多种选择，但是因为普通的对话框类型的加载框太丑，我们就舍弃掉了，而是模仿微信里面的进度加载条，也就是在WebView 的顶部会有一条线来显示加载进度。（也就是下方GIF图中的那个紫红色的进度条，别问我为啥用紫红色。我就觉得用这个颜色更加明显点。O(∩_∩)O~）
声明大家不要喷哈，有问题可以评论反馈。我做的可能也不是很好
先附上Demo:
OK ,进入我们的正题，我们先要知道怎么监听到网页加载的进度。
监听网页加载进度：
我们知道了WebChromeClient中有个onProgressChanged方法可以用来监听，所以我们复写onProgressChanged方法：
WebView webView = (WebView) findViewById(R.id.webview);
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
....
....
....
}
});
好了，我们现在在访问网页的时候已经可以拿到了进度值了。也就是newProgress。这里要注意一个问题，那就是如果你在这里打上Log你会发现，这个newProgress值不是说按我们想象中那样，从0慢慢到100，可能就是（0->16->30->100）就返回这四次数字。所以如果我们直接让我们的进度条按照它的newProgress值来变化，就有个问题，那就是会变化特别大，而且速度也特别快。体验一点也不好。所以这里我处理方式是，当newProgress 大于85 的时候，让他慢慢的在特定时间内加载完剩下的进度，这样给人的感觉也是很平稳的
自定义进度条：
其实这个自定义进度条很简单，其实就是画了一个矩形，然后矩形的width就是根据我们拿到的网页的进度来实时的变化：
public class WebProgressBarView extends View{
....
....
....
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = MeasureSpec.getSize(widthMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float result = mWidth * ((float) mCurProgress / (float) 100);
canvas.drawRect(0, 0, result, mHeight, mPaint);
}
}
我们在上面提到。我们在大于85的时候，让他慢慢的加载完毕，所以我们这里要有二个方法：
- 正常方法：
public void setNormalProgress(int mCurProgress){
this.mCurProgress = mCurProgress;
postInvalidate();
}
2.慢慢加载的方法:
public void setCurProgress(long time, final EventEndListener endListener){
ValueAnimator animator = ValueAnimator.ofInt(mCurProgress,100);
animator.setDuration(time);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
setNormalProgress((Integer) animation.getAnimatedValue());
}
});
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
if(endListener != null){
endListener.onEndEvent();
}
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animator.start();
}
继续补充onProgressChanged方法:
既然我们写好了自定义进度条的View ,我们回头再来补充下onProgressChanged方法:
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
//如果进度条隐藏则让它显示
if (View.GONE == progressBarView.getVisibility()) {
progressBarView.setVisibility(View.VISIBLE);
}
if (newProgress >= 85) {
if (isContinue) {
return;
}
isContinue = true;
progressBarView.setCurProgress(1000, new WebProgressBarView.EventEndListener() {
@Override
public void onEndEvent() {
isContinue = false;
if (progressBarView.getVisibility() == View.VISIBLE) {
hideProgress();
}
}
});
} else {
progressBarView.setNormalProgress(newProgress);
}
}
});
我们看到了。我们的进度大于85的话，就在一秒钟内慢慢的加载完，加载完后调用hideProgress方法来隐藏进度条，
private void hideProgressWithAnim() {
AnimationSet animation = getDismissAnim(MainActivity.this);
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
progressBarView.setVisibility(View.GONE);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
progressBarView.startAnimation(animation);
}
private AnimationSet getDismissAnim(Context context) {
AnimationSet dismiss = new AnimationSet(context, null);
AlphaAnimation alpha = new AlphaAnimation(1.0f, 0.0f);
alpha.setDuration(1000);
dismiss.addAnimation(alpha);
return dismiss;
}
问题：
实际操作中的问题，这里我也遇到问题：
- 那就是网页加载没有想象中那样加载一次。网页可能会有重定向跳转这种，虽然你可能感觉就打开了一个链接，你会发现newProgress 从0 -> 100后，会再多次调用0->100。这里我不知道一般大家在做其他APP的WebView进度条的时候，是按照它真实的newProgress来加载，也就是加载了一次全的，然后进度条重新加载一次，再加载一次。还是说只加载第一次的0->100的进度条。
- 我本来想加载第一次进度条，后面的newProgress的重新0->100我就不管了。我就想到重写
WebViewClient，因为里面有二个方法：
//当网页加载完毕后这个方法会被回调
public void onPageFinished (WebView view, String url)
//当网页开始加载时这个方法会被回调
public void onPageStarted (WebView view, String url, Bitmap favicon)
如果大家能帮忙答疑就谢谢了。