Coil — یہ کیا ہے، کلیدی تصورات اور Android میں ImageLoader

Coil کیا ہے؟

Coil (Coroutine Image Loader) Android پر تصاویر لوڈ کرنے کے لیے ایک لائبریری ہے، جو مکمل طور پر Kotlin میں لکھی گئی ہے اور غیر متزامن کارروائیوں کے لیے coroutines استعمال کرتی ہے۔ یہ نیٹ ورک، وسائل، فائل سسٹم اور Content Provider سے بٹ میپ تصاویر لوڈ کرنے کے لیے ایک متحد API فراہم کرتی ہے، خودکار کثیر سطحی کیشنگ کے ساتھ۔

Glide اور Picasso کے برعکس، Coil کال بیک زنجیروں کے بجائے Kotlin Coroutines استعمال کرتا ہے، جو کوڈ کو زیادہ لکیری اور پیش قیاسی بناتا ہے۔ تمام لوڈنگ اور ڈی کوڈنگ کارروائیاں Dispatchers.IO ڈسپیچر کے ذریعے پس منظر کے تھریڈز پر عمل میں لائی جاتی ہیں، اور نتائج واضح سوئچنگ کے بغیر مرکزی تھریڈ پر پہنچائے جاتے ہیں۔

Coil تبدیلیوں (Round، Blur، Grayscale)، منتقلی کی اینیمیشنز، SVG اور GIF کے ساتھ ساتھ غیر معیاری ڈسپلے کے لیے حسب ضرورت Targets کو سپورٹ کرتا ہے۔ Google I/O 2023 کے مطابق، Coil کو Glide کے ساتھ سرکاری Jetpack Compose ٹیوٹوریلز میں تجویز کیا گیا ہے۔

• APK سائز — تقریباً 150 KB (Glide کے 500 KB کے مقابلے میں)
• کم از کم Android ورژن — API 21 (Lollipop)
• انحصار — Kotlin Coroutines (بلٹ ان)

Coil کیسے کام کرتا ہے: ImageLoader اور ImageRequest

ImageLoader Coil کا مرکزی جزو ہے، جو لوڈنگ کی درخواستوں کو انجام دینے اور کیش کے انتظام کے لیے ذمہ دار ہے۔ ہر مثال میں MemoryCache، DiskCache، BitmapPool اور coroutines پول کے حوالے ہوتے ہیں۔ ڈیفالٹ طور پر، Coil.imageLoader(context) کے ذریعے بنایا گیا ایک سنگلٹن استعمال ہوتا ہے۔

ImageRequest

ImageRequest ایک آبجیکٹ ہے جو تصویر لوڈ کرنے کی ایک درخواست کو بیان کرتا ہے: ڈیٹا کا ذریعہ (URL، URI، Int وسیلہ)، ہدف ImageView یا Target، تبدیلیاں، کیش کی ترتیبات اور placeholder۔ ImageRequest ایک بلڈر کے ذریعے بنایا جاتا ہے، جو لچک اور پڑھنے کی اہلیت کو یقینی بناتا ہے۔

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()

بننے کے بعد، ImageRequest enqueue یا execute کے ذریعے ImageLoader کو بھیجا جاتا ہے۔ enqueue طریقہ ایک coroutine شروع کرتا ہے اور ایک Disposable لوٹاتا ہے، جو اسکرین چھوڑنے پر لوڈنگ منسوخ کرنے کی اجازت دیتا ہے۔ execute طریقہ ایک suspend فنکشن ہے جو براہ راست Result لوٹاتا ہے۔

درخواست پر عمل درآمد کا بہاؤ

ImageLoader ترتیب وار MemoryCache، DiskCache کو چیک کرتا ہے، اور صرف دونوں کے ناکام ہونے پر HttpEngine کے ذریعے نیٹ ورک کی درخواست انجام دیتا ہے۔ لوڈنگ کے بعد، بائٹس کو ہدف کے سائز کو مدنظر رکھتے ہوئے Bitmap میں ڈی کوڈ کیا جاتا ہے، تبدیلیاں لاگو کی جاتی ہیں، نتیجہ دونوں کیشوں میں محفوظ کیا جاتا ہے اور Target کو بھیجا جاتا ہے۔

• Memory Cache — پہلے چیک کیا جاتا ہے، کلید URL + پیرامیٹرز ہے
• Disk Cache — میموری کی ناکامی پر چیک کیا جاتا ہے، کلید URL کا MD5 ہے
• HttpEngine — ڈیفالٹ طور پر OkHttp، جزو کے ذریعے حسب ضرورت

