Size Class: vad är det, storleksklasser Compact och Regular i iOS
Size Class — är en iOS-mekanism för adaptiv layout som delar in alla enheter i två kategorier per axel: Compact (smal/kort) och Regular (bred/lång). Kombinationer av dessa värden avgör hur gränssnittet visas på iPhone, iPad, Mac Catalyst och CarPlay. Enligt Apple Human Interface Guidelines, 2024 gör Size Class det möjligt att bygga en storyboard för alla enheter med Auto Layout och UITraitCollection. Systemet fungerar på alla iOS-enheter från och med iOS 8.
Huvudpunkter
- Size Class — storleksklassificeringssystem i iOS med två värden per axel: Compact (komprimerad) och Regular (full storlek).
- Horisontell Size Class på iPhone i porträttorientering — Compact, på iPad — Regular. Vertikal — Regular på alla iPhones utom SE.
- UITraitCollection — programmeringsgränssnitt för att få aktuell Size Class och reagera på förändringar i trait collection vid körning.
- Interface Builder gör det möjligt att konfigurera begränsningar och elementens synlighet för varje Size Class-kombination med verktyget Vary for Traits.
- Adaptiv layout baserad på Size Class ersätter separata storyboards för iPhone och iPad — en fil anpassar sig till alla enheter.
Vad är Size Class?
Size Class — är en abstrakt klassificering av skärmen i iOS, introducerad av Apple i iOS 8 för att ena adaptiv layout. Istället för att kontrollera enhetens specifika modell bestämmer Size Class två egenskaper: tillgängligt utrymme horisontellt och vertikalt. Varje egenskap tar ett av två värden — Compact (begränsat utrymme) eller Regular (tillräckligt utrymme). Kombinationen av dessa värden bildar en trait collection som skickas till alla gränssnittselement.
Historia och syfte
Före tillkomsten av Size Class skapade utvecklare separata storyboards för iPhone och iPad eller använde UI_USER_INTERFACE_IDIOM()-kontroller i kod. Detta ledde till kodduplicering, uppsvällda storyboards och svårigheter att stödja nya skärmstorlekar. Size Class löste problemet genom att erbjuda ett universellt system: utvecklaren konfigurerar gränssnittet för 4 kombinationer av Compact/Regular, och iOS väljer automatiskt den lämpliga. Med tillkomsten av Split View på iPad och olika iPhone-storlekar blev systemet oumbärligt för adaptiv layout.
Hur Size Class fungerar
Size Class beräknas av iOS baserat på bredd och höjd på den aktuella skärmen, med hänsyn till orientering och multitasking. Värdena är inte bundna till specifika pixlar — det är en logisk kategori. Till exempel har iPhone 16 Pro i porträtt horisontell Compact och vertikal Regular. Samma iPhone i landskap — Compact på båda axlarna. iPad i Split View med en app på 1/3 skärm får horisontell Compact, även om den i fullskärmsläge har Regular. Systemet uppdaterar automatiskt Size Class vid ändring av orientering eller Split View.
Vilka storleksklasser finns
Size Class använder fyra kombinationer av två värden på två axlar. Varje kombination har sin tillämpning beroende på enhetstyp och orientering. Att förstå dessa kombinationer är grunden för att designa ett adaptivt gränssnitt för iOS. Systemet täcker alla aktuella Apple-enheter: iPhone, iPad, Mac Catalyst och CarPlay. Apple rekommenderar att börja designa med kombinationen wAny hAny (grundlayout) och förfina för specifika kombinationer.
Fyra Size Class-kombinationer
wCompact hRegular — porträtt iPhone (utom Plus/Max i vissa fall). wCompact hCompact — landskap iPhone SE/6/7/8. wRegular hRegular — fullskärms iPad i valfri orientering, iPhone Plus/Max i landskap. wRegular hCompact — iPad i landskap med smalt innehåll. Varje kombination avgör vilka begränsningar och element som är aktiva. Utvecklaren kan ställa in utseende för varje kombination separat i Interface Builder.
Size Class för Mac Catalyst
På Mac Catalyst är Size Class alltid wRegular hRegular — gränssnitt i full storlek. Detta innebär att Mac-versionen av iPad-appen får maximalt utrymme. Utvecklaren kan använda ytterligare kontroller via UIScreen.traitCollection.userInterfaceIdiom för att skilja Mac från iPad. Size Class på Mac fungerar stabilt, men Catalyst-appar kräver ofta ytterligare anpassning för mus och tangentbord som ligger utanför Size Class ramar.
Hur Size Class påverkar adaptiv layout
Size Class avgör vilka Auto Layout-begränsningar som är aktiva, vilka gränssnittselement som är synliga och hur subviews är arrangerade. Utvecklaren kan ställa in olika begränsningar för olika Size Classes, och iOS växlar automatiskt mellan dem när trait collection ändras. Till exempel på iPad (wRegular hRegular) visas tabellen med detaljer i Master-Detail, på iPhone (wCompact hRegular) — i Navigation Stack. Detta är huvudscenariot för adaptiv layout med Size Class.
Ställa in och ta bort begränsningar
I Interface Builder väljer utvecklaren Size Class-kombinationen via knappen Vary for Traits och lägger till begränsningar som endast ska fungera för denna kombination. Begränsningar inställda för wAny hAny fungerar alltid. Begränsningar inställda för en specifik kombination aktiveras endast när Size Class matchar. Om inga speciella begränsningar är inställda för en kombination används grundbegränsningarna. När Size Class ändras animerar iOS övergången mellan begränsningsuppsättningarna.
Dölja och visa element
Installed-flaggan i Interface Builder gör det möjligt att dölja element för specifika Size Classes. Utvecklaren markerar elementet som Uninstalled för den valda kombinationen. Till exempel är knappen Details endast synlig på iPad (wRegular hRegular) och på iPhone — dold. Detta är enklare än att hantera isHidden i kod. För programmerad döljning används överskuggning av traitCollectionDidChange eller metoden willTransition, där aktuell Size Class kontrolleras.
Använda Size Class i Interface Builder
Interface Builder tillhandahåller det visuella verktyget Vary for Traits för att arbeta med Size Class. Utvecklaren väljer önskad kombination (bredd och höjd), och Interface Builder visar en förhandsgranskning av skärmen för denna kombination. Alla ändringar av begränsningar, storlekar, typsnitt och synlighet som görs i detta läge tillämpas endast på den valda Size Class. Att lämna läget bekräftar inställningarna. Detta tillvägagångssätt ersätter behovet av att skriva anpassningskod för olika enheter.
Steg för steg-arbete i Interface Builder
För konfigurering av Size Class i Interface Builder öppnar utvecklaren storyboarden, väljer view controller och trycker på knappen Vary for Traits i den nedre panelen. Sedan väljer han Width (Compact, Regular eller Any) och Height (Compact, Regular eller Any). Gränssnittet växlar till redigeringsläge för den valda kombinationen. Alla ändringar av begränsningar, tillägg eller borttagning av element tillämpas endast på denna kombination. Efter slutförd konfiguration lämnar utvecklaren läget — ändringarna sparas för den specifika Size Class-kombinationen.
Bästa praxis
Apple rekommenderar att börja med grundlayouten för wAny hAny (grundkombinationen som täcker alla enheter). Förfina sedan layouten för problematiska kombinationer: wCompact hRegular (porträtt iPhone) och wRegular hRegular (iPad). Det rekommenderas inte att konfigurera varje kombination — endast där layouten går sönder. Överdriven konfiguration försvårar underhållet. För exakt inställning av typsnitt, använd Dynamic Type istället för Size Class: typsnitt anpassar sig automatiskt till skärmstorleken.
Size Class i kod: UITraitCollection
UITraitCollection — är en iOS-klass som innehåller aktuell Size Class och andra miljöegenskaper (force touch, display scale, user interface idiom). Varje UIView och UIViewController har sin egen traitCollection, ärvd från föräldern. Utvecklaren får Size Class via traitCollection.horizontalSizeClass och traitCollection.verticalSizeClass, som returnerar UIUserInterfaceSizeClass (.compact, .regular eller .unspecified). Ändring av Size Class spåras genom överskuggning av traitCollectionDidChange.
Exempel: växla layout i kod
Betrakta exemplet med att anpassa UICollectionView-layout till Size Class. På iPad (wRegular hRegular) använder vi UICollectionViewCompositionalLayout med två kolumner, på iPhone (wCompact hRegular) — med en. Koden kontrollerar horisontell Size Class och väljer lämplig layout. Vid rotation eller övergång till Split View anropar iOS traitCollectionDidChange, och kontrollern växlar layout med animering.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Reagera på förändringar i trait collection
Metoden traitCollectionDidChange anropas vid varje ändring av Size Class: enhetsrotation, in-/utgång ur Split View, anslutning av extern bildskärm. I denna metod uppdaterar utvecklaren layouten, laddar om samlingar, uppdaterar begränsningsprioriteringar eller ändrar elementsynlighet. Det är viktigt att kontrollera om just Size Class har ändrats, inte en annan egenskap: jämför traitCollection.horizontalSizeClass med previousTraitCollection?.horizontalSizeClass. Optimering förhindrar onödiga omritningar vid ändring av force touch eller display scale.
Size Class-egenskaper på olika enheter
Olika Apple-enheter har olika Size Class-kombinationer och utvecklaren måste ta hänsyn till dessa egenskaper. iPhone i porträtt — wCompact hRegular, i landskap — beror på modell: iPhone SE/6/7/8 (wCompact hCompact), iPhone X och nyare (wCompact hCompact eller wCompact hRegular beroende på innehåll). iPad i fullskärmsläge — wRegular hRegular, i Split View — kan vara wCompact hRegular (1/3 skärm) eller wRegular hRegular (2/3 skärm). Mac Catalyst — alltid wRegular hRegular.
iPhone: alla storlekar
På iPhone är Size Class stabil för de flesta modeller, men det finns nyanser. iPhone Plus (6+, 7+, 8+) och Max (X, XS, 11 Pro, 13–16 Pro Max) i landskap har wRegular hCompact — som iPad mini. Detta gör det möjligt att placera innehåll i två kolumner på stora iPhones i landskap. iPhone SE (generation 1–3) i landskap — wCompact hCompact. Vertikal Size Class på alla iPhones i porträtt — Regular, förutom iPhone SE i landskap där den är Compact. Horisontell — alltid Compact för porträtt och landskap (förutom Plus/Max i landskap).
iPad och Split View
iPad i fullskärmsläge — wRegular hRegular, vilket ger maximal flexibilitet i layouten. I Split View ändras beteendet: om appen upptar 1/3 av skärmen (Slide Over eller Split vid 1/3) blir horisontell Size Class Compact, även om vertikal förblir Regular. Vid 2/3 skärm — wRegular hRegular. Utvecklaren bör testa gränssnittet i alla Split View-lägen, eftersom Size Class ändras dynamiskt. Apple rekommenderar att använda Size Class tillsammans med UISplitViewController för konsekvent beteende på iPad.
Vanliga frågor
Hur skiljer sig Size Class från en brytpunkt i CSS?
Size Class — ett diskret system med 4 kombinationer, medan CSS-brytpunkter är kontinuerliga med ett godtyckligt antal punkter. Size Class abstraherar från specifika skärmstorlekar och grupperar enheter efter beteende. CSS-brytpunkter är bundna till pixlar, Size Class — till logiska kategorier Compact/Regular.
Varför är Size Class horisontellt Regular på iPhone Plus i landskap?
iPhone Plus/Max i landskap har tillräcklig skärmbredd för att visa innehåll i två kolumner (som på iPad mini). Apple tilldelar horisontell Regular så att utvecklaren kan använda multi-column layout utan extra kontroller. Detta är ett undantag från Compact-regeln för iPhone.
Kan Size Class ändras programmatiskt?
Size Class bestäms av iOS baserat på enhetens faktiska egenskaper och kan inte ändras från applikationskoden. Utvecklaren kan bara reagera på det aktuella värdet. System UI kan åsidosätta Size Class för systemelement, men i appen är detta inte möjligt.
Hur fungerar Size Class med SwiftUI?
SwiftUI använder inte Size Class direkt — istället tillämpar utvecklaren modifierare @Environment(\.horizontalSizeClass) för att läsa det aktuella värdet. SwiftUI erbjuder verktyg på högre nivå: Size Classes och AnyLayout med Layout-protokollet för adaptiv layout.
Uppdateras Size Class när en extern bildskärm ansluts?
Ja, när en extern bildskärm ansluts via Stage Manager eller Sidecar uppdaterar iOS Size Class. Den externa bildskärmen får vanligtvis wRegular hRegular, medan huvudskärmen behåller sin Size Class. traitCollectionDidChange anropas för fönster på varje skärm oberoende.
Sammanfattning
- Size Class — iOS-skärmklassificeringssystem med två värden Compact/Regular per axel, totalt 4 kombinationer.
- iPhone i porträtt — wCompact hRegular. iPad i fullskärmsläge — wRegular hRegular. iPhone Plus/Max i landskap — wRegular hCompact.
- Interface Builder tillhandahåller Vary for Traits för visuell konfigurering av begränsningar och synlighet för varje Size Class.
- UITraitCollection — programmerings-API för att läsa Size Class via horizontalSizeClass och verticalSizeClass. Ändringar spåras i traitCollectionDidChange.
- Split View på iPad ändrar dynamiskt Size Class: vid 1/3 skärm blir horisontell Compact, vilket kräver layoutanpassning.
- SwiftUI tillhandahåller @Environment(\.horizontalSizeClass) för att läsa Size Class och AnyLayout för att växla mellan layouter vid körning.
- Rekommenderas att börja med layout för wAny hAny, sedan anpassa för wCompact hRegular (iPhone) och wRegular hRegular (iPad), utan att överbelasta övriga kombinationer.
Vi utvecklar en mobil applikation nyckelfärdigt
IT Sectr skapar iOS- och Android-applikationer för startups och företag sedan 2017. Vi ger dig råd och föreslår den bästa lösningen.
Läs också