Rxjava+RecyclerView+lrucache+disklrucache实现一个蠢蠢的瀑布流

最近在强化Android的技术，准备换个坑吃饭了。最近面试了几家公司，都 特别喜欢考两个点。RecycleView和Rxjava，嗯，那我就索性用这两个结合上缓存机制实现一下瀑布流。废话少说，先看效果

加载逻辑其实用上Rxjava就很简单了。利用concat操作符就很容易完成了。

一.先贴上布局，这个 很简单。

主activity布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycleView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

item布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/item_img"
        android:scaleType="fitXY"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="2dp"/>

</LinearLayout>

这两个都没啥好说的了。如果想美化一下，用CardView做子布局， 还能弄个阴影效果就很好看了。

二.代码部分

我先来贴上Adapter，这个没什么好说的，就是普通的Adapter

package com.xiaonan.cool.waterflowimage;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.List;
import java.util.Random;

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private static List<String> list = null;
    private static Context context = null;
    //生成随机高度的Random
    private Random rand;
    private static ImageLoader loader = null;

    public MyAdapter(Context cont,List<String> ll){
        context = cont;
        list = ll;
        rand = new Random();
        loader = new ImageLoader(cont);
    }
    @Override
    public int getItemCount() {
        return list.size();
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(context).inflate(R.layout.recycle_item,viewGroup,false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int position) {
        ViewGroup.LayoutParams lp = ((MyViewHolder)viewHolder).image.getLayoutParams();
        lp.height = 420;  //这里我用了固定高度，如果想随机高度就用个随机数
        ((MyViewHolder)viewHolder).image.setLayoutParams(lp);
        //设置tag
        ((MyViewHolder)viewHolder).image.setTag(list.get(position));
        ((MyViewHolder)viewHolder).image.setImageResource(R.mipmap.empty_img);
        //下载/加载图片
        loader.loadImage(list.get(position),((MyViewHolder)viewHolder).image);
    }


    class MyViewHolder extends RecyclerView.ViewHolder{
        ImageView image = null;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            image = itemView.findViewById(R.id.item_img);
        }
    }

}

然后是比较关键的部分，就是上面的ImageLoader的实现，这里面实现了图片下载和缓存的逻辑

package com.xiaonan.cool.waterflowimage;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.support.v4.util.LruCache;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.jakewharton.disklrucache.DiskLruCache;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Random;

import io.reactivex.Observable;
import io.reactivex.ObservableEmitter;
import io.reactivex.ObservableOnSubscribe;
import io.reactivex.android.schedulers.AndroidSchedulers;
import io.reactivex.functions.Consumer;
import io.reactivex.schedulers.Schedulers;

public class ImageLoader {
    private LruCache<String,Bitmap> lruCache = null;
    private static Context context = null;
    private static DiskLruCache mDiskLruCache = null;

    public ImageLoader(Context cont){
        long maxMemory = Runtime.getRuntime().maxMemory();
        //初始化LruCache，传入的参数一般是maxMemory/8
        lruCache = new LruCache<String,Bitmap>((int) (Runtime.getRuntime().maxMemory() / 1024) / 8){
            @Override
            protected int sizeOf(String key, Bitmap value) {
                return value.getByteCount() / 1024;
            }
        };
        //这里初始化DiskLruCache
        //参数1.存储路径
        //参数2.app版本，这里版本如果变化，Disk缓存会全部失效
        //参数3.1个key对应多少个文件
        //参数4.存储大小
        try {
            mDiskLruCache = DiskLruCache.open(getDiskCacheDir(cont,"ImageTemp"), 1, 1, 10 * 1024 * 1024);
        } catch (IOException e) {
            e.printStackTrace();
            Logger.d("缓存开启失败");
        }
    }

