„SwiftUI“ išdėstymo įvaldymas: sudėtingų dizainų apribojimų imitavimas

Išsivaduoti iš UIKit apribojimų: SwiftUI metodas

Perėjimas nuo UIKit prie SwiftUI gali atrodyti tarsi pereiti iš griežtų gairių pasaulio į kūrybinės laisvės pasaulį. 🌟 Nors lankstumas yra įdomus, jis taip pat gali būti didžiulis, ypač kūrėjams, pripratusiems prie suvaržymais pagrįsto išdėstymo. Viena įprastų problemų yra sukurti maketus, kurie puikiai prisitaiko prie įvairių įrenginių, išlaikant proporcingą tarpą ir struktūrą.

Įsivaizduokite, kad kuriate sąsają su viršutiniu konteineriu, padalytu į tris fiksuoto aukščio vaizdus, ​​ir apatinį konteinerį, kuris tęsiasi, kad užpildytų laisvą erdvę. Mažesniuose įrenginiuose viršutinė dalis turi susitraukti, bet niekada neviršija tam tikro minimalaus aukščio. Didesniuose įrenginiuose viršutinis konteineris gali augti, bet tik iki nustatyto maksimalaus aukščio. Subalansuojant šiuos reikalavimus gali atrodyti, kad „SwiftUI“ įsmeigus sriegį į adatą.

UIKit sprendžiant tai reikėtų panaudoti automatinį išdėstymą ir apribojimus, užtikrinant, kad vaizdai ir tarpikliai būtų pritaikyti proporcingai. Tačiau „SwiftUI“ reikalauja pakeisti perspektyvą, sutelkiant dėmesį į santykines reikšmes ir modifikatorius. Iššūkis yra pasiekti tą patį tikslumo lygį per daug nesudėtinant kodo ir kiekviename žingsnyje nenaudojant GeometryReader.

Šiame straipsnyje kalbama apie tokio išdėstymo kūrimą naudojant „SwiftUI“ ir pateikiami praktiniai patarimai, kaip valdyti mažiausius ir didžiausius matmenis bei išlaikyti proporcingumą visuose įrenginiuose. Turėdami praktinį pavyzdį ir aiškius paaiškinimus, jausitės galintys priimti SwiftUI deklaratyvų stilių ir pasiekti tokį tikslumą, prie kurio esate įpratę. 🚀

Į apribojimus panašių maketų dekodavimas „SwiftUI“.

Pateikti scenarijai sprendžia iššūkį sukurti į apribojimą panašų išdėstymą „SwiftUI“, imituojantį UIKit automatinio išdėstymo tikslumą. Pirmajame scenarijuje naudojami „Spacer(minLength:)“ ir „.frame(height:)“, kad būtų užtikrintas minimalus rodinių atstumas ir aukštis. Šis metodas užtikrina, kad viršutinis konteineris nesusitrauks žemiau tam tikro aukščio, net ir mažesniuose įrenginiuose. Apibrėždami konkrečias aukščio ribas, neleidžiame maketui žlugti, kai erdvė yra ribota. „Tarpiklis(minLength:)“ garantuoja, kad atstumas tarp antrinių rodinių išliks didesnis nei 20 pikselių, tuo pačiu suteikiant galimybę lanksčiai naudoti didesnius ekranus. 🎯

GeometryReader naudojimas antrajame scenarijuje leidžia dinamiškai pritaikyti išdėstymą. Jis apskaičiuoja viršutinio ir apatinio konteinerių proporcijas pagal galimą ekrano aukštį. Pavyzdžiui, „iPhone“ įrenginyje „topHeight“ dinamiškai reguliuojasi, kad būtų užtikrintas santykis 1:1, laikantis minimalaus ir didžiausio aukščio ribų. „iPad“ įrenginyje parametras „maxTopHeight“ apriboja viršutinio konteinerio augimą ir užtikrina, kad apatiniame konteineryje būtų pakankamai vietos. Dėl to scenarijus idealiai tinka kurti prisitaikančias sąsajas, kurios veikia nuspėjamai visų dydžių įrenginiuose. 📱

Abu scenarijai parodo, kaip tvarkyti proporcingus išdėstymus per daug nepasikliaujant GeometryReader. Naudodami SwiftUI deklaratyviąją sintaksę, mes naudojame „.frame()“ ir „.background()“, kad apibrėžtume išdėstymo struktūrą ir vizualinę hierarchiją. Pavyzdžiui, apatinis konteineris priskiriamas „.frame(maxHeight: .infinity)“, kad būtų ištempta ir užpildyta likusi erdvė, neatsižvelgiant į viršutinio sudėtinio rodinio matmenis. Šis modulinis metodas leidžia kodą naudoti pakartotinai ir lengvai pritaikyti skirtingiems dizaino reikalavimams.

