Size Class: ce este, clasele de dimensiune Compact și Regular în iOS
Size Class — este un mecanism iOS pentru layout adaptiv care împarte toate dispozitivele în două categorii pe fiecare axă: Compact (îngust/scurt) și Regular (lat/lung). Combinațiile acestor valori determină cum se afișează interfața pe iPhone, iPad, Mac Catalyst și CarPlay. Conform Apple Human Interface Guidelines, 2024, Size Class permite construirea unui singur storyboard pentru toate dispozitivele, folosind Auto Layout și UITraitCollection. Sistemul funcționează pe toate dispozitivele iOS începând cu iOS 8.
Principalele puncte
- Size Class — sistem de clasificare a dimensiunii în iOS cu două valori pe axă: Compact (comprimat) și Regular (dimensiune completă).
- Size Class orizontal pe iPhone în orientare portret — Compact, pe iPad — Regular. Vertical — Regular pe toate iPhone-urile cu excepția SE.
- UITraitCollection — interfață de programare pentru obținerea Size Class curent și reacționarea la schimbările trait collection în runtime.
- Interface Builder permite configurarea constrângerilor și vizibilității elementelor pentru fiecare combinație Size Class cu instrumentul Vary for Traits.
- Layout-ul adaptiv bazat pe Size Class înlocuiește storyboard-urile separate pentru iPhone și iPad — un singur fișier se adaptează la toate dispozitivele.
Ce este Size Class?
Size Class — este o clasificare abstractă a ecranului în iOS, introdusă de Apple în iOS 8 pentru unificarea layout-ului adaptiv. În loc să verifice modelul specific al dispozitivului, Size Class determină două caracteristici: spațiul disponibil pe orizontală și pe verticală. Fiecare caracteristică ia una din două valori — Compact (spațiu limitat) sau Regular (spațiu suficient). Combinația acestor valori formează trait collection, care este transmisă tuturor elementelor interfeței.
Istorie și scop
Înainte de apariția Size Class, dezvoltatorii creau storyboard-uri separate pentru iPhone și iPad sau foloseau verificări UI_USER_INTERFACE_IDIOM() în cod. Aceasta ducea la duplicarea codului, umflarea storyboard-urilor și dificultăți la suportarea noilor dimensiuni de ecran. Size Class a rezolvat problema oferind un sistem universal: dezvoltatorul configurează interfața pentru 4 combinații Compact/Regular, iar iOS alege automat cea potrivită. Odată cu apariția Split View pe iPad și a diferitelor dimensiuni iPhone, sistemul a devenit indispensabil pentru layout-ul adaptiv.
Cum funcționează Size Class
Size Class este calculat de iOS pe baza lățimii și înălțimii ecranului curent, ținând cont de orientare și multitasking. Valorile nu sunt legate de pixeli specifici — este o categorie logică. De exemplu, iPhone 16 Pro în portret are Compact orizontal și Regular vertical. Același iPhone în peisaj — Compact pe ambele axe. iPad în Split View cu o aplicație pe 1/3 din ecran primește Compact orizontal, deși în modul ecran complet — Regular. Sistemul actualizează automat Size Class la schimbarea orientării sau Split View.
Ce clase de dimensiune există
Size Class folosește patru combinații a două valori pe două axe. Fiecare combinație are aplicarea sa în funcție de tipul dispozitivului și orientarea acestuia. Înțelegerea acestor combinații este baza proiectării interfeței adaptive pentru iOS. Sistemul acoperă toate dispozitivele Apple actuale: iPhone, iPad, Mac Catalyst și CarPlay. Apple recomandă începerea proiectării cu combinația wAny hAny (layout de bază) și rafinarea pentru combinații specifice.
Patru combinații Size Class
wCompact hRegular — iPhone portret (cu excepția Plus/Max în unele cazuri). wCompact hCompact — iPhone SE/6/7/8 peisaj. wRegular hRegular — iPad ecran complet în orice orientare, iPhone Plus/Max în peisaj. wRegular hCompact — iPad în peisaj cu conținut îngust. Fiecare combinație determină ce constrângeri și elemente sunt active. Dezvoltatorul poate seta aspectul pentru fiecare combinație separat în Interface Builder.
Size Class pentru Mac Catalyst
Pe Mac Catalyst, Size Class este întotdeauna wRegular hRegular — interfață cu dimensiune completă. Aceasta înseamnă că versiunea Mac a aplicației iPad primește spațiu maxim. Dezvoltatorul poate folosi verificări suplimentare prin UIScreen.traitCollection.userInterfaceIdiom pentru a distinge Mac de iPad. Size Class pe Mac funcționează stabil, dar aplicațiile Catalyst necesită adesea adaptare suplimentară pentru mouse și tastatură, dincolo de domeniul Size Class.
Cum influențează Size Class layout-ul adaptiv
Size Class determină ce constrângeri Auto Layout sunt active, ce elemente de interfață sunt vizibile și cum sunt dispuse subview-urile. Dezvoltatorul poate seta constrângeri diferite pentru Size Class-uri diferite, iar iOS le comută automat la schimbarea trait collection. De exemplu, pe iPad (wRegular hRegular) tabelul cu detalii se afișează în Master-Detail, pe iPhone (wCompact hRegular) — în Navigation Stack. Acesta este scenariul principal al layout-ului adaptiv cu Size Class.
Setarea și eliminarea constrângerilor
În Interface Builder, dezvoltatorul selectează combinația Size Class prin butonul Vary for Traits și adaugă constrângeri care trebuie să acționeze doar pentru această combinație. Constrângerile setate pentru wAny hAny acționează întotdeauna. Constrângerile setate pentru o combinație specifică se activează doar la potrivirea Size Class. Dacă pentru o combinație nu sunt setate constrângeri speciale, se folosesc cele de bază. La schimbarea Size Class, iOS animează tranziția între seturile de constrângeri.
Ascunderea și afișarea elementelor
Indicatorul Installed din Interface Builder permite ascunderea elementelor pentru Size Class-uri specifice. Dezvoltatorul marchează elementul ca Uninstalled pentru combinația selectată. De exemplu, butonul Details este vizibil doar pe iPad (wRegular hRegular), iar pe iPhone — ascuns. Aceasta este mai simplu decât gestionarea isHidden în cod. Pentru ascunderea programatică se folosește suprascrierea traitCollectionDidChange sau metoda willTransition, unde se verifică Size Class curent.
Utilizarea Size Class în Interface Builder
Interface Builder oferă instrumentul vizual Vary for Traits pentru lucrul cu Size Class. Dezvoltatorul selectează combinația necesară (lățime și înălțime), iar Interface Builder arată previzualizarea ecranului pentru această combinație. Toate modificările de constrângeri, dimensiuni, fonturi și vizibilitate făcute în acest mod se aplică doar Size Class-ului selectat. Ieșirea din mod confirmă setările. Această abordare înlocuiește necesitatea de a scrie cod de adaptare pentru diferite dispozitive.
Lucrul pas cu pas în Interface Builder
Pentru configurarea Size Class în Interface Builder, dezvoltatorul deschide storyboard-ul, selectează view controller-ul și apasă butonul Vary for Traits în panoul inferior. Apoi selectează Width (Compact, Regular sau Any) și Height (Compact, Regular sau Any). Interfața comută în modul de editare pentru combinația selectată. Toate modificările de constrângeri, adăugarea sau eliminarea elementelor se aplică doar acestei combinații. După finalizarea configurării, dezvoltatorul iese din mod — modificările sunt salvate pentru combinația specifică Size Class.
Cele mai bune practici
Apple recomandă începerea cu layout-ul de bază pentru wAny hAny (combinația de bază care acoperă toate dispozitivele). Apoi rafinați layout-ul pentru combinațiile problematice: wCompact hRegular (iPhone portret) și wRegular hRegular (iPad). Nu se recomandă configurarea fiecărei combinații — doar acolo unde layout-ul se strică. Configurarea excesivă complică întreținerea. Pentru reglarea fină a fonturilor, folosiți Dynamic Type în loc de Size Class: fonturile se adaptează automat la dimensiunea ecranului.
Size Class în cod: UITraitCollection
UITraitCollection — este o clasă iOS care conține Size Class curent și alte caracteristici ale mediului (force touch, display scale, user interface idiom). Fiecare UIView și UIViewController are propriul traitCollection, moștenit de la părinte. Dezvoltatorul obține Size Class prin traitCollection.horizontalSizeClass și traitCollection.verticalSizeClass, care returnează UIUserInterfaceSizeClass (.compact, .regular sau .unspecified). Schimbarea Size Class este urmărită prin suprascrierea traitCollectionDidChange.
Exemplu: comutarea layout-ului în cod
Luați în considerare exemplul adaptării layout-ului UICollectionView la Size Class. Pe iPad (wRegular hRegular) folosim UICollectionViewCompositionalLayout cu două coloane, pe iPhone (wCompact hRegular) — cu una. Codul verifică Size Class orizontal și selectează layout-ul corespunzător. La rotire sau trecerea în Split View, iOS apelează traitCollectionDidChange, iar controlerul comută layout-ul cu animație.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Reacționarea la schimbările trait collection
Metoda traitCollectionDidChange este apelată la orice schimbare a Size Class: rotirea dispozitivului, intrarea/ieșirea din Split View, conectarea unui display extern. În această metodă, dezvoltatorul actualizează layout-ul, reîncarcă colecțiile, actualizează prioritățile constrângerilor sau schimbă vizibilitatea elementelor. Este important să verificați dacă s-a schimbat exact Size Class, nu o altă caracteristică: comparați traitCollection.horizontalSizeClass cu previousTraitCollection?.horizontalSizeClass. Optimizarea previne redesenările inutile la schimbarea force touch sau display scale.
Particularitățile Size Class pe diferite dispozitive
Diferitele dispozitive Apple au combinații diferite de Size Class, iar dezvoltatorul trebuie să țină cont de aceste particularități. iPhone în portret — wCompact hRegular, în peisaj — depinde de model: iPhone SE/6/7/8 (wCompact hCompact), iPhone X și mai noi (wCompact hCompact sau wCompact hRegular în funcție de conținut). iPad în modul ecran complet — wRegular hRegular, în Split View — poate fi wCompact hRegular (1/3 ecran) sau wRegular hRegular (2/3 ecran). Mac Catalyst — întotdeauna wRegular hRegular.
iPhone: toate dimensiunile
Pe iPhone, Size Class este stabil pentru majoritatea modelelor, dar există nuanțe. iPhone Plus (6+, 7+, 8+) și Max (X, XS, 11 Pro, 13–16 Pro Max) în peisaj au wRegular hCompact — ca iPad mini. Aceasta permite plasarea conținutului în două coloane pe iPhone-urile mari în peisaj. iPhone SE (generațiile 1–3) în peisaj — wCompact hCompact. Size Class vertical pe toate iPhone-urile în portret — Regular, cu excepția iPhone SE în peisaj, unde este Compact. Orizontal — întotdeauna Compact pentru portret și peisaj (cu excepția Plus/Max în peisaj).
iPad și Split View
iPad în modul ecran complet — wRegular hRegular, oferind maximă flexibilitate a layout-ului. În Split View comportamentul se schimbă: dacă aplicația ocupă 1/3 din ecran (Slide Over sau Split la 1/3), Size Class orizontal devine Compact, deși vertical rămâne Regular. La 2/3 ecran — wRegular hRegular. Dezvoltatorul trebuie să testeze interfața în toate modurile Split View, deoarece Size Class se schimbă dinamic. Apple recomandă utilizarea Size Class împreună cu UISplitViewController pentru un comportament consistent pe iPad.
Întrebări frecvente
Cu ce diferă Size Class de breakpoint-ul din CSS?
Size Class — un sistem discret cu 4 combinații, în timp ce CSS-breakpoint-urile sunt continue cu un număr arbitrar de puncte. Size Class abstrage de la dimensiunile specifice ale ecranului, grupând dispozitivele după comportament. CSS-breakpoint-urile sunt legate de pixeli, Size Class — de categorii logice Compact/Regular.
De ce pe iPhone Plus în peisaj Size Class este Regular pe orizontală?
iPhone Plus/Max în peisaj are lățimea ecranului suficientă pentru afișarea conținutului în două coloane (ca pe iPad mini). Apple atribuie orizontal Regular pentru ca dezvoltatorul să poată folosi multi-column layout fără verificări suplimentare. Aceasta este o excepție de la regula Compact pentru iPhone.
Se poate schimba Size Class programatic?
Size Class este determinat de iOS pe baza caracteristicilor reale ale dispozitivului și nu poate fi schimbat din codul aplicației. Dezvoltatorul poate doar să reacționeze la valoarea curentă. System UI poate suprascrie Size Class pentru elementele de sistem, dar în aplicație acest lucru este imposibil.
Cum funcționează Size Class cu SwiftUI?
SwiftUI nu folosește Size Class direct — în schimb, dezvoltatorul aplică modificatorii @Environment(\.horizontalSizeClass) pentru citirea valorii curente. SwiftUI oferă instrumente de nivel superior: Size Classes și AnyLayout cu Layout protocol pentru layout adaptiv.
Se actualizează Size Class la conectarea unui monitor extern?
Da, la conectarea unui display extern prin Stage Manager sau Sidecar, iOS actualizează Size Class. Monitorul extern primește de obicei wRegular hRegular, iar ecranul principal își păstrează Size Class-ul. traitCollectionDidChange este apelat pentru ferestre pe fiecare ecran independent.
Rezumat
- Size Class — sistem de clasificare a ecranului iOS cu două valori Compact/Regular pe fiecare axă, total 4 combinații.
- iPhone în portret — wCompact hRegular. iPad în modul ecran complet — wRegular hRegular. iPhone Plus/Max în peisaj — wRegular hCompact.
- Interface Builder oferă Vary for Traits pentru configurarea vizuală a constrângerilor și vizibilității pentru fiecare Size Class.
- UITraitCollection — API programatic pentru citirea Size Class prin horizontalSizeClass și verticalSizeClass. Schimbările sunt urmărite în traitCollectionDidChange.
- Split View pe iPad schimbă dinamic Size Class: la 1/3 ecran, orizontal devine Compact, necesitând adaptarea layout-ului.
- SwiftUI oferă @Environment(\.horizontalSizeClass) pentru citirea Size Class și AnyLayout pentru comutarea între layout-uri în runtime.
- Se recomandă începerea cu layout-ul pentru wAny hAny, apoi adaptarea pentru wCompact hRegular (iPhone) și wRegular hRegular (iPad), fără a supraîncărca celelalte combinații.
Vom dezvolta o aplicație mobilă la cheie
IT Sectr creează aplicații iOS și Android pentru startup-uri și afaceri din 2017. Vă vom consilia și vă vom propune cea mai bună soluție.
Citiți și