0Pricing
Android Academy · درس

تحميل الصور باستخدام Coil

حمّلوا صور الشبكة وخزّنوها مؤقتًا بكفاءة باستخدام Coil. طبّقوا التحويلات ‏(CircleCrop وRoundedCorners)، وتعاملوا مع العناصر النائبة والأخطاء.

تحميل الصور باستخدام Coil درس مجاني في Android Academy على CoddyKit. هذا هو الدرس 2 من أصل 6. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Android Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Android Academy 6 دروس في المجموع.

لماذا نحتاج إلى مكتبة للصور؟

إن تحميل الصور من الإنترنت أكثر تعقيدًا مما يبدو:

  • التنزيل في خيط يعمل في الخلفية
  • التخزين المؤقت على القرص وفي الذاكرة
  • فك الترميز بكفاءة (لتجنب أعطال نفاد الذاكرة)
  • عرض عنصر نائب أثناء التحميل
  • معالجة الأخطاء (رابط معطل أو عدم وجود شبكة)

تتعامل Coil مع كل ذلك في سطر واحد من الشيفرة.

ما هو Coil؟

إن Coil (Coroutine Image Loader) مكتبة حديثة لتحميل الصور في Android، ومصممة لـ Kotlin وCoroutines.

  • خفيفة — أصغر من Glide أو Picasso
  • مصممة أولًا لـ Kotlin مع دعم coroutines
  • واعية بدورة الحياة — تلغي عمليات التحميل تلقائيًا
  • تدعم GIF وSVG وإطارات الفيديو

إضافة Coil

أضف الاعتمادية في app/build.gradle:

// app/build.gradle
dependencies {
    implementation 'io.coil-kt:coil:2.6.0'
}

// Also make sure internet permission is in AndroidManifest.xml:
// <uses-permission android:name="android.permission.INTERNET" />

تحميل أساسي للصور

حمّل صورةً إلى ImageView في سطر واحد:

import coil.load

// In your Activity or Adapter:
binding.ivAvatar.load("https://picsum.photos/200")

// With a placeholder and error image:
binding.ivAvatar.load("https://picsum.photos/200") {
    placeholder(R.drawable.ic_placeholder)
    error(R.drawable.ic_error)
    crossfade(true)  // smooth fade-in animation
}

التحميل في RecyclerView

تلغي Coil عمليات التحميل المعلّقة تلقائيًا عند إعادة تدوير ViewHolder، ما يمنع ظهور صور خاطئة في صفوف غير صحيحة:

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val post = getItem(position)

    holder.tvTitle.text = post.title

    holder.ivCover.load(post.imageUrl) {
        placeholder(R.drawable.ic_image_placeholder)
        error(R.drawable.ic_broken_image)
        crossfade(300)  // 300ms fade-in
        size(200, 200)  // resize to 200×200 pixels
    }
}

التحويلات

طبّق التحويلات على الصور المحمّلة:

  • CircleCropTransformation() — لتحويل الصورة إلى شكل دائري (مناسب جدًا للصور الرمزية)
  • RoundedCornersTransformation(radius) — زوايا مستديرة
  • BlurTransformation(context, radius) — تأثير التمويه

مثال على التحويل

اعرض صورة رمزية دائرية للمستخدم:

import coil.load
import coil.transform.CircleCropTransformation
import coil.transform.RoundedCornersTransformation

// Circular avatar
binding.ivAvatar.load(user.profileImageUrl) {
    transformations(CircleCropTransformation())
    placeholder(R.drawable.ic_default_avatar)
    error(R.drawable.ic_default_avatar)
}

// Rounded corners on a card image
binding.ivCover.load(post.coverUrl) {
    transformations(RoundedCornersTransformation(16f))
    crossfade(true)
}

سلوك التخزين المؤقت

يخزّن Coil الصور مؤقتًا تلقائيًا على مستويين:

  • ذاكرة التخزين المؤقت — الأسرع، وتُمسح عند إيقاف التطبيق
  • تخزين القرص المؤقت — يستمر بين مرات تشغيل التطبيق، وحجمه الافتراضي 250 ميغابايت

إذا حُمّل عنوان URL نفسه مرتين، فسيأتي التحميل الثاني من ذاكرة التخزين المؤقت — من دون طلب شبكة.

التحميل من مصادر مختلفة

يمكن لـ Coil تحميل الصور من مصادر متنوعة، وليس من عناوين URL فقط:

// From a URL (most common)
imageView.load("https://example.com/image.jpg")

// From a URI (e.g., gallery image)
imageView.load(uri)

// From a drawable resource
imageView.load(R.drawable.my_image)

// From a File
imageView.load(File("/sdcard/photo.jpg"))

// From a bitmap
imageView.load(bitmap)

تحقق سريع

ما تحويل Coil الذي ستستخدمه لعرض صورة الملف الشخصي للمستخدم داخل دائرة؟

مراجعة: تحميل الصور باستخدام Coil

يمكنك الآن عرض صور الشبكة بكفاءة:

  • إضافة Coil باستخدام تبعية Gradle واحدة
  • imageView.load(url) { } — التحميل بسطر واحد
  • صور نائبة وصور بديلة عند حدوث خطأ
  • التحويلات: CircleCrop وRoundedCorners وBlur
  • التخزين المؤقت التلقائي على مستوى الذاكرة والقرص
  • يعمل مع عناوين URL وURIs والملفات وdrawable وbitmaps

التالي: عالج الأخطاء بسلاسة وقدّم للمستخدمين ملاحظات واضحة ومفيدة.

الأسئلة الشائعة

هل درس «تحميل الصور باستخدام Coil» مجاني؟

نعم — نص درس «تحميل الصور باستخدام Coil» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Android Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Android Academy 6 دروس في المجموع.

ماذا ستتعلم في «تحميل الصور باستخدام Coil»؟

حمّلوا صور الشبكة وخزّنوها مؤقتًا بكفاءة باستخدام Coil. طبّقوا التحويلات ‏(CircleCrop وRoundedCorners)، وتعاملوا مع العناصر النائبة والأخطاء. تتمرن على Android Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Android Academy؟

لا تُشترط خبرة سابقة. Android Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 6.

كم من الوقت يستغرق درس «تحميل الصور باستخدام Coil»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Android Academy هذا؟

نعم. كل درس في Android Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. Retrofit وواجهات REST API
  2. تحميل الصور باستخدام Coil
  3. معالجة الأخطاء وتجربة المستخدم
  4. الإشعارات الفورية
  5. WorkManager والمهام في الخلفية
  6. النشر على Play Store
← العودة إلى Android Academy