尝试加载一千张照片（二）

CoolGlide 是学习Glide的过程中，动手写的一个简单版本。主要是为了进一步了解Glide的设计原理。

背景

我在大三的时候写了一个简单的个人云盘，我想把手机里面的照片上传到云盘上，这之前需要展示手机里面的照片，最简单的做法就是像微信朋友圈发照片那样。但是实际上，整个网格列表特别的卡。卡的原因有两个：一是主线程中取加载Bitmap导致UI不能相应操作，二是内存中大量Bitmap，GC导致Stop the World。

后来我想出了一个方案：尝试加载一千张照。其实主要就是用自己在艺术探索中学习的知识，结合像线程池、LruCache等一定程度上把照片流畅的加载出来了。

但是代码写的都在Activity中，经过三个月实习，这样的代码实在太恶心了，很难移植，可读性太差。与此同时很多地方处理的很粗糙。但是那是一次勇敢的尝试，我也感谢那次尝试。

经过几个月实习，学习了很多编码和设计知识，越发觉得之前方案的恶心，我尝试取学习Glide，写了这个照片加载框架的Demo。可能在未来的某天回头看时候，这一份代码依然会让我感觉差劲，但是我依然会为自己的尝试而感到庆幸。

设计

还是这个场景，要实现发朋友圈时候哪个照片选择器（网格Recyclerview显示大量照片）。

整个框架的整体结构如下：基于生产者消费者模型

image.png

把每个加载照片任务抽象为一个Class Request。主要成员成员有照片的Uri，目标View。
Request任务有了，需要线程处理这些加载照片的耗时任务，继承Thread，写一个专门负责进行耗时操作的类RequestDispatcher。
从Request 到 RequestDispatcher，中间缺少一个RequestManager管理Request请求队列。

详细

在Activity中的使用，生成Request任务

获取CoolGlide单例
创建一个Request对象，要加载的照片Uri，需要attach的ImageView，设置加载成功回调
提交加载任务

// 1. 获取加载框架实例
glide = RequestManager.getInstance();

@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
    ImageView iv = holder.itemView.findViewById(R.id.iv);
    // 2. 创建任务
    UriRequest request = new LocalRequest(list.get(position)); // url
    request.mTargetView = new SoftReference<>(iv); // view
    request.mListener = new LoadingListener() {
        @Override
        public void onSuccess(Bitmap bitmap) {
            Log.d(TAG, "onSuccess: success , position = " + position);
        }

        @Override
        public void onFail() {
            Log.d(TAG, "onFail: , position = " + position);
        }
    };
    // 3. 提交任务 
    glide.offer(request); // add Request Task to Request Queue
}
// 启动加载引擎
glide.start();

RequestManger中将任务预处理，添加到消费者队列中

设置tag，因为Recyclerview的复用，要防止老的Bitmap加载到新的ViewHolder中
检查LruCache中是否命中缓存，如果命中直接显示
设置LoadingListener代理，目的是加载成功的时候将Bitmap添加到LruCache中
将任务添加到阻塞队列

public void offer(UriRequest request) {
    // 1. set tag, 防止RecyclerView中错位
    ImageView imageView = request.mTargetView.get();
    if(request.mTag != null
       && imageView.getTag() != null
       && request.mTag != imageView.getTag())
        imageView.setImageBitmap(null); // Recyclerview复用的时候，防止错位
    request.mTag = request.mUri;
    if (imageView != null) imageView.setTag(request.mTag);
    Log.d(TAG, "offer: set tag ok " + request.mUri);

    // 2. if cache has it， 命中LruCache中缓存，直接显示
    Bitmap bitmap;
    if ((bitmap = cache.get(request.mUri)) != null) {
        request.attach(bitmap);
        Log.d(TAG, "offer: hit cache " + request.mUri);
    }

    // 3. need to load it，这里代理LoadingListener，回调是将Bitmap添加到LruCache
    request.mListener = new LoadingListenerProxy(request.mListener) {
        @Override
        public void onSuccess(Bitmap bitmap) {
            cache.put(request.mUri, bitmap);
            super.onSuccess(bitmap);
        }
        @Override
        public void onFail() {
            super.onFail();
        }
    };
    // 4. add into request queue , which type is LinkedBlockingQueue
    requests.offer(request); // 添加到阻塞队列
    Log.d(TAG, "offer: loading" + request.mUri);
}

RequestDispatcher 消费队列中的Request

检查当前任务是否被中断，结束线程
从任务队列中消费Request
设置占位图
真正加载Bitmap

@Override
public void run() {
    while (true){
        // 1. check interrupt
        if(interrupted()) return;
        UriRequest request = null;
        // 2. take Request
        try {
            request = requests.take();
            // 3. set placeholder
            request.placeholder();
            // 4. load bitmap
            request.loadBitmap();  
        } catch (Exception e) {
            e.printStackTrace();
            if(request != null) request.mListener.onFail();
        }
    }
}

Request 中提供加载照片的能力，因为不同的照片源加载（比如网络照片，本地照片）的逻辑不一样，这里为了提高扩展性。要加载特殊的照片只需要继承Request，并实现loadBitmap方法即可。

检查Soft引用的目标View是否被回收，如果回收了，结束加载任务
获取控件的width和height，计算采样率
将采样后的Bitmap加载到View上