Coil کے بنیادی اجزاء

Coil ایک جزو فن تعمیر پر بنایا گیا ہے جس میں انحصار انجیکشن کے ذریعے کسی بھی حصے کو تبدیل کرنے کی صلاحیت ہے۔ تمام اجزاء ImageLoaderFactory میں رجسٹر ہوتے ہیں اور بلڈر کے ذریعے ImageLoader کنسٹرکٹر کو بھیجے جاتے ہیں۔

ImageLoader

ImageLoader تمام لوڈنگ کارروائیوں کا داخلہ نقطہ ہے۔ ہر مثال میں coroutines پول، BitmapPool، MemoryCache، DiskCache اور انٹرسیپٹرز کی ایک فہرست ہوتی ہے۔ ڈیفالٹ طور پر، ایک عالمی مثال بنائی جاتی ہے، لیکن یونٹ ٹیسٹنگ کے لیے، الگ تھلگ کیشوں کے ساتھ علیحدہ مثالیں بنائی جا سکتی ہیں۔

MemoryCache

MemoryCache LRU (Least Recently Used) پر مبنی ایک میموری میں کیش ہے جو ڈی کوڈ شدہ Bitmap آبجیکٹس کو محفوظ کرتا ہے۔ ڈیفالٹ زیادہ سے زیادہ سائز دستیاب ایپلیکیشن میموری کا 25% ہے، لیکن 32 MB سے کم نہیں۔ کیش کی کلید URL + سائز + تبدیلیوں سے بنتی ہے، جو پرانی تصویر کی بازیافت کو روکتی ہے۔

DiskCache

DiskCache خام ڈیٹا (JPEG، PNG، WebP) اور ڈی کوڈ شدہ میٹا ڈیٹا کے لیے فائل پر مبنی کیش ہے۔ یہ ایپلیکیشن کی کیش ڈائریکٹری میں واقع ہے اور حد سے تجاوز کرنے پر خودکار صفائی کو سپورٹ کرتا ہے۔ ڈسک کی کارروائیاں ڈائریکٹری اور زیادہ سے زیادہ سائز کی ترتیب کے ساتھ DiskCache.Builder کے ذریعے انجام دی جاتی ہیں۔

Coil میں کیشنگ کی سطحیں

Coil ایک کثیر سطحی کیشنگ حکمت عملی نافذ کرتا ہے جو نیٹ ورک کی درخواستوں کو کم سے کم کرتی ہے اور تصویر کی نمائش کو تیز کرتی ہے۔ ہر سطح کا اپنا مقصد اور ڈیٹا کی زندگی کا دورانیہ ہوتا ہے۔

Memory Cache پہلے سے ڈی کوڈ شدہ Bitmaps تک فوری رسائی فراہم کرتا ہے۔ Disk Cache پہلی لوڈنگ کے بعد نیٹ ورک کے بغیر (آف لائن فرسٹ) ایپلیکیشن کے کام کو یقینی بناتا ہے۔ OkHttp سطح پر Http Cache ETag اور If-Modified-Since کے ساتھ مشروط درخواستوں کو ہینڈل کرتا ہے۔

کیشنگ پالیسیاں CachePolicy کے ذریعے فی درخواست تین اقدار کے ساتھ ترتیب دی جاتی ہیں: ENABLED، READ_ONLY، WRITE_ONLY، DISABLED۔ مثال کے طور پر، صارف کے اوتار کے لیے، Memory Cache کے لیے READ_ONLY اور Disk Cache کے لیے ENABLED سیٹ کیا جا سکتا ہے۔

Kotlin میں Coil استعمال کی مثالیں

Coil ایپلیکیشن فن تعمیر کے لحاظ سے کئی انضمام کے طریقے فراہم کرتا ہے۔ آئیے کام کرنے والی کوڈ مثالوں کے ساتھ تین اہم منظرناموں کا جائزہ لیتے ہیں۔

توسیع کے ذریعے ImageView میں لوڈ کرنا

load ImageView کے لیے ایک توسیعی فنکشن ہے، ایک لائن میں تصویر لوڈ کرنے کا سب سے آسان طریقہ۔ یہ فنکشن URL، URI، Int وسیلہ یا File کو لیمبڈا کنفیگریٹر کے ذریعے تمام اختیاری پیرامیٹرز کے ساتھ قبول کرتا ہے۔

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

