使用Timer实现网页匀速加载的进度条样式

所属分类: 软件编程 / Android 阅读数: 28
收藏 0 赞 0 分享

在使用WebView加载网页时有时候网速等原因加载比较慢时,为了避免在加载网页的时候出现一片空白的区域,给用户很不好的体验感,我们往往在加载的时候添加一个进度条,使用户直观的感受到网页加载的进度,通常我们可以通过WebChromeClient里面的onProgressChanged()方法获取到当前的网页加载进度,但是当我们使用时会发现他的网页加载进度不是一点一点加载的,也许一下就加载到50%下一秒直接加载到80%,如果我们将其设置给progressBar看起来就很快而且很不顺畅,体验感较差,如下图所示加载的网页进度:

这里写图片描述

假如这样将其进度设置到progressBar的体验感就相当的差,如下图所示:

这里写图片描述

现在我们希望想要其在加载网页的时候希望给用户一种匀速加载的感觉,尽管他不是网页真正加载的进度,但我们只需要在网页刚开始加载后和网页加载结束前模拟一个匀速加载的效果,也就是重写WebViewClient的onPageStarted()方法,在其中开启一个定时器,重写onPageFinished(),将定时器关闭掉,达到匀速加载网页的效果,提到定时器,就不得不说一下相关的东西了。

简单来说就分成两个东西,一个Timer,另外一个就是timer的所要执行的计划或者说是任务(Task),将这个任务(task)设置给定时器(timer),告诉定时器(timer)什么时候执行任务(Task),而任务就是我们要要干的事,可以这样说定时器想一个闹钟(Timer),任务相当于我们起床(任务Task),当闹钟执行到我们设置的时间时(schedule),就提醒我们该起床了

Timer执行指定的任务可以有一下几种方法

//在指定的时间执行指定的任务。
 public void schedule(TimerTask task, Date when) {}
 //延迟指定时间后执行指定的任务
 public void schedule(TimerTask task, long delay) {}
 //按设置延迟时间和时间间隔重复执行指定的任务
 public void schedule(TimerTask task, long delay, long period) {}
 //在指定的时间和时间间隔重复执行指定的任务
 public void schedule(TimerTask task, Date when, long period) {}

在onPageStarted()我们通过开启一个定时器,每隔50ms开始progress+1,直到onPageFinished()取消定时器
package com.example.timerdemo;

import java.util.Timer;
import java.util.TimerTask;
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
public class MainActivity extends Activity {
 private ProgressBar progressbar;
 private Activity _rootActivity;
 private WebView webView;
 private WebClient webClient;
 private Timer timer = new Timer();
 private int currentProgress = 0;
 String url = "http://appagent.gyfc.net.cn/NewHouse/index";
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  progressbar = (ProgressBar) findViewById(R.id.web_progressbar);
  webView = (WebView) findViewById(R.id.webView);
  webClient = new WebClient();
  webView.setWebViewClient(webClient);
  webView.setWebChromeClient(new WebChromeClient(){
   @Override
   public void onProgressChanged(WebView view, int newProgress) {
    super.onProgressChanged(view, newProgress);
    if (newProgress == 100) {
     stopTimeTask();
     progressbar.setVisibility(View.GONE);
    } else {
     if (newProgress > currentProgress) {
      progressbar.setProgress(newProgress);
      currentProgress = newProgress;
     }
    }
   }
  });
  findViewById(R.id.btn).setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    webView.loadUrl(url);
   }
  });
 }
 class WebClient extends WebViewClient{
  @Override
  public void onPageStarted(WebView view, String url, Bitmap favicon) {   super.onPageStarted(view, url, favicon);
   startTimeTask();
  }
  @Override
  public void onPageFinished(WebView view, String url) {
   // TODO Auto-generated method stub
   super.onPageFinished(view, url);
   stopTimeTask();
  }
 }
 /**
  * 启动定时器
  */
 private void startTimeTask() {
  stopTimeTask();
  timer = new Timer();
  timer.schedule(new TimerTask() {
   @Override
   public void run() {
    runOnUiThread(new Runnable() {
     @Override
     public void run() {
      // TODO Auto-generated method stub
      if (currentProgress < 90) {
       currentProgress += 1;
       progressbar.setProgress(currentProgress);
      } else {
       stopTimeTask();
      }
     }
    });
   }
  }, 0, 50);
 }
 /**
  * 关闭定时器
  */
 private void stopTimeTask() {
  if (timer != null) {
   timer.cancel();
   timer = null;
  }
 }
}
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >
  <ProgressBar
   android:id="@+id/web_progressbar"
   style="?android:attr/progressBarStyleHorizontal"
   android:layout_width="match_parent"
   android:layout_height="3dp"
   android:progressDrawable="@drawable/progressbar_bg_style" />
  <WebView
   android:id="@+id/webView"
   android:layout_below="@id/web_progressbar"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />
  <Button 
   android:id="@+id/btn"
   android:layout_width="match_parent"
   android:layout_height="40dp"
   android:text="加载网页"
   android:layout_alignParentBottom="true"
   android:background="#e5e5e5"/>
</RelativeLayout>

执行效果如下所示:

这里写图片描述

以上所述是小编给大家介绍的使用Timer实现网页匀速加载的进度条样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

老生常谈Android HapticFeedback(震动反馈)

下面小编就为大家带来一篇老生常谈Android HapticFeedback(震动反馈)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详谈OnTouchListener与OnGestureListener的区别

下面小编就为大家带来一篇详谈OnTouchListener与OnGestureListener的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android仿知乎悬浮功能按钮FloatingActionButton效果

前段时间在看属性动画,恰巧这个按钮的效果可以用属性动画实现,下面通过本文给大家分享adroid仿知乎悬浮功能按钮FloatingActionButton效果,需要的朋友参考下吧
收藏 0 赞 0 分享

解决Android V7后自定义Toolbar、ActionBar左侧有空白问题

这篇文章主要介绍的Android V7后自定义Toolbar、ActionBar左侧有空白问题的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Android常见控件使用详解

这篇文章主要为大家详细介绍了Android常见控件的使用方法,包括ProgressBar进度条控件、AlertDialog对话框控件等,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android实现简洁的APP更新dialog数字进度条

这篇文章主要为大家详细介绍了Android实现简洁的APP更新dialog数字进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android 判断当前语言环境是否是中文环境

本文主要介绍了Android 判断当前语言环境是否是中文环境的方法。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

详谈Android中Matrix的set、pre、post的区别

下面小编就为大家带来一篇详谈Android中Matrix的set、pre、post的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android实现登录界面记住密码的存储

这篇文章主要为大家详细介绍了Android SharedPreferrences实现登录界面记住密码的存储,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android 使用SharedPreferrences储存密码登录界面记住密码功能

Android存储方式有很多种,在这里所用的存储方式是SharedPreferrences, 其采用了Map数据结构来存储数据,以键值的方式存储,可以简单的读取与写入,下面通过实例代码给大家讲解下,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多