又到了每次的实际项目开发中的需求讨论了。这次是因为做的项目是原生内嵌WebView,所以当我们的WebView在加载网页的时候,需要有个加载进度条,当然这时候有很多种选择,但是因为普通的对话框类型的加载框太丑,我们就舍弃掉了,而是模仿微信里面的进度加载条,也就是在WebView 的顶部会有一条线来显示加载进度。(也就是下方GIF图中的那个紫红色的进度条,别问我为啥用紫红色。我就觉得用这个颜色更加明显点。O(∩_∩)O~)
声明大家不要喷哈,有问题可以评论反馈。我做的可能也不是很好
先附上Demo:DEMO
一些关于WebView的基础我就不说了。大家可以看看
Android之WebView快速上手
OK ,进入我们的正题,我们先要知道怎么监听到网页加载的进度。
监听网页加载进度:
我们按照上面的Android之WebView快速上手所说的:
我们知道了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
,因为里面有二个方法:
然后我就想到定义一个boolean值,这样岂不是可以在这二个方法里面赋值,然后用来控制。//当网页加载完毕后这个方法会被回调 public void onPageFinished (WebView view, String url) //当网页开始加载时这个方法会被回调 public void onPageStarted (WebView view, String url, Bitmap favicon)复制代码
可是我打了Log发现,比如我WebView打开的是https://www.baidu.com
,然后打开显示的百度首页中某个新闻,onPageStarted
并不会调用。而onPageFinished
还是会被调用,我想了解下什么时候onPageStarted
不会被去调用。 ╮(╯﹏╰)╭
如果大家能帮忙答疑就谢谢了。