Android自定义View:模仿Lofter图片加载(二)

回顾


【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>
xml布局效果图

在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

监听进度大致的做法都是重写okhttpResponeBody,并配合interceptor来实现。这里可以参考一下【Glide 的作者提供的实现方法】

这里我使用了ProgressManager这个库,这个库实现的大概思路也是重写okhttpResponeBody,并配合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控件效果

附项目地址


谢谢阅读

下一篇文章,我将会基于本篇文章的LofterImageView,做一个画廊的浏览效果吧,也就是多图预览。

推荐阅读更多精彩内容