মোবাইল অ্যাপে 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
}