Size Class: cosa sono, classi di dimensione Compact e Regular in iOS
Size Class è un meccanismo iOS per il layout adattivo che divide tutti i dispositivi in due categorie per asse: Compact (stretto/corto) e Regular (largo/lungo). Le combinazioni di questi valori determinano come l'interfaccia viene visualizzata su iPhone, iPad, Mac Catalyst e CarPlay. Secondo Apple Human Interface Guidelines, 2024, Size Class permette di costruire un unico storyboard per tutti i dispositivi usando Auto Layout e UITraitCollection. Il sistema funziona su tutti i dispositivi iOS a partire da iOS 8.
Punti chiave
- Size Class è un sistema di classificazione delle dimensioni in iOS con due valori per asse: Compact (compresso) e Regular (dimensioni complete).
- Size Class orizzontale su iPhone in orientamento verticale è Compact, su iPad — Regular. Quello verticale è Regular su tutti gli iPhone tranne SE.
- UITraitCollection è un'interfaccia programmatica per ottenere lo Size Class corrente e rispondere ai cambiamenti della raccolta di tratti in fase di esecuzione.
- Interface Builder permette di configurare vincoli e visibilità degli elementi per ogni combinazione Size Class con lo strumento Vary for Traits.
- Layout adattivo con Size Class sostituisce storyboard separati per iPhone e iPad — un file si adatta a tutti i dispositivi.
Cosa sono Size Class?
Size Class è una classificazione astratta dello schermo in iOS, introdotta da Apple in iOS 8 per unificare il layout adattivo. Invece di controllare un modello specifico di dispositivo, Size Class definisce due caratteristiche: spazio orizzontale e verticale disponibile. Ogni caratteristica assume uno dei due valori — Compact (spazio limitato) o Regular (spazio sufficiente). La combinazione di questi valori forma una raccolta di tratti (trait collection), che viene passata a tutti gli elementi dell'interfaccia.
Storia e scopo
Prima di Size Class, gli sviluppatori creavano storyboard separati per iPhone e iPad o utilizzavano controlli UI_USER_INTERFACE_IDIOM() nel codice. Questo portava a duplicazione di codice, storyboard gonfiati e difficoltà nel supportare nuove dimensioni dello schermo. Size Class ha risolto il problema offrendo un sistema universale: lo sviluppatore configura l'interfaccia per 4 combinazioni Compact/Regular e iOS seleziona automaticamente quella appropriata. Con l'avvento di Split View su iPad e delle diverse dimensioni di iPhone, il sistema è diventato indispensabile per il layout adattivo.
Come funziona Size Class
Size Class viene calcolato da iOS in base alla larghezza e altezza correnti dello schermo, tenendo conto dell'orientamento e del multitasking. I valori non sono legati a pixel specifici — è una categoria logica. Ad esempio, iPhone 16 Pro in verticale ha orizzontale Compact e verticale Regular. Lo stesso iPhone in orizzontale — Compact su entrambi gli assi. iPad in Split View con un'app a 1/3 dello schermo ottiene orizzontale Compact, sebbene in modalità schermo intero sia Regular. Il sistema aggiorna automaticamente Size Class al cambiamento dell'orientamento o di Split View.
Quali classi di dimensione esistono
Size Class utilizza quattro combinazioni di due valori su due assi. Ogni combinazione ha la sua applicazione a seconda del tipo di dispositivo e del suo orientamento. Comprendere queste combinazioni è la base per progettare un'interfaccia adattiva per iOS. Il sistema copre tutti i dispositivi Apple attuali: iPhone, iPad, Mac Catalyst e CarPlay. Apple raccomanda di iniziare la progettazione con la combinazione wAny hAny (layout base) e perfezionare per combinazioni specifiche.
Quattro combinazioni Size Class
wCompact hRegular — iPhone in verticale (tranne Plus/Max in alcuni casi). wCompact hCompact — iPhone SE/6/7/8 in orizzontale. wRegular hRegular — iPad a schermo intero in qualsiasi orientamento, iPhone Plus/Max in orizzontale. wRegular hCompact — iPad in orizzontale con contenuto stretto. Ogni combinazione determina quali vincoli ed elementi sono attivi. Lo sviluppatore può impostare l'aspetto per ogni combinazione separatamente in Interface Builder.
Size Class per Mac Catalyst
Su Mac Catalyst, Size Class è sempre wRegular hRegular — interfaccia a dimensioni complete. Ciò significa che la versione Mac di un'app iPad ottiene lo spazio massimo. Lo sviluppatore può utilizzare controlli aggiuntivi tramite UIScreen.traitCollection.userInterfaceIdiom per distinguere Mac da iPad. Size Class su Mac funziona in modo stabile, ma le app Catalyst spesso richiedono un adattamento aggiuntivo per mouse e tastiera oltre Size Class.
Come Size Class influisce sul layout adattivo
Size Class determina quali vincoli Auto Layout sono attivi, quali elementi dell'interfaccia sono visibili e come sono disposte le subview. Lo sviluppatore può impostare diversi vincoli per diversi Size Class e iOS li commuta automaticamente quando la raccolta di tratti cambia. Ad esempio, su iPad (wRegular hRegular) una tabella con dettagli viene visualizzata in Master-Detail, su iPhone (wCompact hRegular) — in Navigation Stack. Questo è lo scenario principale del layout adattivo con Size Class.
Impostazione e rimozione dei vincoli
In Interface Builder, lo sviluppatore seleziona una combinazione Size Class tramite il pulsante Vary for Traits e aggiunge vincoli che dovrebbero applicarsi solo per quella combinazione. I vincoli impostati per wAny hAny si applicano sempre. I vincoli impostati per una combinazione specifica si attivano solo quando Size Class corrisponde. Se non ci sono vincoli speciali per una combinazione, vengono utilizzati i vincoli base. Quando Size Class cambia, iOS anima la transizione tra gli insiemi di vincoli.
Nascondere e mostrare elementi
Il flag Installed in Interface Builder permette di nascondere elementi per Size Class specifici. Lo sviluppatore marca un elemento come Uninstalled per la combinazione selezionata. Ad esempio, un pulsante Details è visibile solo su iPad (wRegular hRegular) e nascosto su iPhone. Questo è più semplice che gestire isHidden nel codice. Per la rimozione programmatica, sovrascrivi traitCollectionDidChange o utilizza il metodo willTransition, controllando lo Size Class corrente.
Uso di Size Class in Interface Builder
Interface Builder fornisce lo strumento visivo Vary for Traits per lavorare con Size Class. Lo sviluppatore seleziona la combinazione desiderata (larghezza e altezza) e Interface Builder mostra un'anteprima dello schermo per quella combinazione. Tutte le modifiche a vincoli, dimensioni, caratteri e visibilità effettuate in questa modalità si applicano solo allo Size Class selezionato. Uscire dalla modalità salva le impostazioni. Questo approccio sostituisce la necessità di scrivere codice di adattamento per diversi dispositivi.
Lavoro passo passo in Interface Builder
Per configurare Size Class in Interface Builder, lo sviluppatore apre uno storyboard, seleziona il view controller e fa clic sul pulsante Vary for Traits nel pannello inferiore. Poi seleziona Width (Compact, Regular o Any) e Height (Compact, Regular o Any). L'interfaccia passa in modalità di modifica per la combinazione selezionata. Tutte le modifiche ai vincoli, l'aggiunta o la rimozione di elementi si applicano solo a questa combinazione. Dopo aver completato la configurazione, lo sviluppatore esce dalla modalità — le modifiche vengono salvate per la combinazione Size Class specifica.
Migliori pratiche
Apple raccomanda di iniziare con un layout base per wAny hAny (la combinazione base che copre tutti i dispositivi). Poi perfezionare il layout per le combinazioni problematiche: wCompact hRegular (iPhone in verticale) e wRegular hRegular (iPad). Non è consigliato configurare ogni combinazione — solo quelle dove il layout si rompe. Una configurazione eccessiva complica la manutenzione. Per una regolazione precisa dei caratteri, usa Dynamic Type invece di Size Class: i caratteri si adattano automaticamente alla dimensione dello schermo.
Size Class nel codice: UITraitCollection
UITraitCollection è una classe iOS che contiene lo Size Class corrente e altre caratteristiche dell'ambiente (force touch, scala dello schermo, idioma dell'interfaccia utente). Ogni UIView e UIViewController ha la propria traitCollection, ereditata dal genitore. Lo sviluppatore ottiene Size Class tramite traitCollection.horizontalSizeClass e traitCollection.verticalSizeClass, che restituiscono UIUserInterfaceSizeClass (.compact, .regular o .unspecified). I cambiamenti di Size Class vengono tracciati sovrascrivendo traitCollectionDidChange.
Esempio: cambio di layout nel codice
Consideriamo un esempio di adattamento del layout UICollectionView a Size Class. Su iPad (wRegular hRegular) usa UICollectionViewCompositionalLayout con due colonne, su iPhone (wCompact hRegular) — con una. Il codice controlla lo Size Class orizzontale e seleziona il layout appropriato. Durante la rotazione o il passaggio a Split View, iOS chiama traitCollectionDidChange e il controller cambia il layout con animazione.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Rispondere ai cambiamenti della raccolta di tratti
Il metodo traitCollectionDidChange viene chiamato ad ogni cambiamento di Size Class: rotazione del dispositivo, entrata/uscita da Split View, connessione di un display esterno. In questo metodo, lo sviluppatore aggiorna il layout, ricarica le collezioni, aggiorna le priorità dei vincoli o modifica la visibilità degli elementi. È importante verificare se Size Class è effettivamente cambiato, non un'altra caratteristica: confronta traitCollection.horizontalSizeClass con previousTraitCollection?.horizontalSizeClass. L'ottimizzazione previene ridisegni non necessari quando cambia force touch o scala dello schermo.
Particolarità di Size Class su diversi dispositivi
Diversi dispositivi Apple hanno diverse combinazioni Size Class e lo sviluppatore deve tenere conto di queste particolarità. iPhone in verticale — wCompact hRegular, in orizzontale — dipende dal modello: iPhone SE/6/7/8 (wCompact hCompact), iPhone X e successivi (wCompact hCompact o wCompact hRegular a seconda del contenuto). iPad in modalità schermo intero — wRegular hRegular, in Split View — può essere wCompact hRegular (1/3 di schermo) o wRegular hRegular (2/3 di schermo). Mac Catalyst — sempre wRegular hRegular.
iPhone: tutte le dimensioni
Su iPhone, Size Class è stabile per la maggior parte dei modelli, ma ci sono sfumature. iPhone Plus (6+, 7+, 8+) e Max (X, XS, 11 Pro, 13–16 Pro Max) in orizzontale hanno wRegular hCompact — come iPad mini. Questo permette di posizionare il contenuto su due colonne sugli iPhone grandi in orizzontale. iPhone SE (1ª–3ª generazione) in orizzontale — wCompact hCompact. Size Class verticale su tutti gli iPhone in verticale è Regular, tranne iPhone SE in orizzontale dove è Compact. L'orizzontale è sempre Compact per verticale e orizzontale (tranne Plus/Max in orizzontale).
iPad e Split View
iPad in modalità schermo intero — wRegular hRegular, offrendo la massima flessibilità di layout. In Split View, il comportamento cambia: se l'app occupa 1/3 dello schermo (Slide Over o Split a 1/3), lo Size Class orizzontale diventa Compact, sebbene il verticale rimanga Regular. A 2/3 di schermo — wRegular hRegular. Lo sviluppatore dovrebbe testare l'interfaccia in tutte le modalità Split View, poiché Size Class cambia dinamicamente. Apple raccomanda di usare Size Class insieme a UISplitViewController per un comportamento coerente su iPad.
Domande frequenti
In cosa Size Class si differenzia da un breakpoint in CSS?
Size Class è un sistema discreto con 4 combinazioni, mentre i breakpoint CSS sono continui con un numero arbitrario di punti. Size Class si astrae dalle dimensioni specifiche dello schermo, raggruppando i dispositivi per comportamento. I breakpoint CSS sono legati ai pixel, Size Class — alle categorie logiche Compact/Regular.
Perché iPhone Plus in orizzontale ha Size Class orizzontale Regular?
iPhone Plus/Max in orizzontale ha una larghezza dello schermo sufficiente per visualizzare il contenuto su due colonne (come iPad mini). Apple assegna orizzontale Regular in modo che lo sviluppatore possa utilizzare un layout multi-colonna senza controlli aggiuntivi. Questa è un'eccezione alla regola Compact per iPhone.
Si può modificare Size Class a livello di programmazione?
Size Class è determinato da iOS in base alle caratteristiche reali del dispositivo e non può essere modificato dal codice dell'app. Lo sviluppatore può solo reagire al valore corrente. L'UI di sistema può sovrascrivere Size Class per gli elementi di sistema, ma nell'app questo è impossibile.
Come funziona Size Class con SwiftUI?
SwiftUI non usa Size Class direttamente — invece, lo sviluppatore usa il modificatore @Environment(\.horizontalSizeClass) per leggere il valore corrente. SwiftUI offre strumenti di livello superiore: Size Classes e AnyLayout con il protocollo Layout per il layout adattivo.
Size Class viene aggiornato quando si collega un monitor esterno?
Sì, quando si collega un display esterno tramite Stage Manager o Sidecar, iOS aggiorna Size Class. Il monitor esterno ottiene solitamente wRegular hRegular, mentre lo schermo principale mantiene il suo Size Class. traitCollectionDidChange viene chiamato per le finestre su ogni schermo indipendentemente.
Riepilogo
- Size Class è un sistema di classificazione dello schermo iOS con due valori Compact/Regular per asse, per un totale di 4 combinazioni.
- iPhone in verticale — wCompact hRegular. iPad in modalità schermo intero — wRegular hRegular. iPhone Plus/Max in orizzontale — wRegular hCompact.
- Interface Builder fornisce Vary for Traits per la configurazione visiva di vincoli e visibilità per ogni Size Class.
- UITraitCollection è un'API programmatica per leggere Size Class tramite horizontalSizeClass e verticalSizeClass. I cambiamenti sono tracciati in traitCollectionDidChange.
- Split View su iPad cambia dinamicamente Size Class: a 1/3 di schermo l'orizzontale diventa Compact, richiedendo l'adattamento del layout.
- SwiftUI fornisce @Environment(\.horizontalSizeClass) per leggere Size Class e AnyLayout per commutare tra layout in fase di esecuzione.
- Si raccomanda di iniziare con il layout per wAny hAny, poi adattare per wCompact hRegular (iPhone) e wRegular hRegular (iPad), senza sovraccaricare le combinazioni rimanenti.
Svilupperemo un'applicazione mobile chiavi in mano
IT Sectr crea applicazioni iOS e Android per startup e aziende dal 2017. Ti consulteremo e ti proporremo la soluzione migliore.
Leggi anche