SwiftUI: mi ez, kulcsfogalmak és View Protocol

Mi az a SwiftUI?

A SwiftUI egy deklaratív keretrendszer, amelyet az Apple 2019-ben mutatott be az UIKit helyettesítésére új projektekben. Ahelyett, hogy manuálisan hozna létre UIView példányokat és adná hozzá a hierarchiához, a fejlesztő a View protokollt implementáló struktúrákon keresztül írja le a felületet. A SwiftUI automatikusan kiszámítja a jelenlegi és új állapot közötti különbséget, és saját megjelenítőmotorjával csak a megváltozott részeket rajzolja újra.

A keretrendszer Swift nyelven íródott value semantics (struktúrák, nem osztályok) használatával, ami a UI-komponenseket könnyűvé és szálbiztossá teszi. Az UIKit-től eltérően, ahol egy UIViewController 200+ bájtot nyomhat az Objective-C runtime miatt, egy SwiftUI View csupán egy néhány bájt méretű struktúra. Ez különösen fontos a korlátozott memóriájú watchOS esetében.

A SwiftUI platformfüggetlensége

Ugyanaz a View leírás működik iPhone, iPad, Mac, Apple Watch, Apple TV és Apple Vision Pro készülékeken. A SwiftUI a platformhoz igazítja a felületet: iOS-en — érintőgesztusok, macOS-en — billentyűparancsok, watchOS-en — Digital Crown görgetés. Ez csökkenti a fejlesztési időt azoknál a cégeknél, amelyek alkalmazásokat adnak ki az Apple több platformjára, de további konfigurálást igényel az egyes platformok specifikus elemeihez.

View Protocol és a nézet teste

A SwiftUI-ban minden képernyő egy struktúra, amely a View protokollt implementálja egyetlen követelménnyel: a some View típusú computed property body. A some kulcsszó (opaque type) elrejti a nézet konkrét típusát, lehetővé téve a SwiftUI számára a megjelenítés optimalizálását. A body-n belül a fejlesztő kész komponenseket — Text, Image, Button, List — kombinál a ViewBuilder segítségével, amely több nézetet gyűjt össze egybe.

struct GreetingView: View {
    let name: String

    var var body: some View {
        VStack {
            Text("Szia, \(name)!")
                .font(.title)
                .foregroundColor(.blue)
            Image(systemName: "hand.wave")
                .imageScale(.large)
        }
        .padding()
    }
}

A példában a VStack (függőleges verem) Text és Image elemeket tartalmaz. A name érték a struktúra inicializátorán keresztül kerül átadásra — így működik a DI (Dependency Injection) a SwiftUI-ban külső DI tárolók nélkül. Minden módosító egy új nézetet ad vissza az alkalmazott változtatással, az eredeti mutálása nélkül. Ez az értéktípusok megváltoztathatatlanságának (immutability) köszönhetően lehetséges.

ViewBuilder és feltételes kifejezések

A ViewBuilder egy result builder, @resultBuilder annotációval, amely akár 10 nézetet gyűjt össze egybe. A body-n belül használható if/else, switch és ForEach további burkolók nélkül. A ForEach Identifiable elemekkel működik — minden nézet egyedi id-t kap a helyes animációhoz beszúráskor/törléskor.

Állapotkezelés: @State, @Binding, @ObservedObject

A SwiftUI-ban az állapot határozza meg, hogy milyen tartalom jelenik meg a képernyőn. Amikor az állapot megváltozik, a SwiftUI újra létrehozza a függő nézet body-ját, és összehasonlítja az eredményt az előzővel, diff algoritmust alkalmazva. Az állapot tárolására property wrappers-eket használnak — mindegyik a saját feladatát oldja meg: lokális állapot, kapcsolat a gyermek nézettel vagy külső adatmodell.

struct CounterView: View {
    @State private var count = 0

    var var body: some View {
        VStack {
            Text("Számláló: \(count)")
            Button("Növel") {
                count += 1
            }
        }
    }
}

class UserViewModel: ObservableObject {
    @Published var name = ""
    @Published var age = 0
}

Az @State egy lokális egyszerű értéket (Int, String, Bool) tárol a View struktúrán belül. A SwiftUI kiszervezi a memóriát a struktúrából egy külön tárolóba — ezért az @State tulajdonság módosítható (mutálható), még akkor is, ha a View értéktípus. Az @ObservableObject — olyan osztályokhoz, amelyek @Published tulajdonságokkal rendelkeznek, és amelyek változásai automatikusan értesítik a SwiftUI-t az újrarajzolás szükségességéről.

@Binding és szülő-gyermek kapcsolat

Az @Binding kétirányú kapcsolatot hoz létre a szülő nézetben található adatforrással. A szülő átadja a $variable (projected value) értéket, a gyermek a bindingon keresztül olvassa és írja az értéket. Ez lehetővé teszi a szövegbevitel vagy kapcsoló külön komponensbe történő kiszervezését, miközben az állapot a szülőben marad. @Binding nélkül minden változtatás callback zárványt igényelne az új érték felfelé történő továbbításához.

