Glide实现加载图片显示进度条效果

先来看看效果图:

Glide作为最近几年刚开始流行起来的图片加载库,功能非常强大,我相信好多人都开始在项目中使用了,网上关于Glide的使用教程也非常多,最近在项目中要实现图片的进度条加载,在网上也没看到有现成的,就想着自己研究一下。

使用

Glide.with(MainActivity.this).using(new ProgressModelLoader( new ProgressHandler(MainActivity.this, progressImageView))). load("http://image2.sina.com.cn/dy/o/2004-11-10/1100077821_2laygS.jpg") .diskCacheStrategy(DiskCacheStrategy.NONE).into(progressImageView.getImageView());

思路

Glide的图片下载底层用的是OkHttp,它已经实现好了,所有要实现进度条加载,就必须要知道图片下载的进度,就要自己来写图片的下来实现,但是Glide支持不支持呢?网上查了一下发现它有个方法

public <T> ImageModelRequest<T> using(final StreamModelLoader<T> modelLoader) { return new ImageModelRequest<T>(modelLoader); }

这个方法可以指定图片请求loader,我们创建一个ProgressModelLoader类,实现StreamModelLoader接口

public class ProgressModelLoader implements StreamModelLoader<String> { private Handler handler; public ProgressModelLoader(Handler handler) { this.handler = handler; } @Override public DataFetcher<InputStream> getResourceFetcher(String model, int width, int height) { return new ProgressDataFetcher(model, handler); } }

重写getResourceFetcher方法,这个方法返回一个DataFetcher类,这个类是个数据提取类,是个接口,重写它的loadData方法来下载图片,我们来看下我创建的ProgressDataFetcher对loadData方法的重写

@Override public InputStream loadData(Priority priority) throws Exception { Request request = new Request.Builder().url(url).build(); OkHttpClient client = new OkHttpClient(); client.interceptors().add(new ProgressInterceptor(getProgressListener())); try { progressCall = client.newCall(request); Response response = progressCall.execute(); if (isCancelled) { return null; } if (!response.isSuccessful()) throw new IOException("Unexpected code " + response); stream = response.body().byteStream(); } catch (IOException e) { e.printStackTrace(); return null; } return stream; }

使用okhttp下载图片,添加一个拦截器

public class ProgressInterceptor implements Interceptor { private ProgressListener progressListener; public ProgressInterceptor(ProgressListener progressListener) { this.progressListener = progressListener; } @Override public Response intercept(Chain chain) throws IOException { Response originalResponse = chain.proceed(chain.request()); return originalResponse.newBuilder().body(new ProgressResponseBody(originalResponse.body(), progressListener)).build(); } }

重写intercept方法,创建一个ProgressResponseBody得到图片下载的进度,来看一下读流的方法

private Source source(Source source) { return new ForwardingSource(source) { long totalBytesRead = 0; @Override public long read(Buffer sink, long byteCount) throws IOException { long bytesRead = super.read(sink, byteCount); totalBytesRead += bytesRead != -1 ? bytesRead : 0; if(progressListener != null) progressListener.progress(totalBytesRead, responseBody.contentLength(), bytesRead == -1); return bytesRead; } }; }

把读到的bytesRead和responseBody.contentLength()传给回调方法progressListener.progress来计算进度。

大体实现逻辑到此就结束了,想看完整代码的移步至https://github.com/chenpengfei88/GlideLoadImageProgress或者可以通过本地下载:http://xiazai.jb51.net/201705/yuanma/GlideLoadImageProgress(jb51.net).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

时间: 2024-09-05 18:49:43

Glide实现加载图片显示进度条效果的相关文章

WEBJX收集jQuery的加载动画和进度条插件

文章简介:精心挑选的8款jQuery 加载动画和进度条插件. 加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐8款基于jQuery实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Per

分享8款优秀的 jQuery 加载动画和进度条插件_jquery

加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQ

我的Android进阶之旅------&amp;gt;android异步加载图片显示,并且对图片进行缓存实例

先来看看效果示意图: step1:新建项目DataAsyncLoad,如下图所示 step2:设置应用的UI界面 a.应用的主界面    main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="

android中Glide实现加载图片保存至本地并加载回调监听

Glide 加载图片使用到的两个记录 Glide 加载图片保存至本地指定路径 /** * Glide 加载图片保存到本地 * * imgUrl 图片地址 * imgName 图片名称 */ Glide.with(context).load(imgUrl).asBitmap().toBytes().into(new SimpleTarget<byte[]>() { @Override public void onResourceReady(byte[] bytes, GlideAnimation

Android的Glide库加载图片的用法及其与Picasso的对比

Glide Glide是一个高效.开源. Android设备上的媒体管理框架,它遵循BSD.MIT以及Apache 2.0协议发布.Glide具有获取.解码和展示视频剧照.图片.动画等功能,它还有灵活的API,这些API使开发者能够将Glide应用在几乎任何网络协议栈里.创建Glide的主要目的有两个,一个是实现平滑的图片列表滚动效果,另一个是支持远程图片的获取.大小调整和展示. Glide 3.0版本以后加入了多项重要功能,同时还支持使用Gradle以及Maven进行构建.该版本包括很多值得关

[Unity3D]异步加载游戏场景与异步加载游戏资源进度条

摘要: 异步任务相信大家应该不会陌生,那么本章内容MOMO将带领大家学习Unity中的一些异步任务.在同步加载游戏场景的时候通常会使用方法 Application.LoadLevel("yourScene"); 这句代码执行完毕后程序会干什么呢??如下 ...     异步任务相信大家应该不会陌生,那么下面介绍一下Unity中的一些异步任务.在同步加载游戏场景的时候通常会使用方法 Application.LoadLevel("yourScene");  这句代码执行

wpf文件复制显示进度条效果

也有一些介绍,先看运行效果 xaml如下: xaml代码 <window x:class="wpfthreadtest.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="mainwindow"

页面加载显示进度条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

Glide加载图片流程(Part One)

由于项目的需要,这几天对Glide的执行过程做了简单的了解,希望对想了解Glide基本用法的朋友能有所帮助. 注意 此系列博客基于Glide V3.7.0版本源码 这里假设朋友们能够在Android Studio中正确引入Glide相关的依赖,如果有不懂的朋友,请参考官方文档引入依赖. 为了让朋友们尽快的了解Glide加载图片的流程,我们就从最简单的方式入手.请看如下代码: ImageView fullscreenView = (ImageView) findViewById(R.id.full