Coil—讓圖片加載像點(diǎn)外賣一樣簡(jiǎn)單！

作者：沐雨花飛碟 2025-05-19 08:24:29

如果你正在開(kāi)發(fā)新項(xiàng)目，或者對(duì)現(xiàn)有圖片加載庫(kù)不滿意，不妨試試這個(gè)"00后"的新秀。畢竟，用??Kotlin??寫??Android??，當(dāng)然要配個(gè)??Kotlin??親兒子級(jí)別的圖片庫(kù)啦！

當(dāng)圖片加載遇見(jiàn)Kotlin魔法 ?，最近翻到之前的開(kāi)發(fā)筆記，發(fā)現(xiàn)當(dāng)年寫的Coil框架源碼分析簡(jiǎn)直像天書！作為一款專為Kotlin而生的圖片庫(kù)，Coil用起來(lái)就像給ImageView施魔法—一行代碼就能讓網(wǎng)絡(luò)圖片閃現(xiàn)到屏幕上。今天就帶大家看看這個(gè)"00后"圖片庫(kù)，是如何把Fresco、Glide這些"老前輩"拍在沙灘上的！

圖片加載七步成詩(shī)

無(wú)論什么框架，加載圖片都像做菜

1. ?? 下單（構(gòu)造請(qǐng)求）

2. ?? 查備忘錄（內(nèi)存緩存）

3. ?? 叫外賣（網(wǎng)絡(luò)請(qǐng)求）

4. ??? 翻冰箱（磁盤緩存）

5. ?? 拆包裝（解碼數(shù)據(jù)）

6. ?? 擺盤（數(shù)據(jù)轉(zhuǎn)換）

7. ??? 上菜（顯示圖片）

下面我們跟著一張圖片的外賣之旅，看看Coil的廚房是怎么運(yùn)作的~

先來(lái)段魔法咒語(yǔ)

給ImageView施法：

// 就像給手機(jī)貼膜這么簡(jiǎn)單
holder.imageView.load("http://www.rairmmd.com/2025-05-17.jpg") {
    placeholder(R.drawable.loading) // 加載時(shí)的旋轉(zhuǎn)小菊花
    error(R.drawable.error)      // 加載失敗時(shí)顯示狗頭
    transformations(CircleCropTransformation()) // 把圖片切成圓形
    size(512, 512) // 告訴快遞小哥要多大尺寸的圖
}

這段代碼就像在ImageView上貼了個(gè)"餓了么"按鈕——點(diǎn)一下就開(kāi)始自動(dòng)配送圖片。背后的ImageLoader就像美團(tuán)外賣系統(tǒng)，全局只需要一個(gè)配送中心。

配置你的專屬外賣站

val imageLoader = ImageLoader.Builder(context)
    .crossfade(300) // 開(kāi)啟漸變動(dòng)效，像奶茶緩緩倒入杯中
    .memoryCache {
        MemoryCache.Builder()
            .maxSizePercent(0.3) // 內(nèi)存緩存占30%，就像外賣柜的格子數(shù)
    }
    .diskCache {
        DiskCache.Builder()
            .maxSizeBytes(1024 * 1024 * 500) // 500MB磁盤空間，夠存5000張縮略圖
    }
    .components { // 注冊(cè)各種解碼器，就像接單不同菜系的廚師
        add(SvgDecoder.Factory()) // SVG矢量圖處理
        add(GifDecoder.Factory()) // GIF動(dòng)圖專家
        add(VideoFrameDecoder.Factory()) // 視頻截幀小能手
    }
    .build()

這個(gè)配置就像開(kāi)了一家全能餐廳：能處理各種圖片格式，內(nèi)存緩存像智能外賣柜自動(dòng)管理，還能從視頻里抓取關(guān)鍵幀當(dāng)封面圖！

黑科技緩存策略

內(nèi)存緩存：智能雙層外賣柜

internal class RealMemoryCache(
    private val strongMemoryCache: StrongMemoryCache, // 顯眼位置的貨架
    private val weakMemoryCache: WeakMemoryCache // 角落的臨時(shí)儲(chǔ)物區(qū)
) : MemoryCache {
    override fun get(key: Key): Value? {
        return strongMemoryCache.get(key) ?: weakMemoryCache.get(key) // 從角落找到就放到顯眼位置
    }

    override fun set(key: Key, value: Value) {
        strongMemoryCache.set(key, value)
    }
}