Navigáció a SwiftUI-ban: NavigationStack és NavigationLink

Az iOS 16 előtt a SwiftUI-ban a navigáció NavigationView-ra épült — egy elavult API-ra, bonyolult viselkedéssel iPaden (split view, double column). Az iOS 16-tól kezdve az Apple a NavigationStack-et ajánlja — egy egyszerűsített alternatívát típusbiztos útvonalakkal. A fejlesztő meghatározza a lehetséges útvonalak enum-ját, és a NavigationStack automatikusan kezeli a képernyők vermét mély linkek támogatásával és a gyökérhez való visszatéréssel.

enum Route: Hashable {
    case detail(id: Int)
    case settings
}

struct ContentView: View {
    var var body: some View {
        NavigationStack {
            List {
                NavigationLink("Részlet képernyő",
                               value: Route.detail(id: 42))
                NavigationLink("Beállítások",
                               value: Route.settings)
            }
            .navigationDestination(for: Route.self) { route in
                switch route {
                case .detail(let id): DetailView(id: id)
                case .settings: SettingsView()
                }
            }
        }
    }
}

A Route típusú útvonalak: A Hashable lehetővé teszi bármilyen adattípus használatát paraméterek átadásához. A navigationDestination(for:destination:) összeköti az útvonal típusát a cél nézettel. Előny az UIKit navigációval szemben — új útvonal hozzáadásakor nincs szükség újrarajzolásra: elég egy case hozzáadása az enumhoz és egy handler a switchhez. A mély linkek a NavigationStack-en lévő processDeepLink segítségével kerülnek feldolgozásra.

Programozott navigáció

Programozott átmenethez (bejelentkezés, időzítő vagy szerver válasz után) @State használatos a NavigationLink inicializátorral: NavigationLink(isActive: $isActive). Az isActive = true beállításakor az átmenet a felhasználó érintése nélkül történik. Alternatíva — a $path tömb bindingje a NavigationStack-ben: $path.append(Route.detail(id: 1)).

View Modifier — a megjelenés konfigurálása

A Modifier egy metódus, amely a nézet módosított másolatát adja vissza. Az UIKit-től eltérően, ahol a tulajdonságok konfigurálása a meglévő nézet mutálásával történik, a SwiftUI egy új értéket hoz létre az alkalmazott változtatással. A módosítók lánca (chaining) az egymást követő transzformációkból építi fel a végső felületet: betűtípus → térköz → szín → árnyék → gesztus.

Az Apple több mint 200 beépített módosítót kínál. A leggyakoribbak: .font(), .foregroundColor(), .padding(), .background(), .cornerRadius(), .shadow(), .opacity(), .offset(). A módosítók sorrendje fontos: a .padding() a .background() előtt a térközzel ellátott területet színezi, utána — csak a belső területet. Az egyedi módosítók a ViewModifier protokollon keresztül jönnek létre.

Feltételes módosítók és animáció

A módosítók feltételesen alkalmazhatók a ternáris operátor segítségével: .foregroundColor(isError ? .red : .primary). Az animációhoz .animation(.easeInOut, value: state) használatos — az animációs módosító az állapot egy konkrét tulajdonságához kötődik. Ennek a tulajdonságnak a megváltozásakor a SwiftUI animálja az átmenetet a régi és új érték között. Az animáció opacity, offset, scale, rotation, méret és szín esetén működik — minden tulajdonsághoz egy megfelelő AnimatableParameter van meghatározva.

Egyedi animációkhoz elérhető a .transition (megjelenés/eltűnés) és a .matchedGeometryEffect (egy elem zökkenőmentes átmenete két tároló között). Utóbbi hero-animációkhoz használatos listákban: egy ikon a lista cellájában zökkenőmentesen alakul át nagy képpé a részletképernyőn.

SwiftUI vs UIKit: megközelítések összehasonlítása

A választás a SwiftUI és az UIKit között az egyik első dilemma egy iOS-fejlesztő számára. Mindkét keretrendszert támogatja az Apple, de a felületépítés feladatát alapvetően eltérő módon oldják meg: a SwiftUI deklaratív, az UIKit imperatív. A különbség az állapotkezelésben, navigációban, teljesítményben és kompatibilitásban nyilvánul meg.

Az iOS 17 minimális verziójú új projektekhez az Apple a SwiftUI-t ajánlja elsődleges keretrendszerként. Az UIKit továbbra is szükséges a megjelenítés finom vezérlését igénylő felületekhez (egyedi UICollectionViewLayout, összetett CAAnimation jelenetek) vagy az iOS 12–14 támogatásához. Sok projekt hibrid megközelítést használ: a SwiftUI a UIHostingController-n keresztül beágyazódik az UIKit alkalmazásba, az UIViewRepresentable pedig lehetővé teszi UIKit-komponensek használatát a SwiftUI hierarchián belül.