Size Class: wat is het, maatklassen Compact en Regular in iOS
Size Class — is een iOS-mechanisme voor adaptieve lay-out dat alle apparaten in twee categorieën per as verdeelt: Compact (smal/kort) en Regular (breed/lang). Combinaties van deze waarden bepalen hoe de interface wordt weergegeven op iPhone, iPad, Mac Catalyst en CarPlay. Volgens Apple Human Interface Guidelines, 2024 maakt Size Class het mogelijk om één storyboard voor alle apparaten te bouwen met Auto Layout en UITraitCollection. Het systeem werkt op alle iOS-apparaten vanaf iOS 8.
Belangrijkste punten
- Size Class — maatclassificatiesysteem in iOS met twee waarden per as: Compact (samengedrukt) en Regular (volformaat).
- Horizontale Size Class op iPhone in portretmodus — Compact, op iPad — Regular. Verticaal — Regular op alle iPhones behalve SE.
- UITraitCollection — programmeerinterface voor het verkrijgen van de huidige Size Class en reageren op wijzigingen in trait collection tijdens runtime.
- Interface Builder maakt het mogelijk om constraints en zichtbaarheid van elementen voor elke Size Class-combinatie te configureren met de tool Vary for Traits.
- Adaptieve lay-out op basis van Size Class vervangt aparte storyboards voor iPhone en iPad — één bestand past zich aan alle apparaten aan.
Wat is Size Class?
Size Class — is een abstracte classificatie van het scherm in iOS, geïntroduceerd door Apple in iOS 8 voor de uniformering van adaptieve lay-out. In plaats van het specifieke model van het apparaat te controleren, bepaalt Size Class twee kenmerken: beschikbare ruimte horizontaal en verticaal. Elk kenmerk neemt een van twee waarden aan — Compact (beperkte ruimte) of Regular (voldoende ruimte). De combinatie van deze waarden vormt een trait collection, die wordt doorgegeven aan alle interface-elementen.
Geschiedenis en doel
Vóór de komst van Size Class maakten ontwikkelaars aparte storyboards voor iPhone en iPad of gebruikten ze UI_USER_INTERFACE_IDIOM()-controles in code. Dit leidde tot code-duplicatie, opgeblazen storyboards en moeilijkheden bij het ondersteunen van nieuwe schermformaten. Size Class loste het probleem op door een universeel systeem te bieden: de ontwikkelaar configureert de interface voor 4 combinaties van Compact/Regular, en iOS kiest automatisch de juiste. Met de komst van Split View op iPad en verschillende iPhone-formaten werd het systeem onmisbaar voor adaptieve lay-out.
Hoe Size Class werkt
Size Class wordt door iOS berekend op basis van de breedte en hoogte van het huidige scherm, rekening houdend met oriëntatie en multitasking. De waarden zijn niet gekoppeld aan specifieke pixels — het is een logische categorie. Bijvoorbeeld, iPhone 16 Pro in portret heeft horizontaal Compact en verticaal Regular. Dezelfde iPhone in landschap — Compact op beide assen. iPad in Split View met een app op 1/3 scherm krijgt horizontaal Compact, hoewel in volledig scherm — Regular. Het systeem werkt Size Class automatisch bij bij wijziging van oriëntatie of Split View.
Welke maatklassen zijn er
Size Class gebruikt vier combinaties van twee waarden op twee assen. Elke combinatie heeft zijn toepassing afhankelijk van het type apparaat en zijn oriëntatie. Het begrijpen van deze combinaties is de basis van het ontwerpen van een adaptieve interface voor iOS. Het systeem dekt alle actuele Apple-apparaten: iPhone, iPad, Mac Catalyst en CarPlay. Apple raadt aan om te beginnen met ontwerpen met de combinatie wAny hAny (basis lay-out) en te verfijnen voor specifieke combinaties.
Vier Size Class-combinaties
wCompact hRegular — portret iPhone (behalve Plus/Max in sommige gevallen). wCompact hCompact — landschap iPhone SE/6/7/8. wRegular hRegular — volledig scherm iPad in elke oriëntatie, iPhone Plus/Max in landschap. wRegular hCompact — iPad in landschap met smalle inhoud. Elke combinatie bepaalt welke constraints en elementen actief zijn. De ontwikkelaar kan het uiterlijk voor elke combinatie apart instellen in Interface Builder.
Size Class voor Mac Catalyst
Op Mac Catalyst is Size Class altijd wRegular hRegular — volledige grootte interface. Dit betekent dat de Mac-versie van de iPad-app maximale ruimte krijgt. De ontwikkelaar kan extra controles gebruiken via UIScreen.traitCollection.userInterfaceIdiom om Mac van iPad te onderscheiden. Size Class op Mac werkt stabiel, maar Catalyst-apps vereisen vaak extra aanpassing voor muis en toetsenbord, buiten het bereik van Size Class.
Hoe Size Class de adaptieve lay-out beïnvloedt
Size Class bepaalt welke Auto Layout-constraints actief zijn, welke interface-elementen zichtbaar zijn en hoe subviews zijn gerangschikt. De ontwikkelaar kan verschillende constraints instellen voor verschillende Size Classes, en iOS schakelt ze automatisch bij wijziging van de trait collection. Bijvoorbeeld, op iPad (wRegular hRegular) wordt een tabel met details weergegeven in Master-Detail, op iPhone (wCompact hRegular) — in Navigation Stack. Dit is het belangrijkste scenario voor adaptieve lay-out met Size Class.
Constraints instellen en verwijderen
In Interface Builder selecteert de ontwikkelaar de Size Class-combinatie via de knop Vary for Traits en voegt constraints toe die alleen voor deze combinatie moeten werken. Constraints ingesteld voor wAny hAny werken altijd. Constraints ingesteld voor een specifieke combinatie worden alleen geactiveerd bij overeenkomst van Size Class. Als voor een combinatie geen speciale constraints zijn ingesteld, worden de basisconstraints gebruikt. Bij wijziging van Size Class animeert iOS de overgang tussen de sets constraints.
Elementen verbergen en tonen
De Installed-vlag in Interface Builder maakt het mogelijk elementen te verbergen voor specifieke Size Classes. De ontwikkelaar markeert het element als Uninstalled voor de geselecteerde combinatie. Bijvoorbeeld, de knop Details is alleen zichtbaar op iPad (wRegular hRegular) en op iPhone — verborgen. Dit is eenvoudiger dan het beheren van isHidden in code. Voor programmatisch verbergen wordt override van traitCollectionDidChange of de methode willTransition gebruikt, waar de huidige Size Class wordt gecontroleerd.
Size Class gebruiken in Interface Builder
Interface Builder biedt de visuele tool Vary for Traits voor het werken met Size Class. De ontwikkelaar selecteert de gewenste combinatie (breedte en hoogte), en Interface Builder toont een voorbeeld van het scherm voor deze combinatie. Alle wijzigingen in constraints, afmetingen, lettertypen en zichtbaarheid die in deze modus worden gemaakt, worden alleen toegepast op de geselecteerde Size Class. Het verlaten van de modus bevestigt de instellingen. Deze aanpak vervangt de noodzaak om aanpassingscode voor verschillende apparaten te schrijven.
Stap voor stap werken in Interface Builder
Voor het configureren van Size Class in Interface Builder opent de ontwikkelaar het storyboard, selecteert de view controller en drukt op de knop Vary for Traits in het onderste paneel. Vervolgens selecteert hij Width (Compact, Regular of Any) en Height (Compact, Regular of Any). De interface schakelt over naar bewerkingsmodus voor de geselecteerde combinatie. Alle wijzigingen in constraints, toevoegen of verwijderen van elementen worden alleen op deze combinatie toegepast. Na het voltooien van de configuratie verlaat de ontwikkelaar de modus — de wijzigingen worden opgeslagen voor de specifieke Size Class-combinatie.
Beste praktijken
Apple raadt aan te beginnen met de basislay-out voor wAny hAny (de basiscombinatie die alle apparaten dekt). Vervolgens de lay-out verfijnen voor problematische combinaties: wCompact hRegular (portret iPhone) en wRegular hRegular (iPad). Het wordt niet aanbevolen elke combinatie te configureren — alleen waar de lay-out breekt. Overmatige configuratie bemoeilijkt het onderhoud. Gebruik voor het nauwkeurig instellen van lettertypen Dynamic Type in plaats van Size Class: lettertypen passen zich automatisch aan de schermgrootte aan.
Size Class in code: UITraitCollection
UITraitCollection — is een iOS-klasse die de huidige Size Class en andere omgevingskenmerken bevat (force touch, display scale, user interface idiom). Elke UIView en UIViewController heeft zijn eigen traitCollection, overgeërfd van de ouder. De ontwikkelaar verkrijgt Size Class via traitCollection.horizontalSizeClass en traitCollection.verticalSizeClass, die UIUserInterfaceSizeClass (.compact, .regular of .unspecified) retourneren. Wijziging van Size Class wordt gevolgd via override van traitCollectionDidChange.
Voorbeeld: lay-out omschakelen in code
Beschouw het voorbeeld van het aanpassen van UICollectionView lay-out aan Size Class. Op iPad (wRegular hRegular) gebruiken we UICollectionViewCompositionalLayout met twee kolommen, op iPhone (wCompact hRegular) — met één. De code controleert de horizontale Size Class en selecteert de juiste lay-out. Bij rotatie of overgang naar Split View roept iOS traitCollectionDidChange aan, en de controller schakelt de lay-out met animatie om.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Reageren op wijzigingen in trait collection
De methode traitCollectionDidChange wordt aangeroepen bij elke wijziging van Size Class: rotatie van het apparaat, in/uit Split View, aansluiten van een extern scherm. In deze methode werkt de ontwikkelaar de lay-out bij, laadt collecties opnieuw, werkt constraint-prioriteiten bij of wijzigt de zichtbaarheid van elementen. Het is belangrijk om te controleren of precies Size Class is gewijzigd, niet een ander kenmerk: vergelijk traitCollection.horizontalSizeClass met previousTraitCollection?.horizontalSizeClass. Optimalisatie voorkomt onnodige hertekeningen bij wijziging van force touch of display scale.
Kenmerken van Size Class op verschillende apparaten
Verschillende Apple-apparaten hebben verschillende Size Class-combinaties en de ontwikkelaar moet met deze kenmerken rekening houden. iPhone in portret — wCompact hRegular, in landschap — afhankelijk van model: iPhone SE/6/7/8 (wCompact hCompact), iPhone X en nieuwer (wCompact hCompact of wCompact hRegular afhankelijk van inhoud). iPad in volledig scherm — wRegular hRegular, in Split View — kan wCompact hRegular (1/3 scherm) of wRegular hRegular (2/3 scherm) zijn. Mac Catalyst — altijd wRegular hRegular.
iPhone: alle formaten
Op iPhone is Size Class stabiel voor de meeste modellen, maar er zijn nuances. iPhone Plus (6+, 7+, 8+) en Max (X, XS, 11 Pro, 13–16 Pro Max) in landschap hebben wRegular hCompact — zoals iPad mini. Dit maakt het mogelijk om inhoud in twee kolommen te plaatsen op grote iPhones in landschap. iPhone SE (generatie 1–3) in landschap — wCompact hCompact. Verticale Size Class op alle iPhones in portret — Regular, behalve iPhone SE in landschap, waar het Compact is. Horizontaal — altijd Compact voor portret en landschap (behalve Plus/Max in landschap).
iPad en Split View
iPad in volledig scherm — wRegular hRegular, wat maximale flexibiliteit van de lay-out geeft. In Split View verandert het gedrag: als de app 1/3 van het scherm inneemt (Slide Over of Split op 1/3), wordt horizontale Size Class Compact, hoewel verticaal Regular blijft. Op 2/3 scherm — wRegular hRegular. De ontwikkelaar moet de interface in alle Split View-modi testen, omdat Size Class dynamisch verandert. Apple raadt aan Size Class samen met UISplitViewController te gebruiken voor consistent gedrag op iPad.
Veelgestelde vragen
Hoe verschilt Size Class van een breakpoint in CSS?
Size Class — een discreet systeem met 4 combinaties, terwijl CSS-breakpoints continu zijn met een willekeurig aantal punten. Size Class abstraheert van specifieke schermformaten door apparaten te groeperen op gedrag. CSS-breakpoints zijn gekoppeld aan pixels, Size Class — aan logische categorieën Compact/Regular.
Waarom is Size Class op iPhone Plus in landschap horizontaal Regular?
iPhone Plus/Max in landschap heeft voldoende schermbreedte om inhoud in twee kolommen weer te geven (zoals op iPad mini). Apple kent horizontaal Regular toe zodat de ontwikkelaar multi-column lay-out kan gebruiken zonder extra controles. Dit is een uitzondering op de Compact-regel voor iPhone.
Kan Size Class programmatisch worden gewijzigd?
Size Class wordt door iOS bepaald op basis van de werkelijke kenmerken van het apparaat en kan niet worden gewijzigd vanuit de app-code. De ontwikkelaar kan alleen reageren op de huidige waarde. System UI kan Size Class overschrijven voor systeemelementen, maar in de app is dit niet mogelijk.
Hoe werkt Size Class met SwiftUI?
SwiftUI gebruikt Size Class niet direct — in plaats daarvan past de ontwikkelaar modificatoren @Environment(\.horizontalSizeClass) toe om de huidige waarde te lezen. SwiftUI biedt hogere-niveau tools: Size Classes en AnyLayout met Layout protocol voor adaptieve lay-out.
Wordt Size Class bijgewerkt bij aansluiten van een extern beeldscherm?
Ja, bij aansluiten van een extern display via Stage Manager of Sidecar werkt iOS Size Class bij. Het externe beeldscherm krijgt meestal wRegular hRegular, terwijl het hoofdscherm zijn Size Class behoudt. traitCollectionDidChange wordt aangeroepen voor vensters op elk scherm onafhankelijk.
Samenvatting
- Size Class — iOS-schermclassificatiesysteem met twee waarden Compact/Regular op elke as, in totaal 4 combinaties.
- iPhone in portret — wCompact hRegular. iPad in volledig scherm — wRegular hRegular. iPhone Plus/Max in landschap — wRegular hCompact.
- Interface Builder biedt Vary for Traits voor visuele configuratie van constraints en zichtbaarheid voor elke Size Class.
- UITraitCollection — programmeer-API voor het lezen van Size Class via horizontalSizeClass en verticalSizeClass. Wijzigingen worden gevolgd in traitCollectionDidChange.
- Split View op iPad verandert Size Class dynamisch: bij 1/3 scherm wordt horizontaal Compact, wat aanpassing van de lay-out vereist.
- SwiftUI biedt @Environment(\.horizontalSizeClass) voor het lezen van Size Class en AnyLayout voor het omschakelen tussen lay-outs tijdens runtime.
- Aanbevolen te beginnen met lay-out voor wAny hAny, vervolgens aanpassen voor wCompact hRegular (iPhone) en wRegular hRegular (iPad), zonder de overige combinaties te overbelasten.
We ontwikkelen een mobiele applicatie turnkey
IT Sectr creëert sinds 2017 iOS- en Android-applicaties voor startups en bedrijven. We adviseren u en stellen de beste oplossing voor.
Lees ook