跟著我一步步寫一個(gè)圖片加載框架

起因

對于Android開發(fā)來說, 圖片加載框架相信很多人都用過, 比如Android-Universal-Image-Loader, Picasso, Glide等等, 但是如果能夠自己去實(shí)現(xiàn)一個(gè)圖片加載框架, 那對于充分理解圖片的三級緩存(三級還是二級?emmm...其實(shí)這并不重要)是十分有幫助的,同時(shí)也能讓我們更好的理解那些知名的圖片加載框架的原理。下面我將演示如何寫一個(gè)簡易的圖片加載框架。


模塊結(jié)構(gòu)

首先說明一下框架的整體結(jié)構(gòu)。
這是我定義的ImageLoader的結(jié)構(gòu),里面含有兩個(gè)成員變量:MemoryCache和DiskCache,是我自定義的兩個(gè)類。MemoryCache負(fù)責(zé)管理內(nèi)存中的bitmap加載。DiskCache負(fù)責(zé)磁盤的bitmap加載,同時(shí)DiskCache中有一個(gè)ImageFetcher的模塊,負(fù)責(zé)從網(wǎng)絡(luò)下載圖片到本地磁盤。


加載流程

現(xiàn)在來梳理一下圖片的加載流程。



具體就是如上面的流程圖所示,已經(jīng)畫的比較詳細(xì)了。首先ImageLoader根據(jù)圖片的url從MemoryCache中取bitmap,如果MemoryCache中沒有,就去DiskCache中取bitmap。DiskCache根據(jù)圖片url先從磁盤取bitmap,如果沒有就從網(wǎng)絡(luò)下載圖片到磁盤,然后再從磁盤取出這張bitmap返回給ImageLoader。最后就是將這張bitmap設(shè)置到ImageView上。接下來就是具體的細(xì)節(jié)代碼了。


ImageLoader

ImageLoader中主要的是displayImage(String url, ImageView iv)這個(gè)方法

public void displayImage(final String url, final ImageView imageView, final int reqWidth, final int reqHeight) {
    imageView.setTag(url);
        Bitmap bitmap = mMemoryCache.get(url);
        if (bitmap != null) {
            imageView.setImageBitmap(bitmap);
            return;
        }
        Runnable loadBitmapRunnable = new Runnable() {
            @Override
            public void run() {
                // 從本地或者網(wǎng)絡(luò)獲取圖片, 在子線程中進(jìn)行
                final Bitmap bitmap = mDiskCache.get(url, reqWidth, reqHeight);
                if (bitmap == null) {
                    return;
                }
                // 添加到內(nèi)存緩存中
                mMemoryCache.put(url, bitmap);
                mHandler.post(new Runnable() {
                    @Override
                    public void run() {
                        // 判斷是否數(shù)據(jù)錯(cuò)亂, 因?yàn)榧虞d圖片的過程過程是異步的, 哪些圖片先下載好是不一定的
                        // 有可能一張圖片先下了, 但是另一張圖片后下載的卻比它下載的更快
                        String uri =(String)imageView.getTag();
                        if (TextUtils.equals(url, uri)) {
                            imageView.setImageBitmap(bitmap);
                        } else {
                            Log.w(TAG, "The url associated with imageView has changed");
                        }
                    }
                });
            }
        };
        mThreadPoolExecutor.execute(loadBitmapRunnable);
}

這里需要注意的地方是需要將url設(shè)置為ImageView的tag, 主要作用是為了防止listView或者recyclerView加載圖片錯(cuò)亂的問題。產(chǎn)生錯(cuò)亂的原因是listview復(fù)用了機(jī)制和異步加載任務(wù)造成的。具體可以見這兩篇文章 android listview 異步加載圖片并防止錯(cuò)位
Android ListView異步加載圖片亂序問題,原因分析及解決方案
想起之前面試的時(shí)候還被問到怎么解決ListView圖片錯(cuò)亂的問題,我直接說我沒遇到過這個(gè)問題(==...我真沒遇到過),現(xiàn)在想來,是我使用的那些圖片加載框架已經(jīng)幫我處理了這個(gè)問題。


MemoryCache

MemoryCache這里使用了Android自帶的LruCache,全部代碼也就這么多

public class MemoryCache implements ImageCache {
    private LruCache<String, Bitmap> mMemoryCache;
    
    public MemoryCache() {
        final int MAX_MEMORY = (int) (Runtime.getRuntime().maxMemory() / 1024);
        final int CACHE_SIZE = MAX_MEMORY / 4;
        mMemoryCache = new LruCache<String, Bitmap>(CACHE_SIZE) {
            @Override
            protected int sizeOf(String key, Bitmap bitmap) {
                return bitmap.getByteCount() / 1024;
            }
        };
    }
    
