Layer σε εφαρμογές κινητών — τι είναι, τι τύποι υπάρχουν και πώς λειτουργεί

Τι είναι το Layer στα γραφικά κινητών;

Layer — είναι ένα αντικείμενο χαμηλού επιπέδου του γραφικού συστήματος που αποθηκεύει την ψηφιδωτή εικόνα ενός τμήματος οθόνης και διαχειρίζεται τα οπτικά χαρακτηριστικά του: θέση, μέγεθος, περιστροφή, διαφάνεια, σκιά και χρώμα. Στο iOS, κάθε UIView έχει ενσωματωμένο CALayer, προσβάσιμο μέσω της ιδιότητας layer. Ο προγραμματιστής μπορεί να εργαστεί απευθείας με το layer, παρακάμπτοντας το UIView, για λεπτό συντονισμό της απόδοσης.

Η αρχιτεκτονική των επιπέδων ακολουθεί το πρότυπο Model-View-Controller, όπου το CALayer λειτουργεί ως Model — αποθηκεύει την κατάσταση των οπτικών ιδιοτήτων. Το Core Animation είναι ο Controller που διαχειρίζεται την κίνηση μετάβασης μεταξύ καταστάσεων. Το View (UIView) — ένα προαιρετικό περιτύλιγμα που προσθέτει επεξεργασία αφής και συμμετοχή στο Auto Layout.

Σύμφωνα με το Apple WWDC 2024, η σύγχρονη γραμμή απόδοσης iOS χρησιμοποιεί Metal για σύνθεση επιπέδων. Κάθε CALayer σχεδιάζεται σε ξεχωριστό buffer, μετά το οποίο το Core Animation συγχωνεύει όλους τους buffers στην τελική εικόνα λαμβάνοντας υπόψη τη διαφάνεια και τις λειτουργίες ανάμειξης.

Στο Android τα αντίστοιχα των επιπέδων είναι το View και τα Drawable φόντου, αλλά η άμεση εργασία με γραφικά επίπεδα είναι διαθέσιμη μέσω Canvas και RenderNode σε Android 10+. Η κατανόηση της έννοιας layer είναι σημαντική για τη βελτιστοποίηση της απόδοσης και στις δύο πλατφόρμες.

Διαφορά μεταξύ Layer και View

Η κύρια διαφορά βρίσκεται στην περιοχή ευθύνης. View είναι υπεύθυνο για την είσοδο χρήστη (αφή, χειρονομίες), τοποθέτηση (Auto Layout, frame) και κύκλο ζωής. Layer είναι αποκλειστικά υπεύθυνο για την οπτική αναπαράσταση: απόδοση περιεχομένου, κίνηση ιδιοτήτων και σύνθεση με άλλα επίπεδα.

Αυτός ο διαχωρισμός επιτρέπει την προσωρινή αποθήκευση της ψηφιδωτής αναπαράστασης του επιπέδου ανεξάρτητα από το View. Εάν το επίπεδο δεν αλλάζει, το Core Animation χρησιμοποιεί το αποθηκευμένο καρέ χωρίς να καλεί το drawRect. Για στατικά στοιχεία, αυτό παρέχει σημαντική αύξηση απόδοσης χωρίς αλλαγή κώδικα.

Κύριοι τύποι επιπέδων σε iOS και Android

iOS προσφέρει μια πλούσια ιεραρχία κλάσεων που κληρονομούν από το CALayer. Κάθε υποκλάση είναι βελτιστοποιημένη για ένα συγκεκριμένο σενάριο: εμφάνιση κειμένου, διανυσματικών γραφικών, διαβαθμίσεων ή μετασχηματισμών 3D. Η επιλογή του σωστού τύπου επιπέδου επηρεάζει άμεσα την απόδοση απόδοσης.

• CALayer — βασικό επίπεδο για ορθογώνιες περιοχές με χρώμα φόντου, περίγραμμα και σκιά.
• CAShapeLayer — επίπεδο για σχεδίαση διανυσματικών σχημάτων μέσω CGPath. Η απόδοση εκτελείται στην GPU χωρίς δημιουργία ξεχωριστού buffer.
• CATextLayer — επίπεδο για εμφάνιση κειμένου με υποστήριξη υποεικονοστοιχειακής απόδοσης και προσωρινής αποθήκευσης γλυφών.
• CAGradientLayer — επίπεδο για γραμμικές και ακτινικές διαβαθμίσεις με επιτάχυνση υλικού.
• CAReplicatorLayer — επίπεδο που δημιουργεί αυτόματα αντίγραφα θυγατρικών επιπέδων με καθορισμένες μετατοπίσεις.

Στο Android η έννοια των επιπέδων υλοποιείται μέσω RenderNode, ViewLayer και HardwareRenderer. Από το Android 5.0 (API 21), κάθε View αποδίδεται στο δικό του επίπεδο επιτάχυνσης υλικού, επιτρέποντας την εκτέλεση κινήσεων χωρίς κλήση onDraw.

Πρόσθετη ευελιξία στο iOS παρέχουν τα CAReplicatorLayer και CAEmitterLayer. Το πρώτο χρησιμοποιείται για δημιουργία επαναλαμβανόμενων μοτίβων, το δεύτερο — για συστήματα σωματιδίων. Και τα δύο λειτουργούν αποκλειστικά στην GPU, επιτρέποντας δημιουργία σύνθετων οπτικών εφέ χωρίς απώλεια απόδοσης.

Ιεραρχία επιπέδων και σύνθεση σκηνής