load طریقہ ایک Disposable لوٹاتا ہے، جسے onDestroy میں یا View کے دوبارہ استعمال پر منسوخ کیا جا سکتا ہے۔ یہ تیز فہرست اسکرولنگ کے دوران میموری لیک اور غیر ضروری نیٹ ورک درخواستوں کو روکتا ہے۔

Jetpack Compose میں استعمال

AsyncImage اعلانیہ UI میں تصاویر لوڈ کرنے کے لیے ایک composable فنکشن ہے۔ یہ کسی بھی ڈیٹا سورس اور حالتوں کے لیے تین اختیاری پیرامیٹرز قبول کرتا ہے: placeholder، error اور success۔

@Composable
fun NetworkImage(url: String) {
    AsyncImage(
        model = url,
        contentDescription = "نیٹ ورک تصویر",
        placeholder = ColorPainter(Color.Gray),
        error = ColorPainter(Color.Red)
    )
}

SubcomposeAsyncImage ایک زیادہ لچکدار ورژن ہے جو مواد کے سلاٹ کے ذریعے لوڈنگ کے دوران ڈسپلے کو حسب ضرورت بنانے کی اجازت دیتا ہے۔ یہ کنکال (shimmer) اور پیش رفت بارز کے لیے مفید ہے۔

غیر معیاری آؤٹ پٹ کے لیے حسب ضرورت Target

اگر ImageView یا AsyncImage موزوں نہیں ہیں، تو آپ ایک Target لاگو کر سکتے ہیں جس میں ایک onSuccess طریقہ ہے جو Bitmap قبول کرتا ہے۔ یہ Notification، RemoteViews یا OpenGL ٹیکسچر میں لوڈ کرنے کے لیے استعمال ہوتا ہے۔

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()
)

دیگر لائبریریوں کے ساتھ Coil کا موازنہ

تصویر لوڈ کرنے والی لائبریری کا انتخاب پروجیکٹ کی ضروریات پر منحصر ہے۔ Coil Glide اور Picasso کے ساتھ مقابلہ کرتا ہے، ہر ایک کی اپنی طاقت ہے۔ اہم خصوصیات کا موازنہ جدول میں پیش کیا گیا ہے۔

Kotlin اور Jetpack Compose پر نئے پروجیکٹس کے لیے، Coil صفر اضافی coroutine انحصار اور کم سے کم سائز کی وجہ سے قدرتی انتخاب بن جاتا ہے۔ Glide اینیمیشنز اور ویڈیو پیش نظارہ والے پیچیدہ منظرناموں کے لیے ترجیحی رہتا ہے۔ Picasso فعالیت میں دونوں سے پیچھے ہے لیکن سادگی میں جیتتا ہے۔

Android پروجیکٹ میں Coil کی ترتیب

Android پروجیکٹ میں Coil کا اضافہ Gradle انحصار کے ذریعے کیا جاتا ہے۔ شامل کرنے کے بعد، لائبریری ContentProvider کے ذریعے خود بخود ایک ImageLoader رجسٹر کرتی ہے، لہذا Application میں دستی ابتدا کی ضرورت نہیں ہے۔ اگر حسب ضرورت کی ضرورت ہو تو، بلڈر کے ذریعے ایک حسب ضرورت ImageLoader بنایا جاتا ہے۔

// build.gradle.kts (app module)
dependencies {
    implementation("io.coil-kt:coil:2.6.0")
    // Jetpack Compose کے لیے اضافی:
    implementation("io.coil-kt:coil-compose:2.6.0")
    // SVG سپورٹ کے لیے:
    implementation("io.coil-kt:coil-svg:2.6.0")
    // GIF سپورٹ کے لیے:
    implementation("io.coil-kt:coil-gif:2.6.0")
}

ImageLoader کو حسب ضرورت بنانے کے لیے، ImageLoaderFactory استعمال کیا جاتا ہے — Application.onCreate میں بنایا گیا ایک سنگلٹن۔ فیکٹری میں، آپ کیش کی حدیں، HTTP کلائنٹ، حسب ضرورت ڈی کوڈرز اور لاگنگ ترتیب دے سکتے ہیں۔ ڈیفالٹ طور پر، Coil ایک تیار کنکشن پول کے ساتھ OkHttp استعمال کرتا ہے۔

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()
    }
}