CALayer: ما هو، المفاهيم الأساسية وعرض الطبقات

ما هو CALayer؟

CALayer هي فئة من إطار عمل QuartzCore تدير صورة نقطية لمنطقة مستطيلة من الشاشة. تخزن الخصائص المرئية: frame، backgroundColor، opacity، shadow، border، transform. على عكس UIView، لا تتعامل CALayer مع أحداث اللمس، ولا تشارك في Auto Layout، وليس لها دورة حياة view controller.

من الناحية المعمارية، تطبق CALayer نمط Model في سياق Core Animation. تخزن الطبقة حالة الخصائص المرئية، بينما يدير Core Animation الاستيفاء بين الحالات أثناء الحركة. هذا الفصل يسمح بتحريك أي خصائص للطبقة دون الحاجة إلى إعادة رسم المحتوى عبر drawRect.

وفقاً Apple WWDC 2024، تمت إعادة كتابة CALayer للعمل عبر Metal. يتضمن خط أنابيب العرض الحديث ثلاث مراحل: Commit (تحديث الخصائص على CPU)، Render (توليد أوامر GPU على CPU)، وComposite (تنفيذ الأوامر على GPU). تشارك CALayer في جميع المراحل الثلاث، وتوفر البيانات لكل منها.

يمكن أن تحتوي كل طبقة على sublayers — طبقات فرعية تُعرض فوق الطبقة الأم. يعكس تسلسل الطبقات تسلسل UIView ولكن يمكن أن يوجد بشكل مستقل عنه. يمكن للمطورين إنشاء طبقات بشكل مستقل عن UIView من خلال CALayer() وإضافتها إلى التسلسل عبر addSublayer.

الفرق بين CALayer و UIView

UIView هو غلاف حول CALayer يضيف: معالجة اللمس عبر UIResponder، المشاركة في Auto Layout، التمثيل في storyboard، والتكامل مع UIViewController. CALayer هو كائن خفيف يمكن استخدامه بدون UIView للعناصر المرئية البحتة.

من الناحية العملية، هذا يعني أنه إذا كان العنصر لا يحتاج إلى معالجة اللمس أو layout، يمكن تنفيذه كـ CALayer. على سبيل المثال، الرسوم المتحركة للخلفية، مؤشرات التحميل، العناصر الزخرفية — كل هذه أكثر كفاءة عند تنفيذها عبر CALayer، لتجنب الحمل الزائد لـ UIView.

الخصائص الرئيسية لـ CALayer

الخصائص الأساسية لـ CALayer تشمل frame، التموضع، العرض والتأثيرات المرئية. يحدد frame المنطقة المستطيلة للطبقة بإحداثيات الأصل، يحدد bounds الإحداثيات الداخلية، ويحدد position مركز الطبقة. يتم تحريك تغيير position افتراضياً من خلال animation ضمني.

• backgroundColor — لون خلفية الطبقة (CGColor). تعيين لون غير شفاف مع opaque = true يلغي مزج ألفا.
• cornerRadius — تدوير الزوايا. معالجة عبر الأجهزة بدون تمريرات عرض إضافية.
• borderWidth و borderColor — حدود الطبقة. يُعرض على GPU، لا يتطلب drawRect.
• shadowOffset، shadowRadius، shadowOpacity، shadowPath — الظل. shadowPath صريح يسرع العرض بشكل كبير.
• opacity — شفافية الطبقة من 0.0 إلى 1.0. يُحرك دون استدعاء drawRect.
• transform — CATransform3D للتحويلات ثنائية وثلاثية الأبعاد. يدعم تشوهات المنظور.

الخاصية contents تسمح بتعيين محتوى نقطي مباشرة — عبر CGImage أو CIImage. هذا بديل للرسم عبر drawRect: إذا كانت الصورة جاهزة بالفعل، يمكن تمريرها إلى contents، وسيقوم Core Animation بعرضها دون معالجة إضافية.

للرسوم المتحركة، تُستخدم CABasicAnimation و CAKeyframeAnimation و CATransition. كل هذه الفئات تعمل من خلال key paths لخصائص CALayer، مما يسمح بتحريك أي سمة تقريباً — من position إلى transform.rotation.z.

الفئات الفرعية لـ CALayer والغرض منها

Apple توفر عدة فئات فرعية متخصصة من CALayer، كل منها يحل مهمة محددة. اختيار الفئة الفرعية المناسبة بدلاً من CALayer الأساسي يمكن أن يوفر تحسينات كبيرة في الأداء من خلال تسريع الأجهزة.

• CAShapeLayer — يعرض الأشكال المتجهة (CGPath) على GPU. لا يتطلب مخزناً مؤقتاً منفصلاً — يتم عرض الشكل كجزء من تكوين الطبقة الأم.
• CATextLayer — عرض النص بتنعيم تحت البكسل. يخزن الحروف الرسومية مؤقتاً، مما يسرع عرض النص المتكرر.
• CAGradientLayer — التدرجات الخطية والشعاعية. عرض عبر الأجهزة دون إنشاء صور وسيطة.
• CAEmitterLayer — نظام جسيمات على GPU. كل جسيم يُعرض كعنصر منفصل دون مشاركة CPU.
• CAReplicatorLayer — إنشاء تلقائي لنسخ الطبقات الفرعية بإزاحات قابلة للتكوين في الموقع واللون والوقت.
• CATiledLayer — عرض الصور الكبيرة عبر البلاطات. يقوم بتحميل وعرض الأجزاء المرئية فقط.