Ιεραρχία επιπέδων στο iOS χτίζεται με βάση την αρχή του δέντρου: κάθε CALayer μπορεί να περιέχει πολλαπλά θυγατρικά sublayers. Όλοι οι μετασχηματισμοί που εφαρμόζονται στο γονικό επίπεδο — κλίμακα, περιστροφή, μετατόπιση — εφαρμόζονται αυτόματα στα θυγατρικά στοιχεία. Αυτό εξασφαλίζει συνέπεια της οπτικής αναπαράστασης κατά τη διάρκεια κινήσεων.

Η σύνθεση σκηνής εκτελείται από το Core Animation με την ακόλουθη σειρά: πρώτα αποδίδεται το φόντο (background), στη συνέχεια κάθε θυγατρικό επίπεδο με τη σειρά προσθήκης από κάτω προς τα πάνω. Για κάθε επίπεδο, το Core Animation ελέγχει τις ιδιότητες διαφάνειας, μασκών και λειτουργιών ανάμειξης, μετά εκτελεί συγχώνευση (compositing) στο τελικό καρέ.

Σύμφωνα με το Apple Documentation, η σύνθεση επιπέδου με opaque = true και χωρίς κανάλι άλφα εκτελείται χωρίς επιπλέον περάσματα — η GPU απλώς αντιγράφει εικονοστοιχεία πάνω από το προηγούμενο επίπεδο. Εάν το επίπεδο περιέχει διαφάνεια, η GPU εκτελεί άλφα-ανάμειξη, που απαιτεί πρόσθετους υπολογιστικούς πόρους.

Στο Android η σύνθεση επιπέδων εκτελείται μέσω SurfaceFlinger — της υπηρεσίας συστήματος που λαμβάνει buffers από κάθε εφαρμογή και τους συγχωνεύει λαμβάνοντας υπόψη τη σειρά z. Κάθε Window στο Android είναι ένα ξεχωριστό Surface που μπορεί να περιέχει πολλαπλά γραφικά επίπεδα.

Μάσκες και περικοπή επιπέδων

CALayer.mask — ιδιότητα που επιτρέπει την εφαρμογή μάσκας αυθαίρετου σχήματος σε ένα επίπεδο. Η μάσκα μπορεί να είναι οποιοδήποτε άλλο CALayer — για παράδειγμα, CAShapeLayer με κυκλικό path ή CAGradientLayer για δημιουργία ομαλής μετάβασης διαφάνειας. Η χρήση μασκών αυξάνει το φόρτο της GPU, καθώς απαιτεί επιπλέον πέρασμα απόδοσης για τον υπολογισμό των τιμών άλφα κάθε εικονοστοιχείου.

Για απλή περικοπή σε ορθογώνια όρια συνιστάται η χρήση cornerRadius και masksToBounds. Σε αντίθεση με τις μάσκες μέσω της ιδιότητας mask, το cornerRadius επεξεργάζεται υλικοτεχνικά στο στάδιο ψηφιοποίησης και δεν απαιτεί επιπλέον πέρασμα.

Απόδοση επιπέδων: απόδοση και προσωρινή αποθήκευση

shouldRasterize — η βασική ιδιότητα του CALayer για βελτιστοποίηση απόδοσης. Όταν το shouldRasterize ορίζεται σε true, το Core Animation αποδίδει το επίπεδο και όλα τα sublayer του σε ένα ξεχωριστό ψηφιδωτό buffer (offscreen buffer). Σε επόμενα καρέ, αντί για επαναλαμβανόμενη απόδοση χρησιμοποιείται η προσωρινά αποθηκευμένη ψηφιδωτή εικόνα.

Η προσωρινή αποθήκευση είναι αποτελεσματική για στατικά ή σπάνια μεταβαλλόμενα επίπεδα: σκιές, διαβαθμίσεις, κείμενο με στρογγυλεμένες γωνίες. Ωστόσο, για συχνά ενημερωμένα επίπεδα (κίνηση, βίντεο, κύλιση) η ψηφιοποίηση μπορεί να υποβαθμίσει την απόδοση, καθώς κάθε καρέ απαιτεί αναγέννηση της προσωρινής μνήμης.

Σύμφωνα με έρευνα του Objc.io, η σωστή χρήση του shouldRasterize σε iPad Pro μειώνει το χρόνο απόδοσης σύνθετης οθόνης από 25 ms σε 8 ms — περισσότερο από τρεις φορές. Βασική προϋπόθεση: το επίπεδο δεν πρέπει να αλλάζει συχνότερα από μία φορά κάθε 3-5 καρέ.

• Opaque = true — ενημερώνει το Core Animation ότι το επίπεδο είναι αδιαφανές, αποκλείοντας την άλφα-ανάμειξη.
• drawsAsynchronously — ενεργοποιεί ασύγχρονη απόδοση για σύνθετα επίπεδα χωρίς αποκλεισμό του main thread.
• allowsEdgeAntialiasing — ενεργοποιεί εξομάλυνση άκρων για μετασχηματισμένα επίπεδα, αλλά αυξάνει το φόρτο GPU.
• allowsGroupOpacity — ελέγχει τη διαφάνεια ομάδας θυγατρικών επιπέδων.

Παραδείγματα εργασίας με επίπεδα σε Swift και Kotlin

Το πρώτο παράδειγμα δείχνει τη ρύθμιση βασικών οπτικών ιδιοτήτων του CALayer σε Swift — στρογγυλοποίηση γωνιών, σκιά και περίγραμμα:

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
    }
}

Το δεύτερο παράδειγμα — δημιουργία κίνησης επιπέδου σε Swift με χρήση CABasicAnimation. Η ιδιότητα position κινείται χωρίς συμμετοχή του UIView:

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")

Το τρίτο παράδειγμα — εργασία με RenderNode σε Kotlin σε Android. Το 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
}