? 強(qiáng)引用緩存是顯眼位置，保證常用餐品隨取隨用

? 弱引用緩存是備用區(qū)，當(dāng)內(nèi)存吃緊時(shí)自動(dòng)清理

? 再次訪問(wèn)時(shí)會(huì)自動(dòng)"提升"緩存等級(jí)

內(nèi)部組合了兩種緩存機(jī)制：

? StrongMemoryCache基于LruCache的強(qiáng)引用緩存，直接決定緩存項(xiàng)的存留。當(dāng)緩存空間不足時(shí)，會(huì)按LRU（最近最少使用）策略移除條目。

? WeakMemoryCache基于WeakReference的弱引用緩存，被動(dòng)接收從強(qiáng)緩存中移除的條目。這些條目不會(huì)被主動(dòng)管理，只有在內(nèi)存充足時(shí)才能存活。

磁盤緩存：極速存取方案

// 使用Okio實(shí)現(xiàn)的LRU緩存
class CoilDiskCache(
    maxSize: Long = 512L * 1024 * 1024,
    directory: File = context.cacheDir.resolve("coil_cache")
) {
    private val diskLruCache = DiskLruCache(
        fileSystem = FileSystem.SYSTEM,
        directory = directory,
        maxSize = maxSize
    )
    
    // 第一個(gè)文件存數(shù)據(jù)
    fun read(key: String): BufferedSource {
        return diskLruCache.get(key)?.getSource(0) ?: throw FileNotFoundException()
    }
    
    // 像往快遞柜存包裹
    fun write(key: String): BufferedSink {
        return diskLruCache.edit(key)?.newSink(0) ?: throw IOException()
    }
}

? 每個(gè)緩存項(xiàng)存兩個(gè)文件（數(shù)據(jù)+元數(shù)據(jù)）

? 使用Okio的緩沖區(qū)技術(shù)，讀取速度提升

? 自動(dòng)清理舊緩存，像智能快遞柜過(guò)期自動(dòng)清理

擴(kuò)展性：樂(lè)高積木式設(shè)計(jì)

Coil最驚艷的是它的可擴(kuò)展性，就像玩樂(lè)高。

// 自己造個(gè)圓形圖片解碼器
class CircleDecoder(
    private val context: Context
) : Decoder {
    override fun decode(source: BufferedSource): Bitmap {
        val bitmap = BitmapFactory.decodeStream(source.inputStream())
        return Bitmap.createBitmap(bitmap.width, bitmap.height, Bitmap.Config.ARGB_8888).apply {
            Canvas(this).apply {
                val paint = Paint().apply {
                    shader = BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
                }
                drawCircle(width/2f, height/2f, width/2f, paint)
            }
        }
    }
}

// 注冊(cè)到全局配置
ImageLoader.Builder(context)
    .components { add(CircleDecoder(context)) }.build()

可以輕松擴(kuò)展這些功能：

? ? 新型圖片格式支持（WebP/HEIC）

? ? 自定義緩存策略（比如永遠(yuǎn)緩存用戶頭像）

? ? 圖片處理流水線（先加水印再高斯模糊）

? ? 網(wǎng)絡(luò)層替換（改用Ktor或者Retrofit）

開(kāi)發(fā)小技巧

預(yù)加載圖片就像訂早餐

// 提前把用戶可能要看的圖加載到緩存
imageLoader.enqueue(
    ImageRequest.Builder(context)
        .data("http://www.rairmmd.com/2025-05-17.jpg")
        .size(1024, 1024)
        .build()
)

監(jiān)聽(tīng)加載過(guò)程就像外賣軌跡

imageView.load(url) {
    listener(
        onStart = { showLoading() },
        onSuccess = { hideLoading() },
        onError = { showRetryButton() }
    )
}

合并請(qǐng)求就像拼單

// 同時(shí)加載多個(gè)圖片時(shí)自動(dòng)合并網(wǎng)絡(luò)請(qǐng)求
val imageLoader = ImageLoader.Builder(context).okHttpClient {
    OkHttpClient.Builder().dispatcher(Dispatcher().apply {
        maxRequests = 4       // 最大4個(gè)并發(fā)請(qǐng)求
        maxRequestsPerHost = 2 // 每個(gè)域名最多2個(gè)
    }).build()
}.build()