Coil — ano ito, mga pangunahing konsepto at ImageLoader sa Android

Ano ang Coil?

Coil (Coroutine Image Loader) — ay isang library para sa pag-load ng mga larawan sa Android, na ganap na isinulat sa Kotlin at gumagamit ng mga coroutine para sa asynchronous na trabaho. Nagbibigay ito ng pinag-isang API para sa pag-load ng mga bitmap na larawan mula sa network, mga resource, file system at Content Provider, na may awtomatikong caching sa maraming antas.

Hindi tulad ng Glide at Picasso, gumagamit ang Coil ng Kotlin Coroutines sa halip na callback chain, na ginagawang mas linear at predictable ang code. Lahat ng pag-load at pag-encode ay ginagawa sa background threads sa pamamagitan ng Dispatchers.IO, at ang resulta ay inihahatid sa main thread nang walang explicit na paglipat.

Sinusuportahan ng Coil ang mga transformasyon (Round, Blur, Grayscale), transition animation, SVG at GIF, pati na rin ang custom na Target para sa hindi karaniwang pagpapakita. Ayon sa Google I/O 2023, inirerekomenda ang Coil sa mga opisyal na tutorial ng Jetpack Compose kasama ng Glide.

• Laki ng APK — mga 150 KB (kumpara sa 500 KB sa Glide)
• Minimum na bersyon ng Android — API 21 (Lollipop)
• Dependency — Kotlin Coroutines (built-in)

Paano gumagana ang Coil: ImageLoader at ImageRequest

ImageLoader — ang pangunahing bahagi ng Coil na responsable sa pagsasagawa ng mga request sa pag-load at pamamahala ng cache. Ang bawat instance ay naglalaman ng mga reference sa MemoryCache, DiskCache, BitmapPool at pool ng mga coroutine. Bilang default, ginagamit ang singleton na nilikha sa pamamagitan ng Coil.imageLoader(context).

ImageRequest

ImageRequest — object na naglalarawan ng isang request sa pag-load ng larawan: source ng data (URL, URI, Int resource), target na ImageView o Target, mga transformasyon, setting ng caching at placeholder. Ang ImageRequest ay binuo sa pamamagitan ng builder, na nagbibigay ng flexibility at readability.

val request = ImageRequest.Builder(context)
    .data("https://example.com/image.jpg")
    .crossfade(true)
    .size(512, 512)
    .transformations(listOf(RoundedCornersTransformation(12f)))
    .memoryCachePolicy(CachePolicy.ENABLED)
    .diskCachePolicy(CachePolicy.ENABLED)
    .target(imageView)
    .build()

Pagkatapos mabuo, ang ImageRequest ay ipinapasa sa ImageLoader sa pamamagitan ng enqueue o execute. Ang enqueue method ay naglulunsad ng coroutine at nagbabalik ng Disposable, na nagpapahintulot sa pagkansela ng pag-load kapag umalis sa screen. Ang execute method ay isang suspend-function na direktang nagbabalik ng Result.

Daloy ng pag-execute ng request

Sunod-sunod na sinusuri ng ImageLoader ang MemoryCache, DiskCache at kapag parehong hindi natagpuan, nagsasagawa ng network request sa pamamagitan ng HttpEngine. Pagkatapos ma-load, ang bytes ay dinedecode sa Bitmap na isinasaalang-alang ang target na laki, inaapply ang mga transformasyon, ang resulta ay nai-save sa parehong cache at ipinapasa sa Target.

• Memory Cache — sinusuri muna, key — URL + parameters
• Disk Cache — sinusuri kapag wala sa memorya, key — MD5 ng URL
• HttpEngine — default ay OkHttp, pwedeng i-customize sa pamamagitan ng component

Mga pangunahing bahagi ng Coil

Ang Coil ay binuo sa component architecture na may kakayahang palitan ang anumang bahagi sa pamamagitan ng Dependency Injection. Lahat ng component ay nirerehistro sa ImageLoaderFactory at ipinapasa sa constructor ng ImageLoader sa pamamagitan ng builder.

ImageLoader

ImageLoader — entry point para sa lahat ng operasyon ng pag-load. Ang bawat instance ay naglalaman ng coroutine pool, BitmapPool, MemoryCache, DiskCache at listahan ng mga interceptor. Bilang default, isang global instance ang nilikha, ngunit para sa modular testing, maaaring gumawa ng magkakahiwalay na instance na may isolated na cache.

MemoryCache

MemoryCache — in-memory cache na batay sa LRU (Least Recently Used) na nag-iimbak ng mga na-decode na Bitmap object. Ang default na maximum size ay 25% ng available memory ng application, ngunit hindi bababa sa 32 MB. Ang cache key ay nabuo mula sa URL + size + transformations, na nagbubukod ng pagbibigay ng hindi napapanahong larawan.

DiskCache

DiskCache — file cache para sa raw data (JPEG, PNG, WebP) at na-decode na metadata. Matatagpuan sa cache directory ng application at sumusuporta sa automatic na paglilinis kapag lumampas sa limit. Ang trabaho sa disk ay ginagawa sa pamamagitan ng DiskCache.Builder na may setting ng directory at maximum size.

Mga antas ng caching sa Coil

Coil ay nag-iimplementa ng multi-level na caching strategy na nagmi-minimize ng network requests at nagpapabilis ng pagpapakita ng mga larawan. Bawat antas ay may sariling layunin at lifespan ng data.