Praktikoje šie metodai puikiai tinka kuriant interaktyvius įvairaus turinio programų maketus. Įsivaizduokite, kad kuriate medijos grotuvo programą: viršutinėje skiltyje gali būti rodomi valdikliai (fiksuotas aukštis), o apačioje rodomas vaizdo turinys. Mažesniuose įrenginiuose valdiklių skyrius šiek tiek susitraukia, bet išlieka tinkamas naudoti, o vaizdo įrašas koreguojamas proporcingai. Panašiai prietaisų skydelio sąsajoje galite naudoti šiuos scenarijus, kad užtikrintumėte, jog viršutinis metrikos skydelis būtų skaitomas, o apatinėje skiltyje liktų pakankamai vietos išsamiai diagramai. Derindami šias „SwiftUI“ technologijas, galite sukurti vizualiai patrauklius ir funkcionaliai tvirtus maketus. 🚀

import SwiftUI
struct AdaptiveLayoutView: View {
    let minTopHeight: CGFloat = 200
    let maxTopHeight: CGFloat = 400
    var body: some View {
        GeometryReader { geometry in
            VStack(spacing: 0) {
                VStack {
                    TopView()
                    Spacer(minLength: 20)
                    CenterView()
                    Spacer(minLength: 20)
                    BottomView()
                }
                .frame(height: min(max(minTopHeight, geometry.size.height / 2), maxTopHeight))
                .background(Color.red)
                VStack {
                    FillView()
                }
                .frame(maxHeight: .infinity)
                .background(Color.green)
            }
        }
    }
}
struct TopView: View { var body: some View { Color.blue.frame(height: 50) } }
struct CenterView: View { var body: some View { Color.yellow.frame(height: 50) } }
struct BottomView: View { var body: some View { Color.purple.frame(height: 50) } }
struct FillView: View { var body: some View { Color.orange } }
struct AdaptiveLayoutView_Previews: PreviewProvider {
    static var previews: some View {
        AdaptiveLayoutView()
    }
}

import SwiftUI
struct GeometryLayoutView: View {
    var body: some View {
        GeometryReader { geometry in
            let totalHeight = geometry.size.height
            let topHeight = max(min(totalHeight * 0.5, 400), 200)
            VStack(spacing: 0) {
                VStack {
                    TopView()
                    Spacer(minLength: 20)
                    CenterView()
                    Spacer(minLength: 20)
                    BottomView()
                }
                .frame(height: topHeight)
                .background(Color.red)
                VStack {
                    FillView()
                }
                .frame(height: totalHeight - topHeight)
                .background(Color.green)
            }
        }
    }
}
struct GeometryLayoutView_Previews: PreviewProvider {
    static var previews: some View {
        GeometryLayoutView()
    }
}

Dinaminių maketų pasiekimas naudojant „SwiftUI“ be „GeometryReader“.

Vienas galingas, bet mažiau ištirtas „SwiftUI“ aspektas yra galimybė sukurti atsakius išdėstymus naudojant santykinius modifikatorius, išvengiant GeometryReader poreikio. Naudodami ypatybes, pvz., „.frame()“ ir „.layoutPriority()“, galite efektyviai valdyti, kaip rodiniai koreguojami skirtingų dydžių ekranuose. Pavyzdžiui, priskyrus aukštesnį išdėstymo prioritetą apatiniam konteineriui, jis išsiplečia, kad užpildytų laisvą erdvę, kai viršutinio konteinerio aukštis yra ribojamas. Ši strategija ypač naudinga siekiant išvengti persidengimo ar išdėstymo susitraukimo. 🎯

Kitas būdas apima „.fixedSize()“ naudojimą viršutiniame sudėtiniame rodinyje. Šis modifikatorius užtikrina, kad rodiniai išlaikytų savo vidinį turinio dydį, prireikus nepaisydami pirminių apribojimų. Pavyzdžiui, prietaisų skydelyje su viršutine statistikos juosta „.fixedSize()“ garantuoja, kad juostos metrika visada bus įskaitoma. Be to, derinant „.padding()“ su dinaminiais tarpikliais, galima tiksliai valdyti tarpų tarp vaizdų, nereikalaujant aiškių matmenų, todėl išdėstymas yra aiškesnis ir lengviau prižiūrimas.

Galiausiai, pristačius „.alignmentGuide()“, galima tiksliai išdėstyti rodinius, palyginti su pirminiu sudėtiniu rodiniu. Tais atvejais, kai vaizdas iš viršaus turi likti pritvirtintas, o antriniai rodiniai prisitaiko prie besikeičiančios erdvės, „.alignmentGuide()“ yra neįkainojamas. Pavyzdžiui, medijos atkūrimo programoje atkūrimo mygtukas (viršuje centre) gali likti idealioje padėtyje, o aplinkiniai elementai dinamiškai prisitaiko, kad būtų išlaikyta vaizdinė harmonija. Derindami šiuos metodus galite sukurti pritaikomus ir tvirtus maketus, labai nepasitikėdami GeometryReader. 🚀