Size Class: qué es, clases de tamaño Compact y Regular en iOS
Size Class es un mecanismo de iOS para diseño adaptativo que divide todos los dispositivos en dos categorías por cada eje: Compact (estrecho/corto) y Regular (ancho/largo). Las combinaciones de estos valores determinan cómo se muestra la interfaz en iPhone, iPad, Mac Catalyst y CarPlay. Según Apple Human Interface Guidelines, 2024, Size Class permite construir un storyboard único para todos los dispositivos usando Auto Layout y UITraitCollection. El sistema funciona en todos los dispositivos iOS desde iOS 8.
Puntos clave
- Size Class es un sistema de clasificación de tamaño en iOS con dos valores por eje: Compact (comprimido) y Regular (tamaño completo).
- Size Class horizontal en iPhone en orientación portrait es Compact, en iPad — Regular. El vertical es Regular en todos los iPhone excepto SE.
- UITraitCollection es una interfaz programática para obtener el Size Class actual y responder a cambios en la colección de rasgos en tiempo de ejecución.
- Interface Builder permite configurar constraints y visibilidad de elementos para cada combinación de Size Class con la herramienta Vary for Traits.
- Diseño adaptativo con Size Class reemplaza storyboards separados para iPhone y iPad — un archivo se adapta a todos los dispositivos.
¿Qué es Size Class?
Size Class es una clasificación abstracta de pantalla en iOS, introducida por Apple en iOS 8 para unificar el diseño adaptativo. En lugar de verificar un modelo específico de dispositivo, Size Class define dos características: espacio horizontal y vertical disponible. Cada característica toma uno de dos valores — Compact (espacio limitado) o Regular (espacio suficiente). La combinación de estos valores forma una trait collection, que se pasa a todos los elementos de la interfaz.
Historia y propósito
Antes de Size Class, los desarrolladores creaban storyboards separados para iPhone y iPad o usaban comprobaciones UI_USER_INTERFACE_IDIOM() en código. Esto llevaba a duplicación de código, storyboards inflados y dificultades para soportar nuevos tamaños de pantalla. Size Class resolvió el problema ofreciendo un sistema universal: el desarrollador configura la interfaz para 4 combinaciones Compact/Regular, e iOS selecciona automáticamente la adecuada. Con la llegada de Split View en iPad y los diferentes tamaños de iPhone, el sistema se volvió indispensable para el diseño adaptativo.
Cómo funciona Size Class
Size Class es calculado por iOS basándose en el ancho y alto actual de la pantalla, teniendo en cuenta la orientación y la multitarea. Los valores no están vinculados a píxeles específicos — es una categoría lógica. Por ejemplo, el iPhone 16 Pro en portrait tiene horizontal Compact y vertical Regular. El mismo iPhone en landscape — Compact en ambos ejes. El iPad en Split View con una aplicación en 1/3 de la pantalla obtiene horizontal Compact, aunque en modo pantalla completa es Regular. El sistema actualiza automáticamente el Size Class al cambiar la orientación o Split View.
¿Qué clases de tamaño existen?
Size Class utiliza cuatro combinaciones de dos valores en dos ejes. Cada combinación tiene su aplicación según el tipo de dispositivo y su orientación. Comprender estas combinaciones es la base para diseñar una interfaz adaptativa en iOS. El sistema cubre todos los dispositivos Apple actuales: iPhone, iPad, Mac Catalyst y CarPlay. Apple recomienda comenzar el diseño con la combinación wAny hAny (layout base) y refinar para combinaciones específicas.
Cuatro combinaciones de Size Class
wCompact hRegular — iPhone en portrait (excepto Plus/Max en algunos casos). wCompact hCompact — iPhone SE/6/7/8 en landscape. wRegular hRegular — iPad en pantalla completa en cualquier orientación, iPhone Plus/Max en landscape. wRegular hCompact — iPad en landscape con contenido estrecho. Cada combinación determina qué constraints y elementos están activos. El desarrollador puede definir la apariencia para cada combinación por separado en Interface Builder.
Size Class para Mac Catalyst
En Mac Catalyst, Size Class es siempre wRegular hRegular — interfaz de tamaño completo. Esto significa que la versión Mac de una aplicación de iPad obtiene el máximo espacio. El desarrollador puede usar comprobaciones adicionales mediante UIScreen.traitCollection.userInterfaceIdiom para distinguir Mac de iPad. Size Class en Mac funciona de forma estable, pero las aplicaciones Catalyst a menudo requieren adaptación adicional para ratón y teclado más allá de Size Class.
Cómo afecta Size Class al diseño adaptativo
Size Class determina qué constraints de Auto Layout están activos, qué elementos de la interfaz son visibles y cómo se organizan las subviews. El desarrollador puede establecer diferentes constraints para diferentes Size Classes, e iOS los cambia automáticamente al modificar la trait collection. Por ejemplo, en iPad (wRegular hRegular) una tabla con detalle se muestra en Master-Detail, en iPhone (wCompact hRegular) — en Navigation Stack. Este es el escenario principal del diseño adaptativo con Size Class.
Establecer y eliminar constraints
En Interface Builder, el desarrollador selecciona una combinación de Size Class mediante el botón Vary for Traits y añade constraints que deben aplicarse solo para esa combinación. Los constraints establecidos para wAny hAny siempre se aplican. Los constraints establecidos para una combinación específica se activan solo cuando el Size Class coincide. Si no hay constraints especiales para una combinación, se usan los base. Al cambiar el Size Class, iOS anima la transición entre conjuntos de constraints.
Ocultar y mostrar elementos
El indicador Installed en Interface Builder permite ocultar elementos para Size Classes específicos. El desarrollador marca un elemento como Uninstalled para la combinación seleccionada. Por ejemplo, un botón Details es visible solo en iPad (wRegular hRegular), y oculto en iPhone. Esto es más simple que gestionar isHidden en código. Para ocultación programática, se sobrescribe traitCollectionDidChange o se usa el método willTransition, verificando el Size Class actual.
Uso de Size Class en Interface Builder
Interface Builder proporciona la herramienta visual Vary for Traits para trabajar con Size Class. El desarrollador selecciona la combinación deseada (ancho y alto), e Interface Builder muestra una vista previa de la pantalla para esa combinación. Todos los cambios de constraints, tamaños, fuentes y visibilidad realizados en este modo se aplican solo al Size Class seleccionado. Al salir del modo, se guardan los ajustes. Este enfoque reemplaza la necesidad de escribir código de adaptación para diferentes dispositivos.
Trabajo paso a paso en Interface Builder
Para configurar Size Class en Interface Builder, el desarrollador abre un storyboard, selecciona el view controller y hace clic en el botón Vary for Traits en el panel inferior. Luego selecciona Width (Compact, Regular o Any) y Height (Compact, Regular o Any). La interfaz cambia al modo de edición para la combinación seleccionada. Todos los cambios de constraints, adición o eliminación de elementos se aplican solo a esta combinación. Al finalizar la configuración, el desarrollador sale del modo — los cambios se guardan para la combinación específica de Size Class.
Mejores prácticas
Apple recomienda comenzar con un layout base para wAny hAny (la combinación base que cubre todos los dispositivos). Luego refinar el layout para combinaciones problemáticas: wCompact hRegular (iPhone en portrait) y wRegular hRegular (iPad). No se recomienda configurar cada combinación — solo aquellas donde el layout se rompe. La configuración excesiva complica el mantenimiento. Para ajuste preciso de fuentes, use Dynamic Type en lugar de Size Class: las fuentes se adaptan automáticamente al tamaño de pantalla.
Size Class en código: UITraitCollection
UITraitCollection es una clase de iOS que contiene el Size Class actual y otras características del entorno (force touch, escala de pantalla, idiom de interfaz de usuario). Cada UIView y UIViewController tiene su propio traitCollection, heredado del padre. El desarrollador obtiene Size Class mediante traitCollection.horizontalSizeClass y traitCollection.verticalSizeClass, que devuelven UIUserInterfaceSizeClass (.compact, .regular o .unspecified). Los cambios de Size Class se rastrean sobrescribiendo traitCollectionDidChange.
Ejemplo: cambio de layout en código
Considere un ejemplo de adaptación del layout de UICollectionView al Size Class. En iPad (wRegular hRegular) use UICollectionViewCompositionalLayout con dos columnas, en iPhone (wCompact hRegular) — con una. El código verifica el Size Class horizontal y selecciona el layout apropiado. Al rotar o cambiar a Split View, iOS llama a traitCollectionDidChange, y el controlador cambia el layout con animación.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Responder a cambios en la trait collection
El método traitCollectionDidChange se llama ante cualquier cambio de Size Class: rotación del dispositivo, entrada/salida de Split View, conexión de una pantalla externa. En este método, el desarrollador actualiza el layout, recarga colecciones, actualiza prioridades de constraints o cambia la visibilidad de elementos. Es importante verificar si realmente cambió el Size Class, no otra característica: compare traitCollection.horizontalSizeClass con previousTraitCollection?.horizontalSizeClass. La optimización evita redibujados innecesarios al cambiar force touch o escala de pantalla.
Particularidades de Size Class en diferentes dispositivos
Diferentes dispositivos Apple tienen diferentes combinaciones de Size Class, y el desarrollador debe tener en cuenta estas particularidades. iPhone en portrait — wCompact hRegular, en landscape — depende del modelo: iPhone SE/6/7/8 (wCompact hCompact), iPhone X y posteriores (wCompact hCompact o wCompact hRegular según el contenido). iPad en modo pantalla completa — wRegular hRegular, en Split View — puede ser wCompact hRegular (1/3 de pantalla) o wRegular hRegular (2/3 de pantalla). Mac Catalyst — siempre wRegular hRegular.
iPhone: todos los tamaños
En iPhone, Size Class es estable para la mayoría de modelos, pero hay matices. iPhone Plus (6+, 7+, 8+) y Max (X, XS, 11 Pro, 13–16 Pro Max) en landscape tienen wRegular hCompact — como iPad mini. Esto permite colocar contenido en dos columnas en iPhones grandes en landscape. iPhone SE (1ª–3ª generación) en landscape — wCompact hCompact. Size Class vertical en todos los iPhone en portrait es Regular, excepto iPhone SE en landscape donde es Compact. El horizontal es siempre Compact para portrait y landscape (excepto Plus/Max en landscape).
iPad y Split View
iPad en modo pantalla completa — wRegular hRegular, proporcionando máxima flexibilidad de layout. En Split View, el comportamiento cambia: si la aplicación ocupa 1/3 de la pantalla (Slide Over o Split al 1/3), el Size Class horizontal se vuelve Compact, aunque el vertical sigue siendo Regular. Con 2/3 de pantalla — wRegular hRegular. El desarrollador debe probar la interfaz en todos los modos de Split View, ya que Size Class cambia dinámicamente. Apple recomienda usar Size Class junto con UISplitViewController para un comportamiento consistente en iPad.
Preguntas frecuentes
¿En qué se diferencia Size Class de un breakpoint en CSS?
Size Class es un sistema discreto con 4 combinaciones, mientras que los breakpoints de CSS son continuos con un número arbitrario de puntos. Size Class se abstrae de tamaños de pantalla específicos, agrupando dispositivos por comportamiento. Los breakpoints de CSS están vinculados a píxeles, Size Class — a categorías lógicas Compact/Regular.
¿Por qué el iPhone Plus en landscape tiene Size Class Regular horizontal?
iPhone Plus/Max en landscape tiene suficiente ancho de pantalla para mostrar contenido en dos columnas (como iPad mini). Apple asigna Regular horizontal para que el desarrollador pueda usar un diseño multicolumna sin comprobaciones adicionales. Esta es una excepción a la regla Compact para iPhone.
¿Se puede cambiar Size Class programáticamente?
Size Class es determinado por iOS basándose en las características reales del dispositivo y no se puede cambiar desde el código de la aplicación. El desarrollador solo puede reaccionar al valor actual. La UI del sistema puede sobrescribir Size Class para elementos del sistema, pero en la aplicación esto es imposible.
¿Cómo funciona Size Class con SwiftUI?
SwiftUI no usa Size Class directamente — en su lugar, el desarrollador usa el modificador @Environment(\.horizontalSizeClass) para leer el valor actual. SwiftUI ofrece herramientas de mayor nivel: Size Classes y AnyLayout con el protocolo Layout para diseño adaptativo.
¿Se actualiza Size Class al conectar un monitor externo?
Sí, al conectar una pantalla externa mediante Stage Manager o Sidecar, iOS actualiza Size Class. El monitor externo generalmente obtiene wRegular hRegular, mientras que la pantalla principal conserva su Size Class. traitCollectionDidChange se llama para las ventanas de cada pantalla de forma independiente.
Resumen
- Size Class es un sistema de clasificación de pantalla de iOS con dos valores Compact/Regular por eje, totalizando 4 combinaciones.
- iPhone en portrait — wCompact hRegular. iPad en modo pantalla completa — wRegular hRegular. iPhone Plus/Max en landscape — wRegular hCompact.
- Interface Builder proporciona Vary for Traits para configuración visual de constraints y visibilidad para cada Size Class.
- UITraitCollection es una API programática para leer Size Class mediante horizontalSizeClass y verticalSizeClass. Los cambios se rastrean en traitCollectionDidChange.
- Split View en iPad cambia dinámicamente Size Class: con 1/3 de pantalla el horizontal se vuelve Compact, requiriendo adaptación del layout.
- SwiftUI proporciona @Environment(\.horizontalSizeClass) para leer Size Class y AnyLayout para cambiar entre layouts en tiempo de ejecución.
- Se recomienda comenzar con layout para wAny hAny, luego adaptar para wCompact hRegular (iPhone) y wRegular hRegular (iPad), sin sobrecargar las combinaciones restantes.
Desarrollaremos una aplicación móvil llave en mano
IT Sectr crea aplicaciones para iOS y Android para startups y empresas desde 2017. Le asesoraremos y le propondremos la mejor solución.
Lea también