Ang Memory Cache ay nagbibigay ng agarang access sa mga na-decode na bitmap. Ang Disk Cache ay ginagarantiyahan ang paggana ng application nang walang network (offline-first) pagkatapos ng unang pag-load. Http Cache sa antas ng OkHttp ay nagpro-process ng conditional requests na ETag at If-Modified-Since.

Ang mga patakaran sa caching ay naka-configure per-request sa pamamagitan ng CachePolicy na may tatlong value: ENABLED, READ_ONLY, WRITE_ONLY, DISABLED. Halimbawa, para sa mga avatar ng user, maaaring itakda ang READ_ONLY para sa Memory Cache at ENABLED para sa Disk Cache.

Mga halimbawa ng paggamit ng Coil sa Kotlin

Nag-aalok ang Coil ng ilang paraan ng integrasyon depende sa arkitektura ng application. Tingnan natin ang tatlong pangunahing senaryo na may mga gumaganang halimbawa ng code.

Pag-load sa ImageView sa pamamagitan ng extension

load — extension function para sa ImageView, ang pinakasimpleng paraan upang mag-load ng larawan sa isang linya. Ang function ay tumatanggap ng URL, URI, Int resource o File at lahat ng opsyonal na parameter sa pamamagitan ng lambda configurator.

imageView.load("https://example.com/photo.jpg") {
    crossfade(true)
    placeholder(R.drawable.placeholder)
    error(R.drawable.error)
    size(300, 300)
    transformations(CircleCropTransformation())
}

Ang load method ay nagbabalik ng Disposable na maaaring kanselahin sa onDestroy o sa muling paggamit ng View. Pinipigilan nito ang memory leaks at hindi kinakailangang network requests sa mabilis na pag-scroll ng listahan.

Paggamit sa Jetpack Compose

AsyncImage — composable function para sa pag-load ng mga larawan sa declarative UI. Tumatanggap ng anumang source ng data at tatlong opsyonal na parameter para sa mga estado: placeholder, error at success.

@Composable
fun NetworkImage(url: String) {
    AsyncImage(
        model = url,
        contentDescription = "larawan sa network",
        placeholder = ColorPainter(Color.Gray),
        error = ColorPainter(Color.Red)
    )
}

SubcomposeAsyncImage — mas flexible na bersyon na nagpapahintulot sa pag-customize ng display habang naglo-load sa pamamagitan ng content slot. Ito ay kapaki-pakinabang para sa mga skeleton (shimmer) at progress bar.

Custom na Target para sa hindi karaniwang output

Kung hindi angkop ang ImageView o AsyncImage, maaaring i-implement ang Target na may iisang method na onSuccess na tumatanggap ng Bitmap. Ito ay ginagamit para sa pag-load sa Notification, RemoteViews o OpenGL texture.

val target = object : BitmapTarget() {
    override fun onSuccess(result: Bitmap) {
        notificationRemoteView.setImageViewBitmap(R.id.icon, result)
    }
}

imageLoader.enqueue(
    ImageRequest.Builder(context)
        .data(url)
        .target(target)
        .build()
)

Paghahambing ng Coil sa iba pang mga library

Ang pagpili ng library para sa pag-load ng mga larawan ay depende sa mga kinakailangan ng proyekto. Coil ay nakikipagkumpitensya sa Glide at Picasso, na bawat isa ay may kanya-kanyang kalakasan. Ang paghahambing ng mga pangunahing katangian ay ipinapakita sa talahanayan.

Para sa mga bagong proyekto sa Kotlin at Jetpack Compose, ang Coil ay nagiging natural na pagpipilian dahil sa zero additional dependency sa coroutine at minimal na laki. Ang Glide ay nananatiling mas gusto para sa mga kumplikadong senaryo na may mga animation at video preview. Ang Picasso ay mas mababa sa pareho sa functionality, ngunit nananalo sa pagiging simple.

Pag-set up ng Coil sa Android project

Ang pagkonekta ng Coil sa Android project ay ginagawa sa pamamagitan ng Gradle dependency. Pagkatapos maidagdag, awtomatikong nirerehistro ng library ang ImageLoader sa pamamagitan ng ContentProvider, kaya hindi kinakailangan ang manual initialization sa Application. Kung kailangan ng customization, ang sariling ImageLoader ay nilikha sa pamamagitan ng builder.

// build.gradle.kts (app module)
dependencies {
    implementation("io.coil-kt:coil:2.6.0")
    // Karagdagang para sa Jetpack Compose:
    implementation("io.coil-kt:coil-compose:2.6.0")
    // Para sa SVG support:
    implementation("io.coil-kt:coil-svg:2.6.0")
    // Para sa GIF support:
    implementation("io.coil-kt:coil-gif:2.6.0")
}

Para i-customize ang ImageLoader, ginagamit ang ImageLoaderFactory — singleton na nilikha sa Application.onCreate. Sa factory, maaaring i-configure ang cache limits, HTTP client, custom decoders at logging. Bilang default, gumagamit ang Coil ng OkHttp na may ready connection pool.

class App : Application(), ImageLoaderFactory {
    override fun newImageLoader(): ImageLoader {
        return ImageLoader.Builder(this)
            .memoryCache {
                MemoryCache.Builder()
                    .maxSizePercent(0.25)
                    .build()
            }
            .diskCache {
                DiskCache.Builder()
                    .directory(cacheDir.resolve("coil_cache"))
                    .maxSizeBytes(512 * 1024 * 1024)
                    .build()
            }
            .build()
    }
}