Layer dalam aplikasi mobile — apa itu, jenis apa saja dan cara kerjanya

Apa itu Layer dalam grafis mobile?

Layer — adalah objek tingkat rendah dari sistem grafis yang menyimpan gambar raster fragmen layar dan mengelola atribut visualnya: posisi, ukuran, rotasi, transparansi, bayangan, dan warna. Di iOS, setiap UIView memiliki CALayer bawaan, yang dapat diakses melalui properti layer. Pengembang dapat bekerja langsung dengan layer, melewati UIView, untuk penyesuaian rendering yang halus.

Arsitektur lapisan mengikuti pola Model-View-Controller, di mana CALayer berperan sebagai Model — ia menyimpan status properti visual. Core Animation adalah Controller yang mengelola animasi transisi antar status. View (UIView) — pembungkus opsional yang menambahkan pemrosesan sentuhan dan partisipasi dalam Auto Layout.

Menurut Apple WWDC 2024, pipeline rendering modern iOS menggunakan Metal untuk komposisi lapisan. Setiap CALayer digambar dalam buffer terpisah, setelah itu Core Animation menggabungkan semua buffer menjadi gambar akhir dengan mempertimbangkan transparansi dan mode blending.

Di Android padanan lapisan adalah View dan Drawable latar belakang, tetapi bekerja langsung dengan lapisan grafis tersedia melalui Canvas dan RenderNode di Android 10+. Memahami konsep layer penting untuk mengoptimalkan rendering di kedua platform.

Perbedaan antara Layer dan View

Perbedaan utama terletak pada area tanggung jawab. View bertanggung jawab atas input pengguna (sentuhan, gestur), penentuan posisi (Auto Layout, frame), dan siklus hidup. Layer bertanggung jawab secara eksklusif atas representasi visual: rendering konten, animasi properti, dan komposisi dengan lapisan lain.

Pemisahan ini memungkinkan caching representasi raster lapisan secara independen dari View. Jika lapisan tidak berubah, Core Animation menggunakan frame yang di-cache tanpa memanggil drawRect. Untuk elemen statis, ini memberikan peningkatan performa yang signifikan tanpa perubahan kode.

Jenis utama lapisan di iOS dan Android

iOS menyediakan hierarki kelas yang kaya yang mewarisi dari CALayer. Setiap subkelas dioptimalkan untuk skenario tertentu: menampilkan teks, grafik vektor, gradien, atau transformasi 3D. Pemilihan jenis lapisan yang tepat secara langsung mempengaruhi performa rendering.

• CALayer — lapisan dasar untuk area persegi panjang dengan warna latar belakang, batas, dan bayangan.
• CAShapeLayer — lapisan untuk menggambar bentuk vektor melalui CGPath. Rendering dilakukan di GPU tanpa membuat buffer terpisah.
• CATextLayer — lapisan untuk menampilkan teks dengan dukungan rendering subpiksel dan caching glyph.
• CAGradientLayer — lapisan untuk gradien linier dan radial dengan akselerasi perangkat keras.
• CAReplicatorLayer — lapisan yang secara otomatis membuat salinan lapisan anak dengan offset yang ditentukan.

Di Android konsep lapisan diimplementasikan melalui RenderNode, ViewLayer, dan HardwareRenderer. Mulai dari Android 5.0 (API 21), setiap View di-render ke dalam lapisan akselerasi perangkat kerasnya sendiri, memungkinkan animasi dilakukan tanpa memanggil onDraw.

Fleksibilitas tambahan di iOS diberikan oleh CAReplicatorLayer dan CAEmitterLayer. Yang pertama digunakan untuk membuat pola berulang, yang kedua untuk sistem partikel. Keduanya bekerja secara eksklusif di GPU, memungkinkan pembuatan efek visual kompleks tanpa kehilangan performa.

Hierarki lapisan dan komposisi scene

