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

xg.gif

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  ImageModelRequest using(final StreamModelLoader modelLoader) {    
     return new ImageModelRequest(modelLoader);
}

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

public class ProgressModelLoader implements StreamModelLoader {   
 
   private Handler handler;    

   public ProgressModelLoader(Handler handler) {        
      this.handler = handler;    
   }    

   @Override    
   public DataFetcher 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

欢迎Star, Follow, 谢谢。