UIKit — mi ez, kulcsfogalmak és architektúra

Mi az UIKit?

UIKit — az Apple keretrendszere, amely osztályokat biztosít a felhasználói felület létrehozásához és kezeléséhez iOS, iPadOS és macOS (Mac Catalyst-en keresztül) rendszereken. A Core Animation, Core Graphics és Quartz Core tetején működik, elvonatkoztatva az alacsony szintű megjelenítést magas szintű objektumokra — gombokra, címkékre, képekre és tárolókra. Az UIKit 2007-ben jelent meg az iPhone OS 1-gyel együtt, és továbbra is a fő keretrendszer az iOS fejlesztéshez a SwiftUI mellett.

A keretrendszer imperatív megközelítést követ: a fejlesztő létrehozza az UIButton, UILabel, UIImageView osztályok példányait, beállítja tulajdonságaikat (szín, betűtípus, pozíció), és hozzáadja őket a nézethierarchiához a addSubview segítségével. A felület minden változtatása explicit módon történik — nincs varázslatos frissítés a háttérben. Ez különbözteti meg az UIKit-et a deklaratív keretrendszerektől, mint a SwiftUI, ahol az állapot leírása automatikusan újrarajzolja a felületet.

Az UIKit fő osztályai

A keretrendszer több osztálykategóriát tartalmaz. UIView — az alapelem, amelyből az összes vizuális komponens származik. UIWindow — a legfelső szintű tároló, amelyen keresztül a nézetek megjelennek a képernyőn. UIViewController — a vezérlő, amely nézetek halmazát kezeli és reagál a képernyő forgatására, a billentyűzet megjelenésére és a rendszerértesítésekre. UIApplication — a belépési pont, amely az érintési és gombnyomási eseményeket dolgozza fel.

Szöveghez a UILabel (statikus szöveg), UITextField (egysoros bevitel), UITextView (többsoros bevitel) használatos. Gombokhoz — UIButton, beleértve a rendszer-, egyedi és SF Symbols ikonográfiás változatokat. Navigációhoz — UINavigationController, UITabBarController és UISplitViewController. Összesen az UIKit több mint 200 nyilvános osztályt tartalmaz.

Az UIKit architektúrája: rétegek és nézethierarchia

Az UIKit architektúrája rétegekre épül: minden réteg a megjelenítés saját aspektusáért felelős. A legalacsonyabb szinten a Core Graphics található — az útvonalak, szöveg és képek megjelenítő motorja. Felette — a Core Animation, amely a rétegek (CALayer) kompozícióját és az állapotok közötti animációkat kezeli. Az UIKit ezek tetejére építi az objektumorientált API-t: UIView, UIViewController és UIResponder.

Minden alkalmazásnak van nézethierarchiája (view hierarchy) — egy fa, melynek gyökere az UIWindow. Alatta — a gyökér UIViewController, annak nézete, és belül — beágyazott subview-ok. Az érintési események a responder chain láncon terjednek: a legmélyebben beágyazott nézettől a szülőkig, majd tovább az UIApplication-ig. Ha egyetlen objektum sem dolgozta fel az érintést, az figyelmen kívül marad.

UIView és CALayer

Minden UIView tartalmaz egy CALayer réteget, amely a pixelek képernyőn történő megjelenítéséért felelős. A nézet kezeli az érintéseket és a hozzáférhetőséget, a réteg — a grafikát: shadow, cornerRadius, border, transform. A szétválasztás lehetővé teszi a nehéz grafika külön szálra (render server) helyezését anélkül, hogy blokkolná a main thread-et. Az Apple javasolja a közvetlen CALayer-rel való munkát, ha több mint 200 nézetre van szükség a képernyőn — ez csökkenti a CPU terhelését.

A Responder Chain részletesen

A responder lánc azzal az objektummal kezdődik, amely elsőként kapja az érintési eseményt. Ha nem dolgozza fel az eseményt (a touchesBegan metódus nincs felülírva), az esemény továbbadódik a lánc következő responder-ének: next, superview, next responder, UIViewController, UIWindow, UIApplication, App Delegate. Ez lehetővé teszi globális gesztusok és billentyűzetesemények elfogását jelenet szinten anélkül, hogy minden nézethez hozzá kellene adni egy kezelőt.

