Custom UIView: bu nima, yaratish va drawRect-ni qayta yozish

Custom UIView nima va qachon kerak

Custom UIView — bu UIView dan meros oluvchi foydalanuvchi klassi bo'lib, unda dasturchi o'zining ko'rsatish va o'zaro ta'sir mantiqini amalga oshirish uchun standart metodlarni qayta yozadi. UIKit juda ko'p tayyor komponentlarni o'z ichiga oladi, ammo ular barcha stsenariylarni qamrab olmaydi: animatsiyali grafiklar, nostandart kalitlar, qo'lda chizish uchun tuval, o'yin elementlari yoki ma'lumotlarni vizualizatsiya qilish maxsus amalga oshirishni talab qiladi.

Apple standart komponentlar zarur funksionallikni ta'minlay olmaganda yoki bir xil nostandart element ilovaning bir necha joyida ishlatilganda Custom UIView yaratishni tavsiya qiladi. WWDC 2024 ma'lumotlariga ko'ra, maxsus view lar o'rtacha kattalikdagi loyihada barcha UIView larning o'rtacha 15-20 foizini tashkil qiladi.

Odatiy foydalanish stsenariylari

Maxsus UIView grafiklar va diagrammalar (Core Graphics orqali chiziqlar va shakllarni chizish), nostandart progress ko'rsatkichlari, animatsiyali fonlar, barmoq bilan chizish elementlari, shuningdek real vaqtda ma'lumotlarni vizualizatsiya qilish uchun ishlatiladi. Bu holatlarning har birida dasturchi CGContext ga to'liq kirish imkoniyatiga ega va istalgan geometriyani chizishi mumkin.

Custom UIView qachon kerak emas

Agar elementni standart UIKit komponentlaridan (UIButton, UIImageView, UILabel) Auto Layout va xususiyatlarni sozlash orqali yig'ish mumkin bo'lsa — UIView kichik sinfini yaratish ortiqcha bo'ladi. Apple avval tayyor view lar kompozitsiyasini sinab ko'rishni va faqat funksionallik yetarli bo'lmaganda maxsus chizishga o'tishni tavsiya qiladi.

Xcode da Custom UIView qanday yaratiladi

Maxsus UIView yaratish UIView dan meros oluvchi klassni e'lon qilish va majburiy inizializatorlarni amalga oshirish bilan boshlanadi. Minimal amalga oshirish kod orqali yaratish uchun init(frame:) va Storyboard yoki XIB dan yuklash uchun init(coder:) ni o'z ichiga oladi.

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

setupView() metodida boshlang'ich xususiyatlar o'rnatiladi: shaffof fon, qatlam sozlamalari. Agar view Interface Builder da ko'rsatilsa, jonli oldindan ko'rish uchun @IBDesignable va @IBInspectable qo'shishga arziydi.

UIView hayot sikli metodlari

Custom UIView tizim tomonidan ma'lum tartibda chaqiriladigan hayot sikli metodlari ketma-ketligi orqali boshqariladi. Ushbu siklni tushunish view ni to'g'ri sozlash va chizish uchun muhim ahamiyatga ega.

Barcha metodlar tizim tomonidan avtomatik chaqiriladi va dasturchi ularni qo'lda chaqirishi shart emas. Istisno — setNeedsDisplay(), tizimga draw(_:) ni qayta chaqirish zarurligi haqida signal beradi.

Chizish uchun draw(_:) ni qayta yozish

draw(_:) — Custom UIView da maxsus chizish uchun asosiy metoddir. Uning ichida dasturchi CGContext (grafik kontekst) ga kirish imkoniyatiga ega bo'ladi va Core Graphics orqali chiziqlar, shakllar, matn va tasvirlarni chizishi mumkin.

