Size Class : qu'est-ce que c'est, classes de taille Compact et Regular dans iOS
Size Class est un mécanisme iOS pour la mise en page adaptative qui divise tous les appareils en deux catégories par axe : Compact (étroit/court) et Regular (large/long). Les combinaisons de ces valeurs déterminent comment l'interface s'affiche sur iPhone, iPad, Mac Catalyst et CarPlay. Selon Apple Human Interface Guidelines, 2024, Size Class permet de construire un storyboard unique pour tous les appareils en utilisant Auto Layout et UITraitCollection. Le système fonctionne sur tous les appareils iOS depuis iOS 8.
Points clés
- Size Class est un système de classification de taille dans iOS avec deux valeurs par axe : Compact (comprimé) et Regular (pleine taille).
- Size Class horizontal sur iPhone en orientation portrait est Compact, sur iPad — Regular. Le vertical est Regular sur tous les iPhones sauf SE.
- UITraitCollection est une interface programmatique pour obtenir le Size Class actuel et répondre aux changements de collection de traits à l'exécution.
- Interface Builder permet de configurer les contraintes et la visibilité des éléments pour chaque combinaison Size Class avec l'outil Vary for Traits.
- Mise en page adaptative avec Size Class remplace les storyboards séparés pour iPhone et iPad — un fichier s'adapte à tous les appareils.
Qu'est-ce que Size Class ?
Size Class est une classification abstraite d'écran dans iOS, introduite par Apple dans iOS 8 pour unifier la mise en page adaptative. Au lieu de vérifier un modèle d'appareil spécifique, Size Class définit deux caractéristiques : l'espace horizontal et vertical disponible. Chaque caractéristique prend l'une des deux valeurs — Compact (espace limité) ou Regular (espace suffisant). La combinaison de ces valeurs forme une collection de traits (trait collection), qui est transmise à tous les éléments de l'interface.
Histoire et objectif
Avant Size Class, les développeurs créaient des storyboards séparés pour iPhone et iPad ou utilisaient des vérifications UI_USER_INTERFACE_IDIOM() dans le code. Cela entraînait une duplication de code, des storyboards gonflés et des difficultés à prendre en charge de nouvelles tailles d'écran. Size Class a résolu le problème en offrant un système universel : le développeur configure l'interface pour 4 combinaisons Compact/Regular, et iOS sélectionne automatiquement la bonne. Avec l'avènement du Split View sur iPad et des différentes tailles d'iPhone, le système est devenu indispensable pour la mise en page adaptative.
Comment Size Class fonctionne
Size Class est calculé par iOS en fonction de la largeur et de la hauteur actuelles de l'écran, en tenant compte de l'orientation et du multitâche. Les valeurs ne sont pas liées à des pixels spécifiques — c'est une catégorie logique. Par exemple, l'iPhone 16 Pro en portrait a horizontal Compact et vertical Regular. Le même iPhone en paysage — Compact sur les deux axes. iPad en Split View avec une application à 1/3 de l'écran obtient horizontal Compact, bien qu'en mode plein écran il soit Regular. Le système met automatiquement à jour Size Class lors du changement d'orientation ou de Split View.
Quelles sont les classes de taille
Size Class utilise quatre combinaisons de deux valeurs sur deux axes. Chaque combinaison a son application selon le type d'appareil et son orientation. Comprendre ces combinaisons est la base de la conception d'une interface adaptative pour iOS. Le système couvre tous les appareils Apple actuels : iPhone, iPad, Mac Catalyst et CarPlay. Apple recommande de commencer la conception avec la combinaison wAny hAny (mise en page de base) et d'affiner pour des combinaisons spécifiques.
Quatre combinaisons Size Class
wCompact hRegular — iPhone en portrait (sauf Plus/Max dans certains cas). wCompact hCompact — iPhone SE/6/7/8 en paysage. wRegular hRegular — iPad en plein écran dans n'importe quelle orientation, iPhone Plus/Max en paysage. wRegular hCompact — iPad en paysage avec contenu étroit. Chaque combinaison détermine quelles contraintes et éléments sont actifs. Le développeur peut définir l'apparence pour chaque combinaison séparément dans Interface Builder.
Size Class pour Mac Catalyst
Sur Mac Catalyst, Size Class est toujours wRegular hRegular — interface pleine taille. Cela signifie que la version Mac d'une application iPad obtient un espace maximal. Le développeur peut utiliser des vérifications supplémentaires via UIScreen.traitCollection.userInterfaceIdiom pour distinguer Mac d'iPad. Size Class sur Mac fonctionne de manière stable, mais les applications Catalyst nécessitent souvent une adaptation supplémentaire pour la souris et le clavier au-delà de Size Class.
Comment Size Class affecte la mise en page adaptative
Size Class détermine quelles contraintes Auto Layout sont actives, quels éléments d'interface sont visibles et comment les sous-vues sont disposées. Le développeur peut définir différentes contraintes pour différents Size Classes, et iOS les bascule automatiquement lorsque la collection de traits change. Par exemple, sur iPad (wRegular hRegular), un tableau avec détails s'affiche en Master-Detail, sur iPhone (wCompact hRegular) — en Navigation Stack. C'est le scénario principal de la mise en page adaptative avec Size Class.
Définition et suppression des contraintes
Dans Interface Builder, le développeur sélectionne une combinaison Size Class via le bouton Vary for Traits et ajoute des contraintes qui doivent s'appliquer uniquement à cette combinaison. Les contraintes définies pour wAny hAny s'appliquent toujours. Les contraintes définies pour une combinaison spécifique s'activent uniquement lorsque Size Class correspond. Si aucune contrainte spéciale n'est définie pour une combinaison, les contraintes de base sont utilisées. Lorsque Size Class change, iOS anime la transition entre les ensembles de contraintes.
Masquer et afficher les éléments
Le drapeau Installed dans Interface Builder permet de masquer des éléments pour des Size Classes spécifiques. Le développeur marque un élément comme Uninstalled pour la combinaison sélectionnée. Par exemple, un bouton Details est visible uniquement sur iPad (wRegular hRegular), et masqué sur iPhone. C'est plus simple que de gérer isHidden dans le code. Pour le masquage programmatique, remplacez traitCollectionDidChange ou utilisez la méthode willTransition, en vérifiant le Size Class actuel.
Utilisation de Size Class dans Interface Builder
Interface Builder fournit l'outil visuel Vary for Traits pour travailler avec Size Class. Le développeur sélectionne la combinaison souhaitée (largeur et hauteur), et Interface Builder montre un aperçu de l'écran pour cette combinaison. Toutes les modifications de contraintes, tailles, polices et visibilité effectuées dans ce mode s'appliquent uniquement au Size Class sélectionné. La sortie du mode enregistre les paramètres. Cette approche remplace la nécessité d'écrire du code d'adaptation pour différents appareils.
Travail étape par étape dans Interface Builder
Pour configurer Size Class dans Interface Builder, le développeur ouvre un storyboard, sélectionne le contrôleur de vue et clique sur le bouton Vary for Traits dans le panneau inférieur. Ensuite, il sélectionne Width (Compact, Regular ou Any) et Height (Compact, Regular ou Any). L'interface passe en mode édition pour la combinaison sélectionnée. Toutes les modifications de contraintes, l'ajout ou la suppression d'éléments s'appliquent uniquement à cette combinaison. Après avoir terminé la configuration, le développeur quitte le mode — les modifications sont enregistrées pour la combinaison Size Class spécifique.
Meilleures pratiques
Apple recommande de commencer par une mise en page de base pour wAny hAny (la combinaison de base couvrant tous les appareils). Ensuite, affiner la mise en page pour les combinaisons problématiques : wCompact hRegular (iPhone en portrait) et wRegular hRegular (iPad). Il n'est pas recommandé de configurer chaque combinaison — seulement celles où la mise en page se brise. Une configuration excessive complique la maintenance. Pour un réglage précis des polices, utilisez Dynamic Type au lieu de Size Class : les polices s'adaptent automatiquement à la taille de l'écran.
Size Class dans le code : UITraitCollection
UITraitCollection est une classe iOS qui contient le Size Class actuel et d'autres caractéristiques d'environnement (force touch, échelle d'affichage, idiome d'interface utilisateur). Chaque UIView et UIViewController a sa propre traitCollection, héritée du parent. Le développeur obtient Size Class via traitCollection.horizontalSizeClass et traitCollection.verticalSizeClass, qui retournent UIUserInterfaceSizeClass (.compact, .regular ou .unspecified). Les changements de Size Class sont suivis en remplaçant traitCollectionDidChange.
Exemple : changement de mise en page dans le code
Considérons un exemple d'adaptation de la mise en page UICollectionView à Size Class. Sur iPad (wRegular hRegular), utilisez UICollectionViewCompositionalLayout avec deux colonnes, sur iPhone (wCompact hRegular) — avec une. Le code vérifie le Size Class horizontal et sélectionne la mise en page appropriée. Lors de la rotation ou du passage en Split View, iOS appelle traitCollectionDidChange, et le contrôleur change la mise en page avec animation.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Répondre aux changements de collection de traits
La méthode traitCollectionDidChange est appelée à tout changement de Size Class : rotation de l'appareil, entrée/sortie de Split View, connexion d'un écran externe. Dans cette méthode, le développeur met à jour la mise en page, recharge les collections, met à jour les priorités de contraintes ou change la visibilité des éléments. Il est important de vérifier si Size Class a réellement changé, et non une autre caractéristique : comparez traitCollection.horizontalSizeClass avec previousTraitCollection?.horizontalSizeClass. L'optimisation empêche les redessinages inutiles lors du changement de force touch ou d'échelle d'affichage.
Particularités de Size Class sur différents appareils
Différents appareils Apple ont différentes combinaisons Size Class, et le développeur doit tenir compte de ces particularités. iPhone en portrait — wCompact hRegular, en paysage — dépend du modèle : iPhone SE/6/7/8 (wCompact hCompact), iPhone X et plus récents (wCompact hCompact ou wCompact hRegular selon le contenu). iPad en mode plein écran — wRegular hRegular, en Split View — peut être wCompact hRegular (1/3 d'écran) ou wRegular hRegular (2/3 d'écran). Mac Catalyst — toujours wRegular hRegular.
iPhone : toutes les tailles
Sur iPhone, Size Class est stable pour la plupart des modèles, mais il y a des nuances. iPhone Plus (6+, 7+, 8+) et Max (X, XS, 11 Pro, 13–16 Pro Max) en paysage ont wRegular hCompact — comme iPad mini. Cela permet de placer le contenu sur deux colonnes sur les grands iPhones en paysage. iPhone SE (1re–3e génération) en paysage — wCompact hCompact. Size Class vertical sur tous les iPhones en portrait est Regular, sauf iPhone SE en paysage où il est Compact. L'horizontal est toujours Compact pour le portrait et le paysage (sauf Plus/Max en paysage).
iPad et Split View
iPad en mode plein écran — wRegular hRegular, offrant une flexibilité de mise en page maximale. En Split View, le comportement change : si l'application occupe 1/3 de l'écran (Slide Over ou Split à 1/3), le Size Class horizontal devient Compact, bien que le vertical reste Regular. À 2/3 d'écran — wRegular hRegular. Le développeur doit tester l'interface dans tous les modes Split View, car Size Class change dynamiquement. Apple recommande d'utiliser Size Class avec UISplitViewController pour un comportement cohérent sur iPad.
Questions fréquentes
En quoi Size Class diffère-t-il d'un point d'arrêt (breakpoint) en CSS ?
Size Class est un système discret avec 4 combinaisons, tandis que les points d'arrêt CSS sont continus avec un nombre arbitraire de points. Size Class s'abstrait des tailles d'écran spécifiques, regroupant les appareils par comportement. Les points d'arrêt CSS sont liés aux pixels, Size Class — aux catégories logiques Compact/Regular.
Pourquoi l'iPhone Plus en paysage a-t-il un Size Class horizontal Regular ?
iPhone Plus/Max en paysage a une largeur d'écran suffisante pour afficher le contenu sur deux colonnes (comme iPad mini). Apple attribue Regular horizontal pour que le développeur puisse utiliser une mise en page multi-colonnes sans vérifications supplémentaires. C'est une exception à la règle Compact pour iPhone.
Peut-on modifier Size Class par programmation ?
Size Class est déterminé par iOS en fonction des caractéristiques réelles de l'appareil et ne peut pas être modifié à partir du code de l'application. Le développeur ne peut que réagir à la valeur actuelle. L'interface système peut remplacer Size Class pour les éléments système, mais dans l'application, c'est impossible.
Comment Size Class fonctionne-t-il avec SwiftUI ?
SwiftUI n'utilise pas Size Class directement — à la place, le développeur utilise le modificateur @Environment(\.horizontalSizeClass) pour lire la valeur actuelle. SwiftUI offre des outils de plus haut niveau : Size Classes et AnyLayout avec le protocole Layout pour la mise en page adaptative.
Size Class est-il mis à jour lors de la connexion d'un moniteur externe ?
Oui, lors de la connexion d'un écran externe via Stage Manager ou Sidecar, iOS met à jour Size Class. Le moniteur externe obtient généralement wRegular hRegular, tandis que l'écran principal conserve son Size Class. traitCollectionDidChange est appelé pour les fenêtres de chaque écran indépendamment.
Résumé
- Size Class est un système de classification d'écran iOS avec deux valeurs Compact/Regular par axe, totalisant 4 combinaisons.
- iPhone en portrait — wCompact hRegular. iPad en mode plein écran — wRegular hRegular. iPhone Plus/Max en paysage — wRegular hCompact.
- Interface Builder fournit Vary for Traits pour la configuration visuelle des contraintes et de la visibilité pour chaque Size Class.
- UITraitCollection est une API programmatique pour lire Size Class via horizontalSizeClass et verticalSizeClass. Les changements sont suivis dans traitCollectionDidChange.
- Split View sur iPad change dynamiquement Size Class : à 1/3 d'écran, l'horizontal devient Compact, nécessitant une adaptation de la mise en page.
- SwiftUI fournit @Environment(\.horizontalSizeClass) pour lire Size Class et AnyLayout pour basculer entre les mises en page à l'exécution.
- Il est recommandé de commencer par une mise en page pour wAny hAny, puis d'adapter pour wCompact hRegular (iPhone) et wRegular hRegular (iPad), sans surcharger les combinaisons restantes.
Nous développerons une application mobile clé en main
IT Sectr crée des applications iOS et Android pour les startups et les entreprises depuis 2017. Nous vous conseillerons et vous proposerons la meilleure solution.
Lisez aussi