موبائل ایپس میں Layer — یہ کیا ہے، اقسام اور یہ کیسے کام کرتا ہے

موبائل گرافکس میں Layer کیا ہے؟

Layer ایک نچلی سطح کا گرافکس سسٹم آبجیکٹ ہے جو اسکرین کے کسی حصے کی بٹ میپ تصویر محفوظ کرتا ہے اور اس کی بصری خصوصیات کا انتظام کرتا ہے: مقام، سائز، گردش، دھندلاپن، سایہ اور رنگ۔ iOS میں، ہر UIView میں ایک بلٹ ان CALayer ہوتا ہے جو layer خصوصیت کے ذریعے قابل رسائی ہے۔ ڈویلپر رینڈرنگ کے باریک کنٹرول کے لیے UIView کو چھوڑ کر براہ راست layer کے ساتھ کام کر سکتا ہے۔

پرتوں کا فن تعمیر Model-View-Controller پیٹرن کی پیروی کرتا ہے، جہاں CALayer ماڈل کے طور پر کام کرتا ہے — یہ بصری خصوصیات کی حالت محفوظ کرتا ہے۔ Core Animation کنٹرولر ہے جو حالتوں کے درمیان اینیمیشن کی منتقلی کا انتظام کرتا ہے۔ View (UIView) ایک اختیاری لفافہ ہے جو ٹچ ہینڈلنگ اور Auto Layout شرکت شامل کرتا ہے۔

Apple WWDC 2024 کے مطابق، جدید iOS رینڈرنگ پائپ لائن پرت کی ترکیب کے لیے Metal استعمال کرتی ہے۔ ہر CALayer ایک علیحدہ بفر میں رینڈر کیا جاتا ہے، جس کے بعد Core Animation دھندلاپن اور ملاوٹ کے طریقوں کو مدنظر رکھتے ہوئے تمام بفرز کو حتمی تصویر میں ترکیب کرتا ہے۔

Android میں، پرتوں کا مشابہ View اور پس منظر کا Drawable ہے، لیکن گرافکس پرتوں کے ساتھ براہ راست کام Android 10+ میں Canvas اور RenderNode کے ذریعے دستیاب ہے۔ دونوں پلیٹ فارمز پر رینڈرنگ کو بہتر بنانے کے لیے پرت کے تصور کو سمجھنا اہم ہے۔

Layer اور View کے درمیان فرق

بنیادی فرق ذمہ داری کے میدان میں ہے۔ View صارف کے ان پٹ (ٹچ، اشاروں)، پوزیشننگ (Auto Layout, frame) اور لائف سائیکل کو ہینڈل کرتا ہے۔ Layer صرف بصری پیشکش کے لیے ذمہ دار ہے: مواد کی رینڈرنگ، خصوصیات کی اینیمیشن اور دوسری پرتوں کے ساتھ ترکیب۔

یہ علیحدگی View سے آزادانہ طور پر پرت کی بٹ میپ نمائندگی کو کیش کرنے کی اجازت دیتی ہے۔ اگر پرت تبدیل نہیں ہوتی، Core Animation drawRect کو کال کیے بغیر کیشڈ فریم استعمال کرتا ہے۔ جامد عناصر کے لیے، یہ کوڈ میں تبدیلی کے بغیر نمایاں کارکردگی میں اضافہ فراہم کرتا ہے۔

iOS اور Android میں پرتوں کی اہم اقسام

iOS CALayer سے وراثت میں ملنے والی کلاسوں کا ایک بھرپور درجہ بندی فراہم کرتا ہے۔ ہر ذیلی کلاس ایک مخصوص منظر نامے کے لیے بہتر بنائی گئی ہے: متن کی نمائش، ویکٹر گرافکس، گریڈینٹس یا 3D تبدیلیاں۔ صحیح پرت کی قسم کا انتخاب براہ راست رینڈرنگ کارکردگی کو متاثر کرتا ہے۔