public class LocalRequest extends UriRequest {
 // ... 省略代码
    @Override
    public void loadBitmap() {
        // 1. check view
        View view = mTargetView.get();
        if (view == null) {
            Log.d(TAG, "loadBitmap: view == null");
            return;
        }

        //2. get w and h before decode bitmap
        SizeDeterminer sizeDeterminer = SizeDeterminer.Obtains(view, (width, height) -> {
            Log.d(TAG, "loadBitmap: width = " + width + " height = " + height);
            Bitmap fit = BitmapUtil.decodeBitmapFromFile(mUri, width, height);
            // 3. attach bitmap into view
            attach(fit);
        });
        sizeDeterminer.getSize();
    }
}

采样率的计算借用了Glide的思路

获取View的宽和高。可能是准确尺寸，也可能是Match_parent wrap_parent
如果是准确的w he h，回调到计算采样率
如果不是准确的w 和 h，需要获取View的ViewTreeObserver
给ViewTreeObserver添加PreDraw监听器，当View布局完成的时候会调用这个回调，布局完成意为着w和h已知。

public void getSize() {
    // 1. get view w and h params
    int currentWidth = getTargetWidth();
    int currentHeight = getTargetHeight();

    // 2. is valid  ( when w and h > 0) 
    if (isViewStateAndSizeValid(currentWidth, currentHeight)) {
        callback.onSizeReady(currentWidth, currentHeight);
        Log.d(TAG, "getSize: valid");
        return;
    }

    // 3. invalid ( w and h <= 0)
    ViewTreeObserver observer = mView.getViewTreeObserver();
    Log.d(TAG, "getSize: invalid");

    // 4. before drawing view, call SizeReady listener
    observer.addOnPreDrawListener(new SizeDeterminerLayoutListener(this));
}

测量目标View的尺寸

onPreDraw被执行的时候完成了Layout，此时可以获取有效的 w 和 h
移除Listener，因为Draw会被执行很多次，onPreDraw也会被执行很多次
onPreDraw是主线程，要切换到子线程，这里用一个线程池专门decode bitmap

    private static final class SizeDeterminerLayoutListener implements ViewTreeObserver.OnPreDrawListener {
        private final WeakReference<SizeDeterminer> sizeDeterminerRef;
     // 1. finished layout
        @Override
        public boolean onPreDraw() {
            SizeDeterminer sizeDeterminer = sizeDeterminerRef.get();
            if (sizeDeterminer != null) {
                sizeDeterminer.checkCurrentDimens(this);
            }
            return true;
        }
    }
 
    private void checkCurrentDimens(SizeDeterminerLayoutListener self) {
        int currentWidth = getTargetWidth();
        int currentHeight = getTargetHeight();

        if (!isViewStateAndSizeValid(currentWidth, currentHeight)) {
            Log.d(TAG, "checkCurrentDimens: size is invalid");
            return;
        }
        // 2. remove listener 
        ViewTreeObserver observer = mView.getViewTreeObserver();
        observer.removeOnPreDrawListener(self);
        free();
     // 3. switch to thread from main thread
        RequestManager.getInstance().commit(() -> {
            callback.onSizeReady(currentWidth, currentHeight);
        });
    }
}

onSizeReady被调用后，就可以按照w和h去计算采样率了。

获取采样率
按照采样率加载Bitmap

public static Bitmap decodeBitmapFromFile(String file, int width, int height) {
    // 1. get sample rate
    final BitmapFactory.Options options = new BitmapFactory.Options();
    options.inJustDecodeBounds = true;
    BitmapFactory.decodeFile(file, options);

    options.inSampleSize = calculateInSampleSize(options, width, height);
    options.inJustDecodeBounds = false;
    // 2. decode bitmap 
    return BitmapFactory.decodeFile(file, options);
}

private static int calculateInSampleSize(BitmapFactory.Options options, int width, int height) {
    final int outHeight = options.outHeight;
    final int outWidth = options.outWidth;

    if (outHeight < height || outWidth < width) {
        return 1;
    }
    return Math.min(outHeight / height, outWidth / width);
}

获取了Bitmap后将其加载到View上

检查Bitmap是否加载成功
检查View是否被回收
切换到主线程更新UI
缓存Bitmap

// in class Request
public void attach(Bitmap bitmap) {
    // 1. check bitmap object 
    if(bitmap == null) {
        mListener.onFail();
        Log.d(TAG, "attach: bitmap == null");
        return;
    }
    // 2. check target view
    final ImageView imageView = mTargetView.get();
    if(imageView == null  || imageView.getTag() != mTag) {
        mListener.onFail();
        Log.d(TAG, "attach: view == null");
        return;
    }
    // 3. attach bitmap in main thread
    if(Looper.getMainLooper() == Looper.myLooper()){
        imageView.setImageBitmap(bitmap);
    }else{
        imageView.post(() -> imageView.setImageBitmap(bitmap));
    }
    // 4. cache bitmap
    mListener.onSuccess(bitmap);
}

总结

这样一个流程就完成了图片加载框架。有以下特点

继承Request 实现LoadBitmap扩张照片源。
基于生产消费者模型，结构更清楚（相对于我之前写的）
晚上的计算采样率计算方案，这部分采用Glide的做法
LruCache缓存策略

尝试加载一千张照片（二）

背景

设计

详细

总结

浏览过的版块