Az UIViewController életciklusa

Minden UIViewController egy szigorúan meghatározott eseménysorozaton megy keresztül. Az életciklus fázisokat foglal magában: inicializálás, nézet betöltése, megjelenés a képernyőn, elrendezés frissítése forgatáskor, elrejtés, a képernyő elhagyása és memória felszabadítása. A fejlesztő felülírja a megfelelő metódusokat, hogy saját kódját végrehajtsa az egyes szakaszokban.

class ProfileViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        loadUserProfile()
    }

    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        clearCache()
    }
}

A viewDidLoad-ban konfigurálódik a felület — subview-ok jönnek létre, korlátozások kerülnek beállításra, delegáltak iratkoznak fel. A viewWillAppear-ban a megjelenítés előtti műveletek történnek: friss adatok betöltése a hálózatról, értékek frissítése. viewDidDisappear — hely az értesítések leiratkozásához és az ideiglenes adatok tisztításához. A super hívása kötelező minden felülírásban, különben az eseménylánc megszakad.

Memóriakezelés és viewDidUnload

Az iOS régebbi verzióiban létezett a viewDidUnload metódus, amelyet memóriahiány esetén hívtak meg. Az iOS 6-tól kezdve a metódus eltávolításra került — most az UIKit automatikusan eltávolítja a vezérlő nézeteit, amikor azok nem láthatók. A fejlesztőnek csak weak-ként kell deklarálnia a nézetekre mutató összes referenciát, hogy az ARC helyesen felszabadíthassa a memóriát a rendszer figyelmeztetésének kézhezvételekor.

Átmenetek vezérlők között

Az UIKit kétféle átmenetet támogat: segue (Storyboard-on keresztül) és programozott navigációt UINavigationController-en keresztül. A programozott átmenet így néz ki: navigationController?.pushViewController(detailVC, animated: true). Ekkor a detailVC életciklusa normál módon zajlik — a viewDidLoad egyszer hívódik meg, a viewWillAppear — minden megjelenítéskor.

Auto Layout és adaptív elrendezés

Auto Layout — egy elempozícionáló rendszer, amely matematikai kapcsolatokon (korlátozásokon) alapul. Rögzített X és Y koordináták helyett a fejlesztő szabályokat ír le: „a gomb a címkétől jobbra helyezkedik el 16pt távolságra” vagy „a nézet a képernyő szélességében nyúlik el 20pt bal és jobb margóval”. A rendszer megoldja a kapott egyenletrendszert futási időben, hozzáigazítva a felületet bármilyen képernyőméretre.

A korlátozások beállíthatók az Interface Builder-ben (drag-and-drop segítségével) vagy programozottan Swift-ben. Minden korlátozás egy NSLayoutConstraint osztály példánya a következő paraméterekkel: firstItem, firstAttribute, relation, secondItem, secondAttribute, multiplier, constant. A korlátozások aktiválása isActive = true vagy tömegesen NSLayoutConstraint.activate() segítségével történik.

Safe Area és Layout Margins

Az iPhone X-szel (2017) az Apple bevezette a Safe Area-t — a képernyő notch-tól, lekerekített sarkoktól és home bar jelzőtől mentes területét. A korlátozásokat a view.safeAreaLayoutGuide-hoz kell kötni, nem a view-hoz. Layout Margins belső margókat ad a nézethez, alapértelmezés szerint 8pt vagy 16pt a kontextustól függően. A safeAreaLayoutGuide használata garantálja a helyes megjelenítést az iPhone és iPad minden generációján.

Korlátozások animációja

Az Auto Layout támogatja az animációt a korlátozások konstansainak megváltoztatásán keresztül. Elég frissíteni a korlátozás constant-ját és meghívni a UIView.animate-et layoutIfNeeded-del az animációs blokkban. A rendszer simán újraszámolja az összes nézet pozícióját a hierarchiában. Ezt a technikát használják kibontakozó blokkokhoz, adaptív billentyűzetpanelhez és képernyőorientáció váltáshoz.

Munka táblákkal és gyűjteményekkel

