Custom UIView: apa itu, pembuatan dan override drawRect

Apa itu Custom UIView dan kapan dibutuhkan

Custom UIView — adalah kelas kustom yang mewarisi UIView, di mana pengembang mengoverride metode standar untuk mengimplementasikan logika tampilan dan interaksi sendiri. UIKit berisi banyak komponen siap pakai, tetapi tidak mencakup semua skenario: grafik animasi, sakelar tidak standar, kanvas untuk menggambar tangan, elemen game, atau visualisasi data memerlukan implementasi kustom.

Apple merekomendasikan pembuatan Custom UIView ketika komponen standar tidak dapat memberikan fungsionalitas yang diperlukan atau ketika elemen kustom yang sama digunakan di beberapa tempat dalam aplikasi. Menurut WWDC 2024, view kustom rata-rata membentuk 15-20% dari seluruh UIView dalam proyek berukuran sedang.

Skenario penggunaan umum

UIView kustom digunakan untuk membangun grafik dan diagram (penggambaran garis dan bentuk dengan Core Graphics), indikator kemajuan tidak standar, latar belakang animasi, elemen untuk menggambar dengan jari, serta untuk visualisasi data secara real-time. Dalam setiap kasus ini, pengembang memiliki akses penuh ke CGContext dan dapat menggambar geometri apa pun.

Kapan Custom UIView tidak diperlukan

Jika elemen dapat dirakit dari komponen UIKit standar (UIButton, UIImageView, UILabel) menggunakan Auto Layout dan konfigurasi properti — pembuatan subclass UIView akan berlebihan. Apple merekomendasikan untuk mencoba komposisi view siap pakai terlebih dahulu dan hanya ketika fungsionalitas tidak mencukupi, beralih ke penggambaran kustom.

Cara membuat Custom UIView di Xcode

Pembuatan UIView kustom dimulai dengan mendeklarasikan kelas yang mewarisi UIView dan mengimplementasikan inisialisator wajib. Implementasi minimal mencakup init(frame:) untuk pembuatan dari kode dan init(coder:) untuk memuat dari Storyboard atau XIB.

import UIKit

class CircleView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }

    private func setupView() {
        backgroundColor = .clear
        setupLayerProperties()
    }

    private func setupLayerProperties() {
        layer.cornerRadius = bounds.width / 2
        layer.masksToBounds = true
    }
}

Dalam metode setupView() properti awal diatur: latar belakang transparan, pengaturan lapisan. Jika view akan ditampilkan di Interface Builder, ada baiknya menambahkan @IBDesignable dan @IBInspectable untuk pratinjau langsung.

Metode siklus hidup UIView

Custom UIView dikelola oleh sistem melalui urutan metode siklus hidup yang dipanggil dalam urutan tertentu. Memahami siklus ini sangat penting untuk konfigurasi dan penggambaran view yang benar.

Semua metode dipanggil secara otomatis oleh sistem dan pengembang tidak perlu memanggilnya secara manual. Pengecualian — setNeedsDisplay(), yang memberi sinyal ke sistem perlunya pemanggilan ulang draw(_:).

Override draw(_:) untuk penggambaran

draw(_:) — metode kunci untuk penggambaran kustom di Custom UIView. Di dalamnya, pengembang mendapatkan akses ke CGContext (konteks grafis) dan dapat menggambar garis, bentuk, teks, dan gambar menggunakan Core Graphics.

Sistem memanggil draw(_:) secara otomatis saat view pertama kali muncul di layar. Pemanggilan ulang diprakarsai melalui setNeedsDisplay(), yang menandai view sebagai perlu digambar ulang. Penting: jangan memanggil draw(_:) secara langsung — ini merusak mekanisme cache dan menurunkan kinerja.

override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }

    // Isi latar belakang
    context.setFillColor(UIColor.systemBlue.cgColor)
    context.fill(rect)

    // Menggambar lingkaran
    context.setStrokeColor(UIColor.white.cgColor)
    context.setLineWidth(4.0)
    let circleRect = rect.insetBy(dx: 20, dy: 20)
    context.strokeEllipse(in: circleRect)
}

Dalam contoh ini, draw(_:) mengisi latar belakang dengan warna biru dan menggambar lingkaran putih dengan jarak 20 piksel dari tepi. Setiap panggilan draw(_:) harus idempoten — pemanggilan berulang dengan parameter yang sama harus memberikan hasil yang sama.

Aturan draw(_:) yang efisien

Apple merekomendasikan untuk meminimalkan pekerjaan di dalam draw(_:) — buat UIBezierPath terlebih dahulu, cache gambar, dan jangan lakukan perhitungan berat. Jika view statis, pertimbangkan penggunaan UIImageView dengan gambar yang sudah dirender daripada terus-menerus menggambar ulang.

CALayer vs draw(_:): mana yang harus dipilih

CALayer — adalah lapisan di bawahnya yang mengelola konten visual UIView. Banyak tugas penggambaran kustom dapat diselesaikan melalui konfigurasi properti CALayer tanpa mengoverride draw(_:), yang jauh lebih efisien.

Menurut Apple Engineering (2024), operasi di tingkat CALayer dieksekusi di GPU, sedangkan draw(_:) bekerja melalui rendering CPU Core Graphics. Untuk animasi dan transisi yang halus, penggunaan CALayer dan CABasicAnimation lebih disukai.

Gunakan CAShapeLayer untuk menggambar bentuk vektor dengan animasi — ini dipercepat perangkat keras dan mendukung animasi path, strokeStart, dan strokeEnd tanpa memanggil draw(_:).

Optimalisasi kinerja Custom UIView

Kinerja Custom UIView secara langsung mempengaruhi kehalusan animasi dan pengalaman pengguna secara keseluruhan. Masalah utama muncul karena panggilan draw(_:) yang berlebihan, tata letak subview yang tidak optimal, dan kurangnya cache.

Hindari penggambaran ulang yang tidak perlu

Setiap panggilan setNeedsDisplay() menyebabkan penggambaran ulang view secara penuh. Gunakan setNeedsDisplay(_:) dengan menentukan persegi panjang tertentu jika perubahan hanya mempengaruhi sebagian view. Untuk properti CALayer (backgroundColor, cornerRadius, shadow) penggambaran ulang tidak diperlukan — properti tersebut diperbarui di tingkat GPU.

Cache konten yang sudah dirender

Jika konten Custom UIView jarang berubah, render sekali di UIGraphicsImageRenderer dan simpan sebagai UIImage. Pada penggambaran ulang berikutnya, gunakan draw(at:) untuk menampilkan gambar yang di-cache — ini puluhan kali lebih cepat daripada menggambar ulang melalui Core Graphics.

func renderToImage() -> UIImage {
    let renderer = UIGraphicsImageRenderer(size: bounds.size)
    return renderer.image { ctx in
        drawHierarchy(in: bounds, afterScreenUpdates: true)
    }
}

Gunakan shouldRasterize untuk lapisan statis

Properti shouldRasterize pada CALayer mengaktifkan cache representasi raster dari lapisan. Aktifkan untuk view statis dengan transparansi dan bayangan — ini mengurangi beban kompositing. Nonaktifkan untuk view animasi: pada setiap perubahan cache di-reset, dan rasterisasi hanya memperburuk kinerja.