Size Class: mi ez, Compact és Regular méretosztályok iOS-ben
Size Class — egy iOS-mechanizmus az adaptív elrendezéshez, amely minden eszközt két kategóriába sorol minden tengely mentén: Compact (keskeny/rövid) és Regular (széles/hosszú). Ezen értékek kombinációi határozzák meg, hogy az interfész hogyan jelenik meg iPhone-on, iPad-en, Mac Catalyst-en és CarPlay-en. A Apple Human Interface Guidelines, 2024 szerint a Size Class lehetővé teszi egyetlen storyboard létrehozását minden eszközhöz, Auto Layout és UITraitCollection használatával. A rendszer minden iOS-eszközön működik iOS 8-tól kezdve.
Főbb pontok
- Size Class — méretosztályozási rendszer iOS-ben két értékkel tengelyenként: Compact (összenyomott) és Regular (teljes méretű).
- Vízszintes Size Class iPhone-on portré tájolásban — Compact, iPad-en — Regular. Függőleges — Regular az összes iPhone-on kivéve SE.
- UITraitCollection — programozási interfész az aktuális Size Class lekéréséhez és a trait collection változásaira való reagáláshoz futásidőben.
- Interface Builder lehetővé teszi a korlátozások és elemek láthatóságának konfigurálását minden Size Class-kombinációhoz a Vary for Traits eszközzel.
- Adaptív elrendezés Size Class alapján helyettesíti a külön storyboard-okat iPhone és iPad számára — egy fájl alkalmazkodik minden eszközhöz.
Mi az a Size Class?
Size Class — a képernyő absztrakt osztályozása iOS-ben, amelyet az Apple az iOS 8-ban vezetett be az adaptív elrendezés egységesítésére. Ahelyett, hogy az eszköz konkrét modelljét ellenőrizné, a Size Class két jellemzőt határoz meg: a rendelkezésre álló helyet vízszintesen és függőlegesen. Minden jellemző két érték egyikét veszi fel — Compact (korlátozott hely) vagy Regular (elegendő hely). Ezen értékek kombinációja alkotja a trait collection-t, amely továbbítódik az interfész összes eleméhez.
Történelem és cél
A Size Class megjelenése előtt a fejlesztők külön storyboard-okat készítettek iPhone és iPad számára, vagy UI_USER_INTERFACE_IDIOM() ellenőrzéseket használtak a kódban. Ez kódismétlődéshez, a storyboard-ok felduzzadásához és az új képernyőméretek támogatásának nehézségeihez vezetett. A Size Class egy univerzális rendszer felkínálásával oldotta meg a problémát: a fejlesztő beállítja az interfészt 4 Compact/Regular kombinációhoz, és az iOS automatikusan kiválasztja a megfelelőt. A Split View megjelenésével iPad-en és a különböző iPhone-méretekkel a rendszer nélkülözhetetlenné vált az adaptív elrendezéshez.
Hogyan működik a Size Class
Size Class-t az iOS számítja ki az aktuális képernyő szélessége és magassága alapján, figyelembe véve a tájolást és a többfeladatos munkavégzést. Az értékek nincsenek konkrét pixelekhez kötve — ez egy logikai kategória. Például az iPhone 16 Pro portréban vízszintes Compact és függőleges Regular értékkel rendelkezik. Ugyanaz az iPhone fekvőben — Compact mindkét tengelyen. Az iPad Split View-ben egy 1/3 képernyőt elfoglaló alkalmazással vízszintes Compact-ot kap, bár teljes képernyős módban — Regular-t. A rendszer automatikusan frissíti a Size Class-t tájolás vagy Split View változásakor.
Milyen méretosztályok léteznek
Size Class négy kombinációt használ két értékből két tengelyen. Minden kombinációnak megvan a maga alkalmazása az eszköz típusától és tájolásától függően. Ezen kombinációk megértése az iOS adaptív interfész tervezésének alapja. A rendszer az összes aktuális Apple-eszközt lefedi: iPhone, iPad, Mac Catalyst és CarPlay. Az Apple a wAny hAny kombinációval (alap elrendezés) való kezdést és a konkrét kombinációk finomítását javasolja.
A Size Class négy kombinációja
wCompact hRegular — portré iPhone (kivéve Plus/Max bizonyos esetekben). wCompact hCompact — fekvő iPhone SE/6/7/8. wRegular hRegular — teljes képernyős iPad bármilyen tájolásban, iPhone Plus/Max fekvőben. wRegular hCompact — iPad fekvőben keskeny tartalommal. Minden kombináció meghatározza, hogy mely korlátozások és elemek aktívak. A fejlesztő minden kombinációhoz külön-külön beállíthatja a megjelenést az Interface Builder-ben.
Size Class Mac Catalyst-hez
Mac Catalyst-en a Size Class mindig wRegular hRegular — teljes méretű interfész. Ez azt jelenti, hogy az iPad alkalmazás Mac verziója maximális helyet kap. A fejlesztő további ellenőrzéseket használhat az UIScreen.traitCollection.userInterfaceIdiom segítségével a Mac és az iPad megkülönböztetésére. A Size Class Mac-en stabilan működik, de a Catalyst alkalmazások gyakran további adaptációt igényelnek egérhez és billentyűzethez, ami túlmutat a Size Class keretein.
Hogyan befolyásolja a Size Class az adaptív elrendezést
Size Class meghatározza, hogy mely Auto Layout-korlátozások aktívak, mely interfészelemek láthatók, és hogyan helyezkednek el a subview-ok. A fejlesztő különböző korlátozásokat állíthat be különböző Size Class-okhoz, és az iOS automatikusan átkapcsolja azokat a trait collection változásakor. Például iPad-en (wRegular hRegular) a táblázat részletekkel Master-Detail-ben jelenik meg, iPhone-on (wCompact hRegular) — Navigation Stack-ben. Ez az adaptív elrendezés fő forgatókönyve Size Class-szal.
Korlátozások beállítása és eltávolítása
Az Interface Builder-ben a fejlesztő kiválasztja a Size Class kombinációt a Vary for Traits gombbal, és hozzáadja a korlátozásokat, amelyeknek csak ehhez a kombinációhoz kell működniük. A wAny hAny-hoz beállított korlátozások mindig működnek. A konkrét kombinációhoz beállított korlátozások csak a Size Class egyezésekor aktiválódnak. Ha egy kombinációhoz nincsenek speciális korlátozások beállítva, az alap korlátozások használatosak. A Size Class változásakor az iOS animálja az átmenetet a korlátozáskészletek között.
Elemek elrejtése és megjelenítése
Az Installed jelző az Interface Builder-ben lehetővé teszi elemek elrejtését bizonyos Size Class-okhoz. A fejlesztő megjelöli az elemet Uninstalled-ként a kiválasztott kombinációhoz. Például a Details gomb csak iPad-en (wRegular hRegular) látható, iPhone-on pedig rejtett. Ez egyszerűbb, mint az isHidden kezelése a kódban. Programozott elrejtéshez a traitCollectionDidChange felülírását vagy a willTransition metódust használják, ahol az aktuális Size Class ellenőrzésre kerül.
Size Class használata az Interface Builder-ben
Interface Builder vizuális eszközt, a Vary for Traits-t biztosítja a Size Class-szal való munkához. A fejlesztő kiválasztja a szükséges kombinációt (szélesség és magasság), és az Interface Builder megjeleníti a képernyő előnézetét ehhez a kombinációhoz. Az ebben a módban végzett összes korlátozás-, méret-, betűtípus- és láthatóságmódosítás csak a kiválasztott Size Class-ra vonatkozik. A módból való kilépés rögzíti a beállításokat. Ez a megközelítés helyettesíti az adaptációs kód írásának szükségességét különböző eszközökhöz.
Lépésről lépésre munka az Interface Builder-ben
A Size Class konfigurálásához az Interface Builder-ben a fejlesztő megnyitja a storyboard-ot, kiválasztja a view controller-t, és megnyomja a Vary for Traits gombot az alsó panelen. Ezután kiválasztja a Width (Compact, Regular vagy Any) és Height (Compact, Regular vagy Any) értékeket. Az interfész szerkesztési módba kapcsol a kiválasztott kombinációhoz. Az összes korlátozásmódosítás, elemhozzáadás vagy -eltávolítás csak erre a kombinációra vonatkozik. A konfigurálás befejezése után a fejlesztő kilép a módból — a módosítások az adott Size Class kombinációhoz kerülnek mentésre.
Legjobb gyakorlatok
Az Apple az alap elrendezéssel való kezdést javasolja a wAny hAny-hoz (az alap kombináció, amely minden eszközt lefed). Ezután finomítsa az elrendezést a problémás kombinációkhoz: wCompact hRegular (portré iPhone) és wRegular hRegular (iPad). Nem ajánlott minden kombinációt konfigurálni — csak ahol az elrendezés elromlik. A túlzott konfigurálás megnehezíti a karbantartást. A betűtípusok pontos beállításához használja a Dynamic Type-ot a Size Class helyett: a betűtípusok automatikusan alkalmazkodnak a képernyő méretéhez.
Size Class kódban: UITraitCollection
UITraitCollection — egy iOS osztály, amely tartalmazza az aktuális Size Class-t és a környezet egyéb jellemzőit (force touch, display scale, user interface idiom). Minden UIView és UIViewController rendelkezik saját traitCollection-nel, amelyet a szülőtől örököl. A fejlesztő a Size Class-t a traitCollection.horizontalSizeClass és traitCollection.verticalSizeClass segítségével kapja meg, amelyek UIUserInterfaceSizeClass-t (.compact, .regular vagy .unspecified) adnak vissza. A Size Class változását a traitCollectionDidChange felülírásával követik nyomon.
Példa: elrendezés átkapcsolása kódban
Tekintsük példának a UICollectionView elrendezés Size Class-hoz való adaptálását. iPad-en (wRegular hRegular) kétoszlopos UICollectionViewCompositionalLayout-ot használunk, iPhone-on (wCompact hRegular) — egyoszlopost. A kód ellenőrzi a vízszintes Size Class-t és kiválasztja a megfelelő elrendezést. Forgatáskor vagy Split View-ba váltáskor az iOS meghívja a traitCollectionDidChange-t, és a vezérlő animációval kapcsolja át az elrendezést.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Reagálás a trait collection változásaira
A traitCollectionDidChange metódus minden Size Class változáskor meghívásra kerül: eszköz elforgatása, Split View-ba való belépés/kilépés, külső kijelző csatlakoztatása. Ebben a metódusban a fejlesztő frissíti az elrendezést, újratölti a gyűjteményeket, frissíti a korlátozások prioritásait, vagy megváltoztatja az elemek láthatóságát. Fontos ellenőrizni, hogy pontosan a Size Class változott-e, nem más jellemző: hasonlítsa össze a traitCollection.horizontalSizeClass-t a previousTraitCollection?.horizontalSizeClass-val. Az optimalizálás megakadályozza a felesleges újrarajzolásokat a force touch vagy display scale változásakor.
A Size Class jellemzői különböző eszközökön
A különböző Apple-eszközök eltérő Size Class kombinációkkal rendelkeznek, és a fejlesztőnek figyelembe kell vennie ezeket a jellemzőket. iPhone portréban — wCompact hRegular, fekvőben — modelltől függ: iPhone SE/6/7/8 (wCompact hCompact), iPhone X és újabb (wCompact hCompact vagy wCompact hRegular a tartalomtól függően). iPad teljes képernyős módban — wRegular hRegular, Split View-ben — lehet wCompact hRegular (1/3 képernyő) vagy wRegular hRegular (2/3 képernyő). Mac Catalyst — mindig wRegular hRegular.
iPhone: minden méret
iPhone-on a Size Class a legtöbb modellnél stabil, de vannak árnyalatok. iPhone Plus (6+, 7+, 8+) és Max (X, XS, 11 Pro, 13–16 Pro Max) fekvőben wRegular hCompact értékkel rendelkezik — mint az iPad mini. Ez lehetővé teszi a tartalom két oszlopba rendezését a nagy iPhone-okon fekvőben. iPhone SE (1–3 generáció) fekvőben — wCompact hCompact. Függőleges Size Class az összes iPhone-on portréban — Regular, kivéve iPhone SE fekvőben, ahol Compact. Vízszintes — mindig Compact portré és fekvő esetén (kivéve Plus/Max fekvőben).
iPad és Split View
iPad teljes képernyős módban — wRegular hRegular, ami maximális rugalmasságot biztosít az elrendezésnek. Split View-ben a viselkedés megváltozik: ha az alkalmazás a képernyő 1/3-át foglalja el (Slide Over vagy Split 1/3-nál), a vízszintes Size Class Compact lesz, bár a függőleges Regular marad. 2/3 képernyőnél — wRegular hRegular. A fejlesztőnek tesztelnie kell az interfészt a Split View összes módjában, mivel a Size Class dinamikusan változik. Az Apple a Size Class és az UISplitViewController együttes használatát javasolja a konzisztens viselkedés érdekében iPad-en.
Gyakran ismételt kérdések
Miben különbözik a Size Class a CSS-breakpointtól?
Size Class — egy diszkrét rendszer 4 kombinációval, míg a CSS-breakpointok folytonosak tetszőleges számú ponttal. A Size Class elvonatkoztat a konkrét képernyőméretektől, az eszközöket viselkedés szerint csoportosítva. A CSS-breakpointok pixelekhez kötöttek, a Size Class — a Compact/Regular logikai kategóriákhoz.
Miért Regular a Size Class vízszintesen iPhone Plus-on fekvőben?
iPhone Plus/Max fekvőben elegendő képernyőszélességgel rendelkezik a tartalom két oszlopban való megjelenítéséhez (mint az iPad mini). Az Apple azért rendeli hozzá a vízszintes Regular-t, hogy a fejlesztő további ellenőrzések nélkül használhassa a multi-column layout-ot. Ez kivétel a Compact szabály alól iPhone esetében.
Megváltoztatható programozottan a Size Class?
Size Class-t az iOS határozza meg az eszköz tényleges jellemzői alapján, és nem változtatható meg az alkalmazás kódjából. A fejlesztő csak reagálni tud az aktuális értékre. A System UI felülírhatja a Size Class-t rendszerelemek esetében, de az alkalmazásban ez nem lehetséges.
Hogyan működik a Size Class a SwiftUI-val?
SwiftUI nem használja közvetlenül a Size Class-t — ehelyett a fejlesztő @Environment(\.horizontalSizeClass) módosítókat alkalmaz az aktuális érték olvasásához. A SwiftUI magasabb szintű eszközöket kínál: Size Classes és AnyLayout a Layout protokollal az adaptív elrendezéshez.
Frissül a Size Class külső monitor csatlakoztatásakor?
Igen, külső kijelző csatlakoztatásakor Stage Manager vagy Sidecar segítségével az iOS frissíti a Size Class-t. A külső monitor általában wRegular hRegular értéket kap, míg a fő képernyő megtartja a saját Size Class-át. A traitCollectionDidChange az ablakokhoz minden képernyőn függetlenül hívódik meg.
Összefoglalás
- Size Class — iOS képernyőosztályozási rendszer két Compact/Regular értékkel minden tengelyen, összesen 4 kombináció.
- iPhone portréban — wCompact hRegular. iPad teljes képernyős módban — wRegular hRegular. iPhone Plus/Max fekvőben — wRegular hCompact.
- Interface Builder Vary for Traits-t biztosít a korlátozások és láthatóság vizuális konfigurálásához minden Size Class-hoz.
- UITraitCollection — programozási API a Size Class olvasásához horizontalSizeClass és verticalSizeClass segítségével. A változásokat a traitCollectionDidChange követi nyomon.
- Split View iPad-en dinamikusan változtatja a Size Class-t: 1/3 képernyőnél a vízszintes Compact lesz, ami az elrendezés adaptálását igényli.
- SwiftUI @Environment(\.horizontalSizeClass) segítségével olvassa a Size Class-t, és AnyLayout segítségével vált az elrendezések között futásidőben.
- Javasolt a wAny hAny elrendezéssel kezdeni, majd adaptálni a wCompact hRegular (iPhone) és wRegular hRegular (iPad) esetére, anélkül hogy a többi kombinációt túlterhelnénk.
Kulcsrakész mobilalkalmazást fejlesztünk
Az IT Sectr 2017 óta készít iOS és Android alkalmazásokat induló vállalkozásoknak és vállalkozásoknak. Tanácsot adunk, és a legjobb megoldást javasoljuk.
Olvassa el is