Tizim draw(_:) ni view ekranda birinchi marta paydo bo'lganda avtomatik chaqiradi. Qayta chaqirish setNeedsDisplay() orqali boshlanadi, bu view ni qayta chizish talab qiladigan deb belgilaydi. Muhim: draw(_:) ni to'g'ridan-to'g'ri chaqirmang — bu keshlash mexanizmini buzadi va samaradorlikni pasaytiradi.

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

    // Fonni to'ldirish
    context.setFillColor(UIColor.systemBlue.cgColor)
    context.fill(rect)

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

Ushbu misolda draw(_:) fonni ko'k rang bilan to'ldiradi va chekkalardan 20 piksel masofada oq doira chizadi. Har bir draw(_:) chaqiruvi idempotent bo'lishi kerak — bir xil parametrlar bilan takroriy chaqiruv bir xil natija berishi kerak.

Samarali draw(_:) qoidalari

Apple draw(_:) ichidagi ishni minimallashtirishni tavsiya qiladi — UIBezierPath ni oldindan yarating, tasvirlarni keshlang va og'ir hisoblashlarni bajarmang. Agar view statik bo'lsa, doimiy qayta chizish o'rniga UIImageView dan renderlangan tasvir bilan foydalanishni o'ylab ko'ring.

CALayer va draw(_:): qaysi birini tanlash kerak

CALayer — bu UIView ning vizual tarkibini boshqaruvchi asosiy qatlamdir. Maxsus chizishning ko'p vazifalarini draw(_:) ni qayta yozmasdan CALayer xususiyatlarini sozlash orqali hal qilish mumkin, bu esa sezilarli darajada samaraliroq.

Apple Engineering (2024) ma'lumotlariga ko'ra, CALayer darajasidagi operatsiyalar GPU da bajariladi, draw(_:) esa CPU Core Graphics renderi orqali ishlaydi. Animatsiyalar va silliq o'tishlar uchun CALayer va CABasicAnimation dan foydalanish afzalroqdir.

Animatsiya bilan vektor shakllarni chizish uchun CAShapeLayer dan foydalaning — u apparat tezlashtirilgan va draw(_:) ni chaqirmasdan path, strokeStart va strokeEnd animatsiyasini qo'llab-quvvatlaydi.

Custom UIView samaradorligini optimallashtirish

Custom UIView samaradorligi animatsiyalarning silliqligi va ilovadan umumiy taassurotga bevosita ta'sir qiladi. Asosiy muammolar draw(_:) ning haddan tashqari chaqiruvlari, subview larning optimal bo'lmagan joylashuvi va keshlashning yo'qligi tufayli yuzaga keladi.

Keraksiz qayta chizishlardan saqlaning

Har bir setNeedsDisplay() chaqiruvi view ning to'liq qayta chizilishiga olib keladi. Agar o'zgarishlar view ning faqat bir qismiga ta'sir qilgan bo'lsa, aniq to'rtburchakni ko'rsatadigan setNeedsDisplay(_:) dan foydalaning. CALayer xususiyatlari (backgroundColor, cornerRadius, shadow) uchun qayta chizish talab qilinmaydi — ular GPU darajasida yangilanadi.

Renderlangan tarkibni keshlash

Agar Custom UIView tarkibi kamdan-kam o'zgarsa, uni bir marta UIGraphicsImageRenderer da renderlang va UIImage sifatida saqlang. Keyingi qayta chizishda keshlangan tasvirni ko'rsatish uchun draw(at:) dan foydalaning — bu Core Graphics orqali qayta chizishdan o'nlab marta tezroq.

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

Statik qatlamlar uchun shouldRasterize dan foydalaning

CALayer dagi shouldRasterize xususiyati qatlamning rastr tasvirini keshlashni faollashtiradi. Shaffoflik va soyalar bilan statik view lar uchun uni yoqing — bu kompoziting yukini kamaytiradi. Animatsiyali view lar uchun o'chiring: har bir o'zgarishda kesh qayta tiklanadi va rasterizatsiya faqat samaradorlikni yomonlashtiradi.