Glide/Coil في Kotlin: دليل شامل مع أمثلة عملية

ما هي Glide و Coil ولماذا نحتاج إليهما؟

في تطوير تطبيقات Android الحديثة، يُعد تحميل وعرض الصور من الشبكة أو الملفات المحلية أو الموارد من أكثر المهام شيوعًا. لكن مجرد تنزيل صورة وعرضها في ImageView لا يكفي. يجب مراعاة العديد من التفاصيل الدقيقة: التخزين المؤقت (لتوفير استهلاك البيانات)، معالجة الأخطاء (إذا فشل تحميل الصورة)، التحويلات (الصور الدائرية، التمويه)، دعم GIF والفيديو، بالإضافة إلى الرسوم المتحركة السلسة للظهور.

Glide و Coil هما أشهر مكتبتين لتحميل الصور في Kotlin/Android. تحلان جميع المشكلات المذكورة "بشكل جاهز".

• Glide — مكتبة قوية وناضجة من Google (جزئيًا). تدعم GIF والفيديو والتحويلات والرسوم المتحركة. لديها مجتمع ضخم.
• Coil — مكتبة أكثر حداثة وخفيفة ومكتوبة بالكامل بلغة Kotlin باستخدام Coroutines. تتكامل بشكل ممتاز مع Jetpack Compose.

في هذه المقالة، سنستعرض كلتا المكتبتين، حيث أنهما تحلان نفس المهام ولكن بطرق مختلفة. ستتمكن من اختيار الأنسب لمشروعك.

التثبيت

أضف التبعيات إلى ملف build.gradle.kts (مستوى الوحدة app):

لـ Glide:

dependencies {
    implementation("com.github.bumptech.glide:glide:4.16.0")
    kapt("com.github.bumptech.glide:compiler:4.16.0") // لـ GlideApp
}

لـ Coil:

dependencies {
    implementation("io.coil-kt:coil:2.6.0")
    // إذا كنت تستخدم Compose:
    implementation("io.coil-kt:coil-compose:2.6.0")
}

بعد الإضافة، قم بمزامنة المشروع (Sync Now).

بداية سريعة

لنقم بتحميل صورة بسيطة من الإنترنت إلى ImageView.

مثال باستخدام Glide:

// في Activity أو Fragment
val imageView: ImageView = findViewById(R.id.my_image_view)
val url = "https://example.com/image.jpg"

Glide.with(this)
    .load(url)
    .into(imageView)

مثال باستخدام Coil:

// في Activity أو Fragment
val imageView: ImageView = findViewById(R.id.my_image_view)
val url = "https://example.com/image.jpg"

imageView.load(url)

كما ترى، يقدم Coil بناء جملة أكثر إيجازًا من خلال دالة الامتداد load().

الطرق والوظائف الأساسية

فيما يلي الطرق الرئيسية للعمل مع الصور. لكل طريقة، سأعرض أمثلة لكلتا المكتبتين.

1. load() — تحميل الصورة

الوظيفة: الطريقة الأساسية التي تستقبل مصدر الصورة (URL، URI، File، Drawable، Bitmap).

المعلمات:

• url: String — رابط الصورة.
• uri: Uri — URI محلي.
• file: File — ملف.
• resourceId: Int — معرف المورد (R.drawable...).

مثال (Glide):

Glide.with(this)
    .load("https://example.com/photo.png")
    .into(imageView)

مثال (Coil):

imageView.load("https://example.com/photo.png")

2. placeholder() — صورة مؤقتة

الوظيفة: تعرض صورة مؤقتة أثناء تحميل الصورة الرئيسية.

المعلمات:

• placeholder: Int — معرف مورد drawable.

مثال (Glide):

Glide.with(this)
    .load(url)
    .placeholder(R.drawable.ic_loading)
    .into(imageView)

مثال (Coil):

imageView.load(url) {
    placeholder(R.drawable.ic_loading)
}

3. error() — صورة عند الخطأ

الوظيفة: تعرض صورة إذا فشل تحميل الصورة الرئيسية.