    @Override
    public Bitmap get(String url) {
        return mMemoryCache.get(getKey(url));
    }
    
    public void put(String url, Bitmap bitmap) {
        mMemoryCache.put(getKey(url), bitmap);
    }
    
    private String getKey(String url) {
        return MD5Util.hashKeyFromUrl(url);
    }
    
    @Override
    public void remove(String url) {
        mMemoryCache.remove(getKey(url));
    }
}

這里就不講LruCache的原理了,有興趣可以看這篇徹底解析Android緩存機(jī)制——LruCache


DiskCache

DiskCache這里使用了第三方的DiskLruCache,用法可以參考郭霖大神的這篇Android DiskLruCache完全解析,硬盤緩存的最佳方案
主要的方法如下

public Bitmap get(String url, int reqWidth, int reqHeight) {
        Bitmap bitmap = getFromDiskCache(url, reqWidth, reqHeight);
        if (bitmap != null) {
            return bitmap;
        }
        downloadBitmapToDiskCache(url);
        return getFromDiskCache(url, reqWidth, reqHeight);
    }
    
    public void downloadBitmapToDiskCache(String url) {
        String key = MD5Util.hashKeyFromUrl(url);
        try {
            DiskLruCache.Editor editor = mDiskLruCache.edit(key);
            if (editor == null) {
                return;
            }
            // 由于在創(chuàng)建DiskLruCache的時(shí)候valueCount指定為1, 所以這里索引傳0就可以了
            OutputStream outputStream = editor.newOutputStream(0);
            if (mImageFetcher.downloadSuccess(url, outputStream)) {
                editor.commit();
            } else {
                editor.abort();
            }
            mDiskLruCache.flush();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    
    public Bitmap getFromDiskCache(String url, int reqWidth, int reqHeight) {
        String key = MD5Util.hashKeyFromUrl(url);
        try {
            DiskLruCache.Snapshot snapshot = mDiskLruCache.get(key);
            if (snapshot == null) {
                return null;
            }
            FileInputStream fis = (FileInputStream) snapshot.getInputStream(0);
            if (reqWidth <= 0 || reqHeight <= 0) {
                return BitmapFactory.decodeStream(fis);
            } else {
                return BitmapUtils.getSmallBitmap(fis.getFD(), reqWidth, reqHeight);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

ImageFetcher

ImageFetcher其實(shí)是一個(gè)接口類,里面包含了一個(gè)下載圖片到輸出流的方法

boolean downloadSuccess(String urlString, OutputStream outputStream);

然后我定義了一個(gè)UrlConnectionImageFetcher實(shí)現(xiàn)了這個(gè)接口,重寫了downloadSuccess(url, out)方法

@Override
    public boolean downloadSuccess(String urlString, OutputStream outputStream) {
        if (Looper.myLooper() == Looper.getMainLooper()) {
            throw new RuntimeException("Do not load Bitmap in main thread.");
        }
        HttpURLConnection urlConnection = null;
        BufferedOutputStream out = null;
        BufferedInputStream in = null;
        
        try {
            final URL url = new URL(urlString);
            urlConnection = (HttpURLConnection) url.openConnection();
            in = new BufferedInputStream(urlConnection.getInputStream());
            out = new BufferedOutputStream(outputStream);
            
            int len;
            byte[] buffer = new byte[8 * 1024];
            while ((len = in.read(buffer)) != -1) {
                out.write(buffer, 0, len);
            }
            return true;
        } catch (final Exception e) {
            Log.e(TAG, "Error in downloadBitmap - " + e);
        } finally {
            if (urlConnection != null) {
                urlConnection.disconnect();
            }
            CloseUtil.CloseQuietly(in);
            CloseUtil.CloseQuietly(out);
        }
        return false;
    }

為什么我要這樣做呢?其實(shí)是因?yàn)橐蕾嚨怪迷瓌t。假如DiskCache直接依賴于UrlConnectionImageFetcher,當(dāng)我想使用別的網(wǎng)絡(luò)框架比如OkHttp而不是HttpURLConnection來下載圖片時(shí),就必須修改DiskCache的代碼。而如果依賴抽象,假如我想用OkHttp來下載,只要再定義一個(gè)OkHttpImageFetcher實(shí)現(xiàn)ImageFetcher的接口,然后調(diào)用DiskCache的setImageFetcher(ImageFetcher fetcher)方法替換其中的ImageFetcher,DiskCache還是調(diào)用的ImageFetcher的downloadSuccess()方法,但是調(diào)用的卻是OkHttpImageFetcher中的具體代碼了。


結(jié)語

最后上一個(gè)github地址
https://github.com/mundane799699/SimpleImageLoader

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容