Size Class: Was ist das, kompakte und reguläre Größenklassen in iOS
Size Class ist ein Mechanismus in iOS für adaptives Layout, der alle Geräte pro Achse in zwei Kategorien einteilt: Compact (schmal/kurz) und Regular (breit/lang). Kombinationen dieser Werte bestimmen, wie die Oberfläche auf iPhone, iPad, Mac Catalyst und CarPlay angezeigt wird. Laut Apple Human Interface Guidelines, 2024 ermöglicht Size Class die Erstellung eines einzigen Storyboards für alle Geräte mit Auto Layout und UITraitCollection. Das System funktioniert auf allen iOS-Geräten seit iOS 8.
Wichtige Punkte
- Size Class ist ein Größenklassifizierungssystem in iOS mit zwei Werten pro Achse: Compact (komprimiert) und Regular (vollständige Größe).
- Horizontaler Size Class auf dem iPhone im Hochformat ist Compact, auf dem iPad — Regular. Der vertikale ist auf allen iPhones außer SE Regular.
- UITraitCollection ist eine programmatische Schnittstelle zum Abrufen des aktuellen Size Class und zum Reagieren auf Änderungen der Merkmalssammlung zur Laufzeit.
- Interface Builder ermöglicht die Konfiguration von Constraints und Elementsichtbarkeit für jede Size Class-Kombination mit dem Vary for Traits-Werkzeug.
- Adaptives Layout mit Size Class ersetzt separate Storyboards für iPhone und iPad — eine Datei passt sich an alle Geräte an.
Was ist Size Class?
Size Class ist eine abstrakte Bildschirmklassifizierung in iOS, die von Apple in iOS 8 zur Vereinheitlichung des adaptiven Layouts eingeführt wurde. Anstatt ein bestimmtes Gerätemodell zu überprüfen, definiert Size Class zwei Merkmale: verfügbaren horizontalen und vertikalen Platz. Jedes Merkmal nimmt einen von zwei Werten an — Compact (begrenzter Platz) oder Regular (ausreichend Platz). Die Kombination dieser Werte bildet eine Merkmalssammlung (trait collection), die an alle Oberflächenelemente weitergegeben wird.
Geschichte und Zweck
Vor Size Class erstellten Entwickler separate Storyboards für iPhone und iPad oder verwendeten UI_USER_INTERFACE_IDIOM()-Prüfungen im Code. Dies führte zu Code-Duplizierung, aufgeblähten Storyboards und Schwierigkeiten bei der Unterstützung neuer Bildschirmgrößen. Size Class löste das Problem durch ein universelles System: Der Entwickler konfiguriert die Oberfläche für 4 Compact/Regular-Kombinationen, und iOS wählt automatisch die passende aus. Mit dem Aufkommen von Split View auf dem iPad und verschiedenen iPhone-Größen wurde das System für adaptives Layout unverzichtbar.
Wie Size Class funktioniert
Size Class wird von iOS basierend auf der aktuellen Bildschirmbreite und -höhe unter Berücksichtigung von Ausrichtung und Multitasking berechnet. Die Werte sind nicht an bestimmte Pixel gebunden — es ist eine logische Kategorie. Zum Beispiel hat das iPhone 16 Pro im Hochformat horizontal Compact und vertikal Regular. Dasselbe iPhone im Querformat — Compact auf beiden Achsen. Ein iPad in Split View mit einer App auf 1/3 des Bildschirms erhält horizontal Compact, obwohl es im Vollbildmodus Regular ist. Das System aktualisiert automatisch den Size Class bei Änderung der Ausrichtung oder Split View.
Welche Größenklassen gibt es
Size Class verwendet vier Kombinationen von zwei Werten auf zwei Achsen. Jede Kombination hat ihre Anwendung je nach Gerätetyp und Ausrichtung. Das Verständnis dieser Kombinationen ist die Grundlage für das Design einer adaptiven Oberfläche für iOS. Das System deckt alle aktuellen Apple-Geräte ab: iPhone, iPad, Mac Catalyst und CarPlay. Apple empfiehlt, mit der Kombination wAny hAny (Basis-Layout) zu beginnen und für spezifische Kombinationen zu verfeinern.
Vier Size Class-Kombinationen
wCompact hRegular — iPhone im Hochformat (außer Plus/Max in einigen Fällen). wCompact hCompact — iPhone SE/6/7/8 im Querformat. wRegular hRegular — iPad im Vollbild in beliebiger Ausrichtung, iPhone Plus/Max im Querformat. wRegular hCompact — iPad im Querformat mit schmalem Inhalt. Jede Kombination bestimmt, welche Constraints und Elemente aktiv sind. Der Entwickler kann das Erscheinungsbild für jede Kombination separat im Interface Builder festlegen.
Size Class für Mac Catalyst
Auf Mac Catalyst ist Size Class immer wRegular hRegular — vollständige Oberfläche. Das bedeutet, dass die Mac-Version einer iPad-App maximalen Platz erhält. Der Entwickler kann zusätzliche Prüfungen über UIScreen.traitCollection.userInterfaceIdiom verwenden, um Mac von iPad zu unterscheiden. Size Class auf dem Mac funktioniert stabil, aber Catalyst-Apps erfordern oft zusätzliche Anpassung für Maus und Tastatur über Size Class hinaus.
Wie Size Class das adaptive Layout beeinflusst
Size Class bestimmt, welche Auto Layout-Constraints aktiv sind, welche Oberflächenelemente sichtbar sind und wie Subviews angeordnet sind. Der Entwickler kann verschiedene Constraints für verschiedene Size Classes festlegen, und iOS wechselt sie automatisch bei Änderung der Merkmalssammlung. Zum Beispiel wird auf dem iPad (wRegular hRegular) eine Tabelle mit Details in Master-Detail angezeigt, auf dem iPhone (wCompact hRegular) — im Navigation Stack. Dies ist das Hauptszenario für adaptives Layout mit Size Class.
Festlegen und Entfernen von Constraints
Im Interface Builder wählt der Entwickler eine Size Class-Kombination über die Schaltfläche Vary for Traits aus und fügt Constraints hinzu, die nur für diese Kombination gelten sollen. Für wAny hAny festgelegte Constraints gelten immer. Für eine bestimmte Kombination festgelegte Constraints werden nur aktiviert, wenn der Size Class übereinstimmt. Wenn für eine Kombination keine speziellen Constraints festgelegt sind, werden die Basis-Constraints verwendet. Bei Änderung des Size Class animiert iOS den Übergang zwischen Constraints-Sätzen.
Aus- und Einblenden von Elementen
Das Installed-Flag im Interface Builder ermöglicht das Ausblenden von Elementen für bestimmte Size Classes. Der Entwickler markiert ein Element als Uninstalled für die ausgewählte Kombination. Zum Beispiel ist ein Details-Button nur auf dem iPad (wRegular hRegular) sichtbar und auf dem iPhone ausgeblendet. Dies ist einfacher als die Verwaltung von isHidden im Code. Zum programmatischen Ausblenden überschreiben Sie traitCollectionDidChange oder verwenden die willTransition-Methode und überprüfen den aktuellen Size Class.
Verwendung von Size Class im Interface Builder
Interface Builder bietet das visuelle Werkzeug Vary for Traits für die Arbeit mit Size Class. Der Entwickler wählt die gewünschte Kombination (Breite und Höhe) aus, und Interface Builder zeigt eine Bildschirmvorschau für diese Kombination an. Alle in diesem Modus vorgenommenen Änderungen an Constraints, Größen, Schriftarten und Sichtbarkeit gelten nur für den ausgewählten Size Class. Das Verlassen des Modus speichert die Einstellungen. Dieser Ansatz ersetzt die Notwendigkeit, Anpassungscode für verschiedene Geräte zu schreiben.
Schrittweise Arbeit im Interface Builder
Zum Konfigurieren von Size Class im Interface Builder öffnet der Entwickler ein Storyboard, wählt den View-Controller aus und klickt auf die Schaltfläche Vary for Traits im unteren Bereich. Dann wählt er Width (Compact, Regular oder Any) und Height (Compact, Regular oder Any). Die Oberfläche wechselt in den Bearbeitungsmodus für die ausgewählte Kombination. Alle Constraint-Änderungen, das Hinzufügen oder Entfernen von Elementen gelten nur für diese Kombination. Nach Abschluss der Einrichtung verlässt der Entwickler den Modus — die Änderungen werden für die spezifische Size Class-Kombination gespeichert.
Bewährte Methoden
Apple empfiehlt, mit einem Basis-Layout für wAny hAny (die Basis-Kombination, die alle Geräte abdeckt) zu beginnen. Dann das Layout für problematische Kombinationen verfeinern: wCompact hRegular (iPhone im Hochformat) und wRegular hRegular (iPad). Es wird nicht empfohlen, jede Kombination zu konfigurieren — nur die, bei denen das Layout bricht. Übermäßige Konfiguration erschwert die Wartung. Für präzise Schriftgrößenanpassung verwenden Sie Dynamic Type anstelle von Size Class: Schriftarten passen sich automatisch an die Bildschirmgröße an.
Size Class im Code: UITraitCollection
UITraitCollection ist eine iOS-Klasse, die den aktuellen Size Class und andere Umgebungsmerkmale (Force Touch, Bildschirmmaßstab, User Interface Idiom) enthält. Jede UIView und jeder UIViewController hat eine eigene traitCollection, die vom Elternobjekt geerbt wird. Der Entwickler erhält den Size Class über traitCollection.horizontalSizeClass und traitCollection.verticalSizeClass, die UIUserInterfaceSizeClass (.compact, .regular oder .unspecified) zurückgeben. Änderungen des Size Class werden durch Überschreiben von traitCollectionDidChange verfolgt.
Beispiel: Layout-Wechsel im Code
Betrachten wir ein Beispiel zur Anpassung des UICollectionView-Layouts an Size Class. Auf dem iPad (wRegular hRegular) verwenden Sie UICollectionViewCompositionalLayout mit zwei Spalten, auf dem iPhone (wCompact hRegular) — mit einer. Der Code überprüft den horizontalen Size Class und wählt das entsprechende Layout aus. Bei Drehung oder Wechsel zu Split View ruft iOS traitCollectionDidChange auf, und der Controller wechselt das Layout mit Animation.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Reagieren auf Änderungen der Merkmalssammlung
Die Methode traitCollectionDidChange wird bei jeder Änderung des Size Class aufgerufen: Gerätedrehung, Ein-/Austritt aus Split View, Anschluss eines externen Displays. In dieser Methode aktualisiert der Entwickler das Layout, lädt Sammlungen neu, aktualisiert Constraint-Prioritäten oder ändert die Sichtbarkeit von Elementen. Es ist wichtig zu überprüfen, ob sich tatsächlich der Size Class geändert hat und nicht ein anderes Merkmal: vergleichen Sie traitCollection.horizontalSizeClass mit previousTraitCollection?.horizontalSizeClass. Die Optimierung verhindert unnötige Neuzeichnungen bei Änderung von Force Touch oder Bildschirmmaßstab.
Besonderheiten von Size Class auf verschiedenen Geräten
Verschiedene Apple-Geräte haben unterschiedliche Size Class-Kombinationen, und der Entwickler muss diese Besonderheiten berücksichtigen. iPhone im Hochformat — wCompact hRegular, im Querformat — modellabhängig: iPhone SE/6/7/8 (wCompact hCompact), iPhone X und neuer (wCompact hCompact oder wCompact hRegular je nach Inhalt). iPad im Vollbildmodus — wRegular hRegular, in Split View — kann wCompact hRegular (1/3 Bildschirm) oder wRegular hRegular (2/3 Bildschirm) sein. Mac Catalyst — immer wRegular hRegular.
iPhone: alle Größen
Auf dem iPhone ist Size Class für die meisten Modelle stabil, aber es gibt Nuancen. iPhone Plus (6+, 7+, 8+) und Max (X, XS, 11 Pro, 13–16 Pro Max) im Querformat haben wRegular hCompact — wie iPad mini. Dies ermöglicht die Platzierung von Inhalten in zwei Spalten auf großen iPhones im Querformat. iPhone SE (1.–3. Generation) im Querformat — wCompact hCompact. Der vertikale Size Class auf allen iPhones im Hochformat ist Regular, außer iPhone SE im Querformat, wo er Compact ist. Der horizontale ist immer Compact für Hoch- und Querformat (außer Plus/Max im Querformat).
iPad und Split View
iPad im Vollbildmodus — wRegular hRegular, bietet maximale Layout-Flexibilität. In Split View ändert sich das Verhalten: Wenn die App 1/3 des Bildschirms belegt (Slide Over oder Split bei 1/3), wird der horizontale Size Class Compact, obwohl der vertikale Regular bleibt. Bei 2/3 Bildschirm — wRegular hRegular. Der Entwickler sollte die Oberfläche in allen Split View-Modi testen, da sich Size Class dynamisch ändert. Apple empfiehlt, Size Class zusammen mit UISplitViewController für konsistentes Verhalten auf dem iPad zu verwenden.
Häufig gestellte Fragen
Wie unterscheidet sich Size Class von einem Breakpoint in CSS?
Size Class ist ein diskretes System mit 4 Kombinationen, während CSS-Breakpoints ein kontinuierliches System mit einer beliebigen Anzahl von Punkten sind. Size Class abstrahiert von spezifischen Bildschirmgrößen und gruppiert Geräte nach Verhalten. CSS-Breakpoints sind an Pixel gebunden, Size Class — an logische Compact/Regular-Kategorien.
Warum hat das iPhone Plus im Querformat horizontalen Size Class Regular?
iPhone Plus/Max hat im Querformat genügend Bildschirmbreite, um Inhalte in zwei Spalten darzustellen (wie iPad mini). Apple weist horizontal Regular zu, damit der Entwickler Multi-Column-Layout ohne zusätzliche Prüfungen verwenden kann. Dies ist eine Ausnahme von der Compact-Regel für iPhone.
Kann Size Class programmatisch geändert werden?
Size Class wird von iOS basierend auf den tatsächlichen Geräteeigenschaften bestimmt und kann nicht aus dem App-Code geändert werden. Der Entwickler kann nur auf den aktuellen Wert reagieren. Die System-UI kann Size Class für Systemelemente überschreiben, aber in der App ist dies nicht möglich.
Wie funktioniert Size Class mit SwiftUI?
SwiftUI verwendet Size Class nicht direkt — stattdessen verwendet der Entwickler den Modifikator @Environment(\.horizontalSizeClass) zum Lesen des aktuellen Werts. SwiftUI bietet höherwertige Werkzeuge: Size Classes und AnyLayout mit dem Layout-Protokoll für adaptives Layout.
Wird Size Class beim Anschließen eines externen Monitors aktualisiert?
Ja, beim Anschließen eines externen Displays über Stage Manager oder Sidecar aktualisiert iOS den Size Class. Der externe Monitor erhält normalerweise wRegular hRegular, während der Hauptbildschirm seinen Size Class behält. traitCollectionDidChange wird für Fenster auf jedem Bildschirm unabhängig aufgerufen.
Zusammenfassung
- Size Class ist ein iOS-Bildschirmklassifizierungssystem mit zwei Compact/Regular-Werten pro Achse, insgesamt 4 Kombinationen.
- iPhone im Hochformat — wCompact hRegular. iPad im Vollbildmodus — wRegular hRegular. iPhone Plus/Max im Querformat — wRegular hCompact.
- Interface Builder bietet Vary for Traits zur visuellen Konfiguration von Constraints und Sichtbarkeit für jeden Size Class.
- UITraitCollection ist eine programmatische API zum Lesen von Size Class über horizontalSizeClass und verticalSizeClass. Änderungen werden in traitCollectionDidChange verfolgt.
- Split View auf dem iPad ändert dynamisch den Size Class: bei 1/3 Bildschirm wird der horizontale Compact, was Layout-Anpassung erfordert.
- SwiftUI bietet @Environment(\.horizontalSizeClass) zum Lesen von Size Class und AnyLayout zum Wechseln zwischen Layouts zur Laufzeit.
- Empfehlung: Beginnen Sie mit Layout für wAny hAny, dann anpassen für wCompact hRegular (iPhone) und wRegular hRegular (iPad), ohne die restlichen Kombinationen zu überladen.
Wir entwickeln eine mobile Applikation schlüsselfertig
IT Sectr entwickelt seit 2017 iOS- und Android-Apps für Startups und Unternehmen. Wir beraten Sie und schlagen die beste Lösung vor.
Lesen Sie auch