回顾
【Android自定义View：模仿Lofter图片加载（一）】
上一篇文章已经讲了自定义进度条的实现了，那么这篇文章我们就来谈谈将结合Glide和上篇文章的ImageProgressView，实现一个单图预览的控件，控件名称就叫LofterImageView吧
先看一下效果图
分析
首先，使用Glide加载一张图片很简单，一行代码就搞定了，所以这个控件的难点在于将下载图片的进度显示也加入进去。
网上有用到Drawable注入的方式，在这里我们就不那么复杂，直接用组合控件的方式实现。
So 一步一步来实现
按照上面的思路，我们需要两个控件来实现，一个是ImageView，另一个则是进度加载的ImageProgressView。为了支持图片可缩放预览，此处用PhotoView来实现。
Step 1 定好布局
使用一个layout包裹着PhotoView和LofterProgressView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000">
<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/photo_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"/>
<chengang.library.widget.LofterProgressView
android:id="@+id/pv"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
在java中，LofterImageView这个类需继承RelativeLayout，并在初始化的时候获取到我们自己定的布局。
public LofterImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
initView();
}
/**
* 获取view的布局
*/
private void initView() {
View mView = LayoutInflater.from(mContext).inflate(R.layout.lofter_progress_view, this, true);
mProgressView = (LofterProgressView) mView.findViewById(R.id.pv);
mPhotoView = (PhotoView) mView.findViewById(R.id.photo_view);
}
Step 2 Glide加载
这里我们需要暴露一个接口给外部去加载图片，直白的说就是在这个类里面封装一个Glide加载图片的方法。
/**
* 加载图片
*
* @param imageUrl imageUrl
*/
public void load(String imageUrl) {
this.mImageUrl = imageUrl;
Glide.with(mContext)
.load(mImageUrl)
.listener(new RequestListener<String, GlideDrawable>() {
@Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
//...
return false;
}
@Override
public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
//...
return false;
}
})
.diskCacheStrategy(DiskCacheStrategy.SOURCE)
.crossFade(500)
.into(mPhotoView);
}
到这里的话，这个控件已经可以加载图片了，不过没加进度条，这跟普通的ImageView有啥区别呢，接下就讲上篇文章的LofterProgressView结合进去使用。
Step 3 监听下载进度，更新LofterProgressView
监听进度大致的做法都是重写okhttp的ResponeBody，并配合interceptor来实现。这里可以参考一下【Glide 的作者提供的实现方法】。
这里我使用了ProgressManager这个库，这个库实现的大概思路也是重写okhttp的ResponeBody，并配合interceptor来实现，具体的思路可以看一下这里，里面实现的思路非常详细【一行代码实现Okhttp,Retrofit,Glide下载上传进度监听】
接下来我们就用progressManager来实现图片下载的监听
首先在初始化okhttpClient的时候，我们需将progressManager初始化，实际上这里就是在okhttp里面增加一个自定义的interceptor
OkHttpClient.Builder builder = new OkHttpClient.Builder();
//okhttp的各种设置
...
//这里初始化`progressManager`
//为okhttp传入自定义的interceptor，来监听下载的进度
this.mOkHttpClient = ProgressManager.getInstance().with(builder) .build();
接下来，我们还需要为Glide传入我们设置的okhttpClient
/**
* Glide自定义配置，此处需要在AndroidManifest.xml中声明一下
*/
public class GlideConfiguration implements GlideModule {
@Override
public void applyOptions(Context context, GlideBuilder builder) {
//Glide自定义配置
}
@Override
public void registerComponents(Context context, Glide glide) {
AppContext application = (AppContext) context.getApplicationContext();
//这里需要将我们自己的okhttpclient传进去，
//使Glide默认使用我们配置好的okhttpClient进行操作
glide.register(GlideUrl.class, InputStream.class,
new OkHttpUrlLoader.Factory(application.getOkHttpClient()));
}
最后，我们直接调用即可，并在回调中更新我们的下载进度
/**
* 初始化监听图片下载进度的监听器
*/
private void initListener() {
ProgressManager.getInstance().addResponseListener(mImageUrl, new ProgressListener() {
@Override
public void onProgress(ProgressInfo progressInfo) {
//进度回调，我们在此处更新ui
int percent = progressInfo.getPercent();
mProgressView.setVisibility(VISIBLE);
//更新进度条
mProgressView.setPercent(percent);
if (!isLoadSuccess && (progressInfo.isFinish() || percent == 100)) {
Log.d(TAG, "Glide --> finish");
}
}
@Override
public void onError(long id, Exception e) {
//出错后的逻辑
Log.d(TAG, "Glide --> error: " + e);
mErrorLayout.setVisibility(VISIBLE);
}
});
}
到这里，这个控件也基本完成了
Step 4 细节小优化
当图片下载完毕或者加载出错后，进度框要消失，这是理所当然的事。如果我们只是调用setVisibility(GONE)的话，整个画面未免有点生硬。如果能加点动画，舒缓一下，那就perfect了。
so，动画不需要很华丽，就正常的加一个Alpha动画，在Glide的回调函数onResourceReady中延迟执行一下
Glide.with(mContext)
.load(mImageUrl)
.listener(new RequestListener<String, GlideDrawable>() {
@Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
...
return false;
}
@Override
public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
//在此处执行我们写的动画
mProgressView.startAnimation(getDefaultExitAnimation());
return false;
}
})
.diskCacheStrategy(DiskCacheStrategy.SOURCE)
.crossFade(500)
.into(mPhotoView);
private Animation getDefaultExitAnimation() {
//设置透明动画
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0F, 0.0F);
//延迟600毫秒执行动画
alphaAnimation.setStartOffset(600L);
alphaAnimation.setDuration(400L);
alphaAnimation.setFillEnabled(true);
alphaAnimation.setFillAfter(true);
alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
Log.d(TAG, "lofterProgressView exit animation start");
}
@Override
public void onAnimationEnd(Animation animation) {
//动画执行后加载框消息
Log.d(TAG, "lofterProgressView gone");
mProgressView.setVisibility(GONE);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
return alphaAnimation;
}
最终的效果图，我们可以看到当进度达到100后，进度框会有一个很舒服的渐变退出动画。
附项目地址
谢谢阅读
下一篇文章，我将会基于本篇文章的LofterImageView，做一个画廊的浏览效果吧，也就是多图预览。