UITableView és UICollectionView — az UIKit két erőteljes eszköze listák és rácsok megjelenítéséhez. Az UITableView függőleges, egy oszlopos listákhoz alkalmas (chat, beállítások, hírfolyam). Az UICollectionView — rácsokhoz, vízszintes listákhoz, körhintákhoz és egyedi elrendezésekhez (galéria, termékek, naptár). Mindkét osztály a delegálási mintát használja az adatok és a megjelenés szétválasztására.

Az adatforrás a UITableViewDataSource protokoll kötelező metódusokkal: numberOfRowsInSection és cellForRowAt. A delegált UITableViewDelegate kezeli a cellák megnyomását, a sorok magasságát és a görgetési eseményeket. A reuse identifier mechanizmus újrahasznosítja a képernyőről eltűnt cellákat, ami kritikus fontosságú a teljesítmény szempontjából nagy listákon.

class ContactsViewController: UITableViewController {

    private let contacts = ["Anna", "Boris", "Viktor"]

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.register(UITableViewCell.self,
                           forCellReuseIdentifier: "cell")
    }

    override func tableView(_ tableView: UITableView,
                          numberOfRowsInSection section: Int) -> Int {
        return contacts.count
    }

    override func tableView(_ tableView: UITableView,
                          cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell",
                                                 for: indexPath)
        var content = cell.defaultContentConfiguration()
        content.text = contacts[indexPath.row]
        cell.contentConfiguration = content
        return cell
    }
}

A példa egy minimális vezérlőt mutat be sztringek tömbjének megjelenítéséhez. A cella a UIListContentConfiguration-n keresztül konfigurálódik — modern API (iOS 14+), amely felváltotta az elavult textLabel és detailTextLabel elemeket. A cellaosztály regisztrációja a viewDidLoad-ban kötelező, különben az alkalmazás futásidejű kivétellel összeomlik.

UICollectionView és Compositional Layout

Az iOS 13-tól kezdve az Apple a UICollectionViewCompositionalLayout-ot ajánlja összetett elrendezések építéséhez. A fejlesztő deklaratívan írja le a szekciót, csoportot, elemet és azok méreteit — tetszőleges geometriájú rácsot kap: szalag, 2x2 rács, körhinta, ornamentika. A Compositional Layout felváltotta az elavult UICollectionViewFlowLayout-ot minden új projektben. A DiffableDataSource-szal kombinálva a gyűjtemény frissítése egyetlen apply(snapshot) hívásra redukálódik, és a változások animációja automatikusan megtörténik.

Kódpéldák Swift-ben

Az alábbiakban két gyakorlati példa található az UIKit valós feladatokban való használatára: egyéni nézet létrehozása árnyékkal és lekerekítéssel, valamint csúsztatási gesztus kezelése elem lista törléséhez.

extension UIView {
    func applyCardStyle() {
        layer.cornerRadius = 12
        layer.shadowOpacity = 0.15
        layer.shadowRadius = 8
        layer.shadowOffset = CGSize(width: 0, height: 2)
        layer.masksToBounds = false
    }
}

@objc private func handleSwipe(_ gesture: UISwipeGestureRecognizer) {
    guard let swipedView = gesture.view else { return }
    UIView.animate(withDuration: 0.3) {
        swipedView.alpha = 0
        swipedView.transform = CGAffineTransform(translationX: 300, y: 0)
    } completion: { _ in
        swipedView.removeFromSuperview()
    }
}

Az applyCardStyle kiterjesztés árnyékot és lekerekítést ad bármely nézethez — hasznos termékkártyákhoz, profilokhoz és értesítésekhez. A handleSwipe metódus animációval törli az elemet, ha a felhasználó jobbra csúsztatott. A kezelő a nézethez a addGestureRecognizer segítségével kerül hozzáadásra UISwipeGestureRecognizer(direction: .right) konfigurációval. A masksToBounds = false beállítása fontos, hogy az árnyék ne legyen levágva a nézet határai által.

Összetettebb felületekhez használja a UIStackView-t — egy tárolót, amely automatikusan elosztja a beágyazott nézeteket vízszintesen vagy függőlegesen. A Stack View leegyszerűsíti az elrendezést: nem kell korlátozásokat beállítani minden elemhez, elég egy korlátozás magához a stack-hez.