मोबाइल ऐप्स में 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 है, लेकिन ग्राफ़िक्स लेयर्स के साथ सीधा काम Canvas और RenderNode के माध्यम से Android 10+ में उपलब्ध है। दोनों प्लेटफ़ॉर्म पर रेंडरिंग को अनुकूलित करने के लिए लेयर अवधारणा को समझना महत्वपूर्ण है।

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
}