Hierarki lapisan di iOS dibangun berdasarkan prinsip pohon: setiap CALayer dapat berisi banyak sublayer anak. Semua transformasi yang diterapkan pada lapisan induk — skala, rotasi, pergeseran — secara otomatis diterapkan ke elemen anak. Ini memastikan konsistensi representasi visual selama animasi.

Komposisi scene dilakukan oleh Core Animation dalam urutan berikut: pertama latar belakang (background) di-render, kemudian setiap lapisan anak dalam urutan penambahan dari bawah ke atas. Untuk setiap lapisan, Core Animation memeriksa properti transparansi, mask, dan mode blending, setelah itu melakukan penggabungan (compositing) menjadi frame akhir.

Menurut Apple Documentation, komposisi lapisan dengan opaque = true dan tanpa saluran alfa dilakukan tanpa pass tambahan — GPU cukup menyalin piksel di atas lapisan sebelumnya. Jika lapisan mengandung transparansi, GPU melakukan alfa-blending, yang membutuhkan sumber daya komputasi tambahan.

Di Android komposisi lapisan dilakukan melalui SurfaceFlinger — layanan sistem yang menerima buffer dari setiap aplikasi dan menggabungkannya dengan mempertimbangkan urutan z. Setiap Window di Android adalah Surface terpisah yang dapat berisi banyak lapisan grafis.

Mask dan pemotongan lapisan

CALayer.mask — properti yang memungkinkan penerapan mask dengan bentuk arbitrer ke lapisan. Mask dapat berupa CALayer lainnya — misalnya, CAShapeLayer dengan path melingkar atau CAGradientLayer untuk membuat transisi transparansi yang halus. Penggunaan mask meningkatkan beban GPU karena memerlukan rendering pass tambahan untuk menghitung nilai alfa setiap piksel.

Untuk pemotongan sederhana di sepanjang batas persegi panjang, disarankan menggunakan cornerRadius dan masksToBounds. Tidak seperti mask melalui properti mask, cornerRadius diproses secara perangkat keras pada tahap rasterisasi dan tidak memerlukan pass tambahan.

Performa lapisan: rendering dan caching

shouldRasterize — properti kunci CALayer untuk optimasi performa. Ketika shouldRasterize diatur ke true, Core Animation me-render lapisan dan semua sublayernya ke dalam buffer raster terpisah (offscreen buffer). Pada frame berikutnya, gambar raster yang di-cache digunakan sebagai pengganti rendering ulang.

Caching efektif untuk lapisan statis atau jarang berubah: bayangan, gradien, teks dengan sudut membulat. Namun untuk lapisan yang sering diperbarui (animasi, video, scroll), rasterisasi dapat menurunkan performa karena setiap frame memerlukan regenerasi cache.

Menurut penelitian Objc.io, penggunaan shouldRasterize yang tepat di iPad Pro mengurangi waktu rendering layar kompleks dari 25 ms menjadi 8 ms — lebih dari tiga kali lipat. Kondisi kunci: lapisan tidak boleh berubah lebih dari sekali setiap 3-5 frame.

• Opaque = true — memberitahu Core Animation bahwa lapisan tidak tembus pandang, mengecualikan alfa-blending.
• drawsAsynchronously — mengaktifkan rendering asinkron untuk lapisan kompleks tanpa memblokir main thread.
• allowsEdgeAntialiasing — mengaktifkan anti-aliasing tepi untuk lapisan yang ditransformasi, tetapi meningkatkan beban GPU.
• allowsGroupOpacity — mengontrol transparansi grup lapisan anak.

Contoh bekerja dengan lapisan di Swift dan Kotlin

Contoh pertama mendemonstrasikan konfigurasi properti visual dasar CALayer di Swift — pembulatan sudut, bayangan, dan batas:

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

Contoh kedua — membuat animasi lapisan di Swift menggunakan CABasicAnimation. Properti position dianimasikan tanpa partisipasi 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")

Contoh ketiga — bekerja dengan RenderNode di Kotlin pada Android. RenderNode — padanan langsung CALayer, yang memungkinkan pengoperasian lapisan grafis pada tingkat 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
}