    public void loadImage(final String url, final ImageView view){
        final String hashKey = hashKeyForDisk(url);
        //读取内存
        Observable<Bitmap> memory = Observable.create(new ObservableOnSubscribe<Bitmap>() {
            @Override
            public void subscribe(ObservableEmitter<Bitmap> emitter) throws Exception {
                Bitmap bitmap = getImageFromCache(hashKey);
                if(bitmap != null){
                    Logger.d("------------------>>命中内存");
                    emitter.onNext(bitmap);
                }else{
                    Logger.d("内存未命中");
                    emitter.onComplete();
                }
            }
        }).subscribeOn(Schedulers.io());

        //读取硬盘
        Observable<Bitmap> disk = Observable.create(new ObservableOnSubscribe<Bitmap>() {
            @Override
            public void subscribe(ObservableEmitter<Bitmap> emitter) throws Exception {
                Bitmap bitmap = getImageFromDisk(hashKey);
                if(bitmap != null){
                    Logger.d("------------------>>命中硬盘");
                    //存缓存
                    putImageToCache(hashKey,bitmap);
                    //发射
                    emitter.onNext(bitmap);
                }else{
                    Logger.d("硬盘未命中");
                    emitter.onComplete();
                }
            }
        }).subscribeOn(Schedulers.io());

        //网络加载
        Observable<Bitmap> network = Observable.create(new ObservableOnSubscribe<Bitmap>() {
            @Override
            public void subscribe(ObservableEmitter<Bitmap> emitter) throws Exception {
                try {
                    URL url_image = new URL(url);
                    HttpURLConnection connection = (HttpURLConnection) url_image.openConnection();
                    connection.setReadTimeout(5000);
                    connection.setConnectTimeout(8000);
                    connection.setUseCaches(true);
                    connection.connect();
                    int code = connection.getResponseCode();
                    if(code == 200){
                        InputStream is = connection.getInputStream();
                        //Inputstream不能二次调用，需要特殊处理
                        ByteArrayOutputStream baos = new ByteArrayOutputStream();
                        byte[] buffer = new byte[1024];
                        int len;
                        while ((len = is.read(buffer)) > -1 ) {
                            baos.write(buffer, 0, len);
                        }
                        baos.flush();
                        //调整数据缓存
                        Bitmap bitmap  = BitmapFactory.decodeStream(new ByteArrayInputStream(baos.toByteArray()));
                        //存缓存
                        putImageToCache(hashKey,bitmap);
                        //存硬盘
                        putImageToDisk(hashKey,new ByteArrayInputStream(baos.toByteArray()));
                        //发射
                        emitter.onNext(bitmap);
                        is.close();
                        baos.close();
                    }
                    connection.disconnect();
                } catch (Exception e) {
                    e.printStackTrace();
                    emitter.onError(e);
                }
            }
        }).subscribeOn(Schedulers.io());


        //这里用concat组合三个发布者，然后用firstElements依次调用
        Observable.concat(memory,disk,network)
                .firstElement()
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Consumer<Bitmap>() {
                    @Override
                    public void accept(Bitmap bitmap) throws Exception {
                        if(bitmap != null && url.equals(view.getTag())){
                            view.setImageBitmap(bitmap);
                        }
                    }
                });


    }

    public static File getDiskCacheDir(Context context, String uniqueName) {
        Logger.d("存储位置："+context.getCacheDir().getPath() + File.separator + uniqueName);
        return new File(context.getCacheDir().getPath() + File.separator + uniqueName);
    }

    public static void putImageToDisk(String key,InputStream is){
        if(mDiskLruCache == null || getImageFromDisk(key) != null){
            return;
        }
        BufferedOutputStream out = null;
        BufferedInputStream in = null;
        try {
            DiskLruCache.Editor editor = mDiskLruCache.edit(key);
            if(editor == null){
                // 当editor为空的时候证明正在写入占用，直接返回
                return;
            }
            OutputStream outputStream = editor.newOutputStream(0);
            in = new BufferedInputStream(is, 8 * 1024);
            out = new BufferedOutputStream(outputStream, 8 * 1024);
            int b;
            while ((b = in.read()) != -1) {
                out.write(b);
            }
            outputStream.flush();
            editor.commit();
        } catch (IOException e) {
            Logger.d(e.toString());
        } finally {
            try {
                if(in != null){
                    in.close();
                }
                if(out != null){
                    out.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    public static Bitmap getImageFromDisk(String key){
        if(mDiskLruCache == null){
            return null;
        }
        Bitmap bitmap = null;
        try{
            DiskLruCache.Snapshot snapshot = mDiskLruCache.get(key);
            if (snapshot != null) {
                InputStream is = snapshot.getInputStream(0);
                bitmap = BitmapFactory.decodeStream(is);
                is.close();
            }
        }catch (Exception ae){
            Logger.d(ae.toString());
        }
        return bitmap;
    }

    public void putImageToCache(String key,Bitmap bitmap){
        if(getImageFromCache(key) == null){
            lruCache.put(key,bitmap);
        }
    }

    public Bitmap getImageFromCache(String key){
        return lruCache.get(key);
    }

    //这里把URL用MD5+hash处理后生成固定位数的key，要不然URL太长
    public static String hashKeyForDisk(String key) {
        String cacheKey;
        try {
            final MessageDigest mDigest = MessageDigest.getInstance("MD5");
            mDigest.update(key.getBytes());
            cacheKey = bytesToHexString(mDigest.digest());
        } catch (NoSuchAlgorithmException e) {
            cacheKey = String.valueOf(key.hashCode());
        }
        return cacheKey;
    }

    private static String bytesToHexString(byte[] bytes) {
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < bytes.length; i++) {
            String hex = Integer.toHexString(0xFF & bytes[i]);
            if (hex.length() == 1) {
                sb.append('0');
            }
            sb.append(hex);
        }
        return sb.toString();
    }

    public void onDestory(){
        try {
            lruCache = null;
            mDiskLruCache.close();
            mDiskLruCache = null;
        } catch (IOException e) {
            e.printStackTrace();
        }
    }


}

这个实现逻辑很简单。先判断memory，然后 判断disk有没有缓存， 最后调用network。下载图片后把Bitmap分别加载入内存，外部存储，然后把图片加载到指定 item。

最后贴上调用的Activity

public class MainActivity extends AppCompatActivity {

    private static List<String> list;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        RecyclerView recyclerView = findViewById(R.id.recycleView);
        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));
        MyAdapter adapter = new MyAdapter(this,list);
        recyclerView.setAdapter(adapter);
    }

    //我把许多百度找到的图片链接放入一个Sring类型的数组，然后把数组在这里转换成一个List
    public void initData(){
        list = new ArrayList<String>();
        for(String itemUrl:Config.imageURLs){
            list.add(itemUrl);
        }
    }
}

最后记录下遇到的问题

1.InputStream不能被调用多次，因为使用了read 后游标就到了尾部。为了解决这个 问题，把InputSteream转换成一个ByteArrayOutputStream，然后在需要调用的地方转存回来。这里在网络部分的Observerable中有体现

2.图片乱序问题可以利用view.setTag(URL)的方式给每个item带上tag，然后在加载图片的时候判断item的tag和当前需要加载的图片的url是不是一致，如果一致则加载，如果 不一致则忽略

3.图片闪动问题用 默认图片占位，在onCreateBinder中 给每个默认的位置都放上图片，这样能避免加载的时候图片闪动。闪动的主要问题是RecycleView的复用机制导致的。这个具体网上一搜一大堆。