CAReplicatorLayer مفيد بشكل خاص لإنشاء أنماط متكررة دون تكرار الكود. على سبيل المثال، مؤشر تحميل بـ 10 نقاط يتم تنفيذه باستخدام CAReplicatorLayer واحد مع instanceCount = 10 وإزاحة وقت الرسوم المتحركة instanceDelay.

عرض وتكوين CALayer

عرض CALayer يتم في ثلاث مراحل. Commit — عندما تتغير خاصية الطبقة، يتم تشكيل مجموعة تغييرات على CPU. Render — يقوم Core Animation بتوليد أوامر Metal على CPU بناءً على خصائص الطبقة. Composite — تقوم GPU بتنفيذ الأوامر وعرض الإطار على الشاشة. العملية بأكملها متزامنة مع معدل تحديث الشاشة.

أثناء التكوين لطبقات متعددة، تقوم GPU بدمجها في الصورة النهائية مع مراعاة الشفافية والأقنعة وأوضاع المزج. إذا كانت الطبقة تحتوي على opaque = true، يقوم Core Animation بتحسين التكوين: بدلاً من مزج ألفا، يتم استبدال البكسل البسيط، وهو أسرع بشكل ملحوظ.

وفقاً Apple Performance Guidelines، العوامل الرئيسية التي تبطئ عرض CALayer هي: تسلسل هرمي معقد للـ sublayers (أكثر من 30 طبقة على الشاشة)، استخدام الأقنعة (خاصية mask)، الحساب التلقائي للظل بدون shadowPath، والاستخدام المفرط لـ shouldRasterize للطبقات الديناميكية.

Core Animation Instrument في XCode يسمح بمراقبة وقت عرض كل طبقة، وعدد المخازن المؤقتة خارج الشاشة، وتكرار استدعاء drawRect. وقت العرض الأمثل لـ 60 FPS لا يتجاوز 8 مللي ثانية على CPU و 8 مللي ثانية على GPU.

العرض خارج الشاشة وتأثيره

العرض خارج الشاشة — عرض طبقة في مخزن مؤقت وسيط قبل إظهارها على الشاشة. يحدث عند استخدام cornerRadius + masksToBounds مع محتوى، شفافية المجموعة، الأقنعة، و shouldRasterize. كل تمريرة خارج الشاشة تستغرق 2–5 مللي ثانية، لذا فإن العروض خارج الشاشة المفرطة حرجة للأداء.

لتشخيص العرض خارج الشاشة، استخدم أداة Color Offscreen-Rendered في Core Animation Instrument. الطبقات الصفراء — خارج الشاشة، الزرقاء — عرض مباشر على الشاشة. تقليل التمريرات خارج الشاشة هو أسلوب تحسين رئيسي في iOS.

أمثلة برمجية: العمل مع CALayer في Swift

المثال الأول يوضح الإعداد الأساسي لـ CALayer مع إنشاء الظل وتدوير الزوايا والحدود. shadowPath محدد بشكل صريح لتسريع العرض:

import UIKit

func configureLayer(_ view: UIView) {
    let layer = view.layer
    layer.cornerRadius = 16
    layer.borderWidth = 2
    layer.borderColor = UIColor.systemBlue.cgColor
    layer.backgroundColor = UIColor.white.cgColor

    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOpacity = 0.2
    layer.shadowOffset = CGSize(width: 0, height: 4)
    layer.shadowRadius = 8
    layer.shadowPath = UIBezierPath(
        roundedRect: view.bounds,
        cornerRadius: layer.cornerRadius
    ).cgPath
}

المثال الثاني يظهر تحريك transform عبر CABasicAnimation مع تحويل منظور ثلاثي الأبعاد. حركة الدوران حول المحور Y تخلق تأثير قلب البطاقة:

let flipAnimation = CABasicAnimation(keyPath: "transform")
var transform = CATransform3DIdentity
transform.m34 = -1.0 / 500.0
transform = CATransform3DRotate(transform, .pi, 0, 1, 0)
flipAnimation.toValue = NSValue(caTransform3D: transform)
flipAnimation.duration = 0.8
flipAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
cardLayer.add(flipAnimation, forKey: "flip")

المثال الثالث يوضح استخدام CAGradientLayer لإنشاء تدرج خلفية. يتم عرض التدرج على GPU ولا يتطلب موارد إضافية عند تغيير الحجم:

func addGradient(to view: UIView, colors: [UIColor]) {
    let gradient = CAGradientLayer()
    gradient.colors = colors.map { $0.cgColor }
    gradient.locations = [0.0, 0.5, 1.0]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradient.frame = view.bounds
    view.layer.insertSublayer(gradient, at: 0)
}