• CALayer — پس منظر کے رنگ، بارڈر اور سائے کے ساتھ مستطیل علاقوں کے لیے بنیادی پرت۔
• CAShapeLayer — CGPath کے ذریعے ویکٹر اشکال رینڈر کرنے کے لیے پرت۔ رینڈرنگ علیحدہ بفر بنائے بغیر GPU پر کی جاتی ہے۔
• CATextLayer — سب پکسل رینڈرنگ اور گلائف کیشنگ کے ساتھ متن ظاہر کرنے کے لیے پرت۔
• CAGradientLayer — ہارڈویئر ایکسلریشن کے ساتھ لکیری اور شعاعی گریڈینٹس کے لیے پرت۔
• CAReplicatorLayer — پرت جو مخصوص آفسیٹس کے ساتھ بچوں کی پرتوں کی کاپیاں خود بخود بناتی ہے۔

Android میں، پرت کا تصور RenderNode، ViewLayer اور HardwareRenderer کے ذریعے لاگو کیا گیا ہے۔ Android 5.0 (API 21) سے شروع کرتے ہوئے، ہر View اپنی ہارڈویئر ایکسلریشن پرت میں رینڈر ہوتا ہے، جو onDraw کو کال کیے بغیر اینیمیشن کی اجازت دیتا ہے۔

iOS میں اضافی لچک CAReplicatorLayer اور CAEmitterLayer کے ذریعے فراہم کی گئی ہے۔ پہلا بار بار آنے والے نمونے بنانے کے لیے استعمال ہوتا ہے، دوسرا ذرہ نظام کے لیے۔ دونوں خصوصی طور پر GPU پر چلتے ہیں، جو کارکردگی کے نقصان کے بغیر پیچیدہ بصری اثرات پیدا کرنے کے قابل بناتے ہیں۔

پرتوں کا درجہ بندی اور منظر کی ترکیب

iOS میں پرتوں کا درجہ بندی ایک درخت کی ساخت کی پیروی کرتا ہے: ہر CALayer میں متعدد بچوں کی ذیلی پرتیں ہو سکتی ہیں۔ والدین کی پرت پر لاگو کردہ تمام تبدیلیاں — پیمانہ، گردش، نقل مکانی — خود بخود بچوں کے عناصر پر لاگو ہوتی ہیں۔ یہ اینیمیشن کے دوران بصری ہم آہنگی کو یقینی بناتا ہے۔

منظر کی ترکیب Core Animation کے ذریعے مندرجہ ذیل ترتیب میں کی جاتی ہے: پہلے پس منظر رینڈر کیا جاتا ہے، پھر ہر بچے کی پرت نیچے سے اوپر کی ترتیب میں۔ ہر پرت کے لیے، Core Animation دھندلاپن، ماسک اور ملاوٹ کے طریقوں کی خصوصیات کو چیک کرتا ہے، پھر انہیں حتمی فریم میں ترکیب کرتا ہے۔

Apple Documentation کے مطابق، opaque = true اور بغیر الفا چینل کے پرت کی ترکیب بغیر اضافی پاسز کے کی جاتی ہے — GPU پچھلی پرت کے اوپر پکسلز کاپی کرتا ہے۔ اگر پرت میں شفافیت ہے، GPU الفا ملاوٹ کرتا ہے، جس کے لیے اضافی حسابی وسائل کی ضرورت ہوتی ہے۔

Android میں، پرت کی ترکیب SurfaceFlinger کے ذریعے کی جاتی ہے — ایک نظام سروس جو ہر ایپلیکیشن سے بفر وصول کرتی ہے اور انہیں z-ترتیب کے مطابق ترکیب کرتی ہے۔ Android میں ہر Window ایک علیحدہ Surface ہے جس میں متعدد گرافکس پرتیں ہو سکتی ہیں۔

ماسک اور پرت کاٹنا

CALayer.mask — ایک خصوصیت جو پرت پر صوابدیدی شکل کا ماسک لگانے کی اجازت دیتی ہے۔ ماسک کوئی دوسرا CALayer ہو سکتا ہے — مثال کے طور پر، دائرہ نما راستے والا CAShapeLayer یا دھندلاپن کا ہموار منتقلی بنانے کے لیے CAGradientLayer۔ ماسک کا استعمال GPU بوجھ بڑھاتا ہے کیونکہ ہر پکسل کے الفا اقدار کا حساب لگانے کے لیے اضافی رینڈرنگ پاس کی ضرورت ہوتی ہے۔

سادہ مستطیل کاٹنے کے لیے، cornerRadius اور masksToBounds استعمال کرنے کی سفارش کی جاتی ہے۔ mask خصوصیت کے ذریعے ماسک کے برعکس، cornerRadius راسٹرائزیشن مرحلے میں ہارڈویئر کے ذریعے پروسیس ہوتا ہے اور اضافی پاس کی ضرورت نہیں ہوتی۔

پرتوں کی کارکردگی: رینڈرنگ اور کیشنگ

shouldRasterize کارکردگی کی اصلاح کے لیے ایک اہم CALayer خصوصیت ہے۔ جب shouldRasterize کو true پر سیٹ کیا جاتا ہے، Core Animation پرت اور اس کی تمام ذیلی پرتوں کو ایک علیحدہ آف اسکرین بفر میں رینڈر کرتا ہے۔ بعد کے فریموں میں، دوبارہ رینڈر کرنے کے بجائے کیشڈ بٹ میپ تصویر استعمال ہوتی ہے۔

کیشنگ جامد یا شاذ و نادر ہی تبدیل ہونے والی پرتوں (سایہ، گریڈینٹ، گول کونوں والا متن) کے لیے مؤثر ہے۔ تاہم، بار بار اپ ڈیٹ ہونے والی پرتوں (اینیمیشن، ویڈیو، اسکرولنگ) کے لیے، راسٹرائزیشن کارکردگی کو خراب کر سکتی ہے کیونکہ ہر فریم کو کیش دوبارہ پیدا کرنے کی ضرورت ہوتی ہے۔

Objc.io کی تحقیق کے مطابق، iPad Pro پر shouldRasterize کا صحیح استعمال ایک پیچیدہ اسکرین کے رینڈرنگ وقت کو 25 ms سے 8 ms تک کم کر دیتا ہے — تین گنا سے زیادہ۔ اہم شرط یہ ہے کہ پرت ہر 3–5 فریموں میں ایک بار سے زیادہ تبدیل نہیں ہونی چاہیے۔

• Opaque = true — Core Animation کو بتاتا ہے کہ پرت غیر شفاف ہے، الفا ملاوٹ کو ختم کرتا ہے۔
• drawsAsynchronously — مرکزی دھاگے کو روکے بغیر پیچیدہ پرتوں کے لیے غیر مطابقت پذیر رینڈرنگ کو فعال کرتا ہے۔
• allowsEdgeAntialiasing — تبدیل شدہ پرتوں کے لیے کنارے ہموار کرنے کو فعال کرتا ہے لیکن GPU بوجھ بڑھاتا ہے۔
• allowsGroupOpacity — بچوں کی پرتوں کے گروپ دھندلاپن کو کنٹرول کرتا ہے۔

Swift اور Kotlin میں پرتوں کے ساتھ کام کرنے کی مثالیں

پہلی مثال Swift میں CALayer کی بنیادی بصری خصوصیات (کونے کی گولائی، سایہ اور بارڈر) ترتیب دینے کو ظاہر کرتی ہے:

import UIKit

class StyledView: UIView {
    override func awakeFromNib() {
        super.awakeFromNib()
        layer.cornerRadius = 12
        layer.masksToBounds = false
        layer.shadowColor = UIColor.darkGray.cgColor
        layer.shadowOpacity = 0.3
        layer.shadowOffset = CGSize(width: 0, height: 4)
        layer.shadowRadius = 8
    }
}

دوسری مثال — CABasicAnimation استعمال کرتے ہوئے Swift میں پرت اینیمیشن بنانا۔ UIView کی شرکت کے بغیر position خصوصیت اینیمیشن ہوتی ہے:

let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = NSValue(cgPoint: CGPoint(x: 0, y: 0))
animation.toValue = NSValue(cgPoint: CGPoint(x: 150, y: 300))
animation.duration = 1.0
animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
targetLayer.add(animation, forKey: "moveAnimation")

تیسری مثال — Android پر Kotlin میں RenderNode کے ساتھ کام کرنا۔ RenderNode CALayer کا براہ راست مشابہ ہے، جو Canvas سطح پر گرافکس پرتوں کے ساتھ کام کرنے کی اجازت دیتا ہے:

import android.graphics.renderer.RenderNode

fun createLayer(): RenderNode {
    val node = RenderNode("customLayer")
    node.setPosition(0, 0, 300, 200)
    node.setScaleX(1.5f)
    node.setScaleY(1.5f)
    val canvas = node.beginRecording()
    canvas.drawColor(android.graphics.Color.BLUE)
    node.endRecording()
    return node
}