Size Class: o que é, classes de tamanho Compact e Regular no iOS
Size Class é um mecanismo do iOS para layout adaptativo que divide todos os dispositivos em duas categorias por eixo: Compact (estreito/curto) e Regular (largo/comprido). Combinações desses valores determinam como a interface é exibida no iPhone, iPad, Mac Catalyst e CarPlay. De acordo com Apple Human Interface Guidelines, 2024, o Size Class permite construir um storyboard único para todos os dispositivos usando Auto Layout e UITraitCollection. O sistema funciona em todos os dispositivos iOS desde o iOS 8.
Pontos principais
- Size Class é um sistema de classificação de tamanho no iOS com dois valores por eixo: Compact (comprimido) e Regular (tamanho completo).
- Size Class horizontal no iPhone em orientação retrato é Compact, no iPad — Regular. O vertical é Regular em todos os iPhones exceto SE.
- UITraitCollection é uma interface programática para obter o Size Class atual e responder a mudanças na coleção de características em tempo de execução.
- Interface Builder permite configurar constraints e visibilidade de elementos para cada combinação de Size Class com a ferramenta Vary for Traits.
- Layout adaptativo com Size Class substitui storyboards separados para iPhone e iPad — um arquivo se adapta a todos os dispositivos.
O que é Size Class?
Size Class é uma classificação abstrata de tela no iOS, introduzida pela Apple no iOS 8 para unificar o layout adaptativo. Em vez de verificar um modelo específico de dispositivo, o Size Class define duas características: espaço horizontal e vertical disponível. Cada característica assume um de dois valores — Compact (espaço limitado) ou Regular (espaço suficiente). A combinação desses valores forma uma trait collection, que é passada para todos os elementos da interface.
História e propósito
Antes do Size Class, os desenvolvedores criavam storyboards separados para iPhone e iPad ou usavam verificações UI_USER_INTERFACE_IDIOM() no código. Isso levava a duplicação de código, storyboards inchados e dificuldades em suportar novos tamanhos de tela. O Size Class resolveu o problema oferecendo um sistema universal: o desenvolvedor configura a interface para 4 combinações Compact/Regular, e o iOS seleciona automaticamente a adequada. Com o advento do Split View no iPad e dos diferentes tamanhos de iPhone, o sistema tornou-se indispensável para o layout adaptativo.
Como o Size Class funciona
Size Class é calculado pelo iOS com base na largura e altura atuais da tela, levando em conta a orientação e multitarefa. Os valores não estão vinculados a pixels específicos — é uma categoria lógica. Por exemplo, o iPhone 16 Pro em retrato tem horizontal Compact e vertical Regular. O mesmo iPhone em paisagem — Compact em ambos os eixos. iPad em Split View com um aplicativo em 1/3 da tela obtém horizontal Compact, embora no modo tela cheia seja Regular. O sistema atualiza automaticamente o Size Class ao mudar a orientação ou Split View.
Quais classes de tamanho existem
Size Class usa quatro combinações de dois valores em dois eixos. Cada combinação tem sua aplicação dependendo do tipo de dispositivo e sua orientação. Entender essas combinações é a base para projetar uma interface adaptativa para iOS. O sistema cobre todos os dispositivos Apple atuais: iPhone, iPad, Mac Catalyst e CarPlay. A Apple recomenda começar o design com a combinação wAny hAny (layout base) e refinar para combinações específicas.
Quatro combinações de Size Class
wCompact hRegular — iPhone em retrato (exceto Plus/Max em alguns casos). wCompact hCompact — iPhone SE/6/7/8 em paisagem. wRegular hRegular — iPad em tela cheia em qualquer orientação, iPhone Plus/Max em paisagem. wRegular hCompact — iPad em paisagem com conteúdo estreito. Cada combinação determina quais constraints e elementos estão ativos. O desenvolvedor pode definir a aparência para cada combinação separadamente no Interface Builder.
Size Class para Mac Catalyst
No Mac Catalyst, o Size Class é sempre wRegular hRegular — interface de tamanho completo. Isso significa que a versão Mac de um aplicativo iPad obtém o máximo de espaço. O desenvolvedor pode usar verificações adicionais via UIScreen.traitCollection.userInterfaceIdiom para distinguir Mac de iPad. O Size Class no Mac funciona de forma estável, mas os aplicativos Catalyst frequentemente exigem adaptação adicional para mouse e teclado além do Size Class.
Como o Size Class afeta o layout adaptativo
Size Class determina quais constraints do Auto Layout estão ativos, quais elementos da interface são visíveis e como as subviews são organizadas. O desenvolvedor pode definir diferentes constraints para diferentes Size Classes, e o iOS os alterna automaticamente quando a trait collection muda. Por exemplo, no iPad (wRegular hRegular) uma tabela com detalhes é exibida em Master-Detail, no iPhone (wCompact hRegular) — em Navigation Stack. Este é o cenário principal do layout adaptativo com Size Class.
Definindo e removendo constraints
No Interface Builder, o desenvolvedor seleciona uma combinação de Size Class através do botão Vary for Traits e adiciona constraints que devem se aplicar apenas para essa combinação. Constraints definidos para wAny hAny sempre se aplicam. Constraints definidos para uma combinação específica ativam apenas quando o Size Class corresponde. Se não houver constraints especiais para uma combinação, os base são usados. Quando o Size Class muda, o iOS anima a transição entre conjuntos de constraints.
Ocultando e mostrando elementos
O indicador Installed no Interface Builder permite ocultar elementos para Size Classes específicos. O desenvolvedor marca um elemento como Uninstalled para a combinação selecionada. Por exemplo, um botão Details é visível apenas no iPad (wRegular hRegular), e oculto no iPhone. Isso é mais simples do que gerenciar isHidden no código. Para ocultação programática, sobrescreva traitCollectionDidChange ou use o método willTransition, verificando o Size Class atual.
Usando Size Class no Interface Builder
Interface Builder fornece a ferramenta visual Vary for Traits para trabalhar com Size Class. O desenvolvedor seleciona a combinação desejada (largura e altura), e o Interface Builder mostra uma prévia da tela para essa combinação. Todas as alterações de constraints, tamanhos, fontes e visibilidade feitas neste modo se aplicam apenas ao Size Class selecionado. Sair do modo salva as configurações. Esta abordagem substitui a necessidade de escrever código de adaptação para diferentes dispositivos.
Trabalho passo a passo no Interface Builder
Para configurar Size Class no Interface Builder, o desenvolvedor abre um storyboard, seleciona o view controller e clica no botão Vary for Traits no painel inferior. Em seguida, seleciona Width (Compact, Regular ou Any) e Height (Compact, Regular ou Any). A interface muda para o modo de edição para a combinação selecionada. Todas as alterações de constraints, adição ou remoção de elementos se aplicam apenas a esta combinação. Após finalizar a configuração, o desenvolvedor sai do modo — as alterações são salvas para a combinação específica de Size Class.
Melhores práticas
A Apple recomenda começar com um layout base para wAny hAny (a combinação base que cobre todos os dispositivos). Em seguida, refinar o layout para combinações problemáticas: wCompact hRegular (iPhone em retrato) e wRegular hRegular (iPad). Não é recomendado configurar todas as combinações — apenas aquelas onde o layout quebra. Configuração excessiva complica a manutenção. Para ajuste preciso de fontes, use Dynamic Type em vez de Size Class: as fontes se adaptam automaticamente ao tamanho da tela.
Size Class no código: UITraitCollection
UITraitCollection é uma classe do iOS que contém o Size Class atual e outras características do ambiente (force touch, escala de tela, idiom de interface do usuário). Cada UIView e UIViewController tem seu próprio traitCollection, herdado do pai. O desenvolvedor obtém o Size Class através de traitCollection.horizontalSizeClass e traitCollection.verticalSizeClass, que retornam UIUserInterfaceSizeClass (.compact, .regular ou .unspecified). As alterações de Size Class são rastreadas sobrescrevendo traitCollectionDidChange.
Exemplo: alternando layout no código
Considere um exemplo de adaptação do layout de UICollectionView ao Size Class. No iPad (wRegular hRegular) use UICollectionViewCompositionalLayout com duas colunas, no iPhone (wCompact hRegular) — com uma. O código verifica o Size Class horizontal e seleciona o layout apropriado. Ao rotacionar ou entrar no Split View, o iOS chama traitCollectionDidChange, e o controlador alterna o layout com animação.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Respondendo a mudanças na trait collection
O método traitCollectionDidChange é chamado em qualquer mudança de Size Class: rotação do dispositivo, entrada/saída de Split View, conexão de um display externo. Neste método, o desenvolvedor atualiza o layout, recarrega coleções, atualiza prioridades de constraints ou altera a visibilidade de elementos. É importante verificar se o Size Class realmente mudou, não outra característica: compare traitCollection.horizontalSizeClass com previousTraitCollection?.horizontalSizeClass. A otimização evita redesenho desnecessário quando force touch ou escala de tela mudam.
Particularidades do Size Class em diferentes dispositivos
Diferentes dispositivos Apple têm diferentes combinações de Size Class, e o desenvolvedor deve levar em conta essas particularidades. iPhone em retrato — wCompact hRegular, em paisagem — depende do modelo: iPhone SE/6/7/8 (wCompact hCompact), iPhone X e mais novos (wCompact hCompact ou wCompact hRegular dependendo do conteúdo). iPad no modo tela cheia — wRegular hRegular, no Split View — pode ser wCompact hRegular (1/3 de tela) ou wRegular hRegular (2/3 de tela). Mac Catalyst — sempre wRegular hRegular.
iPhone: todos os tamanhos
No iPhone, o Size Class é estável para a maioria dos modelos, mas há nuances. iPhone Plus (6+, 7+, 8+) e Max (X, XS, 11 Pro, 13–16 Pro Max) em paisagem têm wRegular hCompact — como iPad mini. Isso permite colocar conteúdo em duas colunas em iPhones grandes em paisagem. iPhone SE (1ª–3ª geração) em paisagem — wCompact hCompact. Size Class vertical em todos os iPhones em retrato é Regular, exceto iPhone SE em paisagem onde é Compact. O horizontal é sempre Compact para retrato e paisagem (exceto Plus/Max em paisagem).
iPad e Split View
iPad no modo tela cheia — wRegular hRegular, proporcionando máxima flexibilidade de layout. No Split View, o comportamento muda: se o aplicativo ocupa 1/3 da tela (Slide Over ou Split em 1/3), o Size Class horizontal se torna Compact, embora o vertical permaneça Regular. Em 2/3 de tela — wRegular hRegular. O desenvolvedor deve testar a interface em todos os modos de Split View, pois o Size Class muda dinamicamente. A Apple recomenda usar o Size Class junto com UISplitViewController para comportamento consistente no iPad.
Perguntas frequentes
Como o Size Class difere de um breakpoint no CSS?
Size Class é um sistema discreto com 4 combinações, enquanto os breakpoints CSS são contínuos com um número arbitrário de pontos. Size Class abstrai de tamanhos de tela específicos, agrupando dispositivos por comportamento. Os breakpoints CSS estão vinculados a pixels, Size Class — a categorias lógicas Compact/Regular.
Por que o iPhone Plus em paisagem tem Size Class Regular horizontal?
iPhone Plus/Max em paisagem tem largura de tela suficiente para exibir conteúdo em duas colunas (como iPad mini). A Apple atribui Regular horizontal para que o desenvolvedor possa usar layout multicoluna sem verificações adicionais. Esta é uma exceção à regra Compact para iPhone.
O Size Class pode ser alterado programaticamente?
Size Class é determinado pelo iOS com base nas características reais do dispositivo e não pode ser alterado a partir do código do aplicativo. O desenvolvedor só pode reagir ao valor atual. A UI do sistema pode sobrescrever o Size Class para elementos do sistema, mas no aplicativo isso é impossível.
Como o Size Class funciona com SwiftUI?
SwiftUI não usa Size Class diretamente — em vez disso, o desenvolvedor usa o modificador @Environment(\.horizontalSizeClass) para ler o valor atual. O SwiftUI oferece ferramentas de alto nível: Size Classes e AnyLayout com o protocolo Layout para layout adaptativo.
O Size Class é atualizado ao conectar um monitor externo?
Sim, ao conectar um display externo via Stage Manager ou Sidecar, o iOS atualiza o Size Class. O monitor externo geralmente obtém wRegular hRegular, enquanto a tela principal mantém seu Size Class. traitCollectionDidChange é chamado para janelas em cada tela independentemente.
Resumo
- Size Class é um sistema de classificação de tela do iOS com dois valores Compact/Regular por eixo, totalizando 4 combinações.
- iPhone em retrato — wCompact hRegular. iPad no modo tela cheia — wRegular hRegular. iPhone Plus/Max em paisagem — wRegular hCompact.
- Interface Builder fornece Vary for Traits para configuração visual de constraints e visibilidade para cada Size Class.
- UITraitCollection é uma API programática para ler Size Class via horizontalSizeClass e verticalSizeClass. As mudanças são rastreadas em traitCollectionDidChange.
- Split View no iPad muda dinamicamente o Size Class: em 1/3 de tela o horizontal se torna Compact, exigindo adaptação do layout.
- SwiftUI fornece @Environment(\.horizontalSizeClass) para ler Size Class e AnyLayout para alternar entre layouts em tempo de execução.
- Recomenda-se começar com layout para wAny hAny, depois adaptar para wCompact hRegular (iPhone) e wRegular hRegular (iPad), sem sobrecarregar as combinações restantes.
Vamos desenvolver um aplicativo móvel chave na mão
A IT Sectr cria aplicativos para iOS e Android para startups e empresas desde 2017. Nós vamos aconselhá-lo e propor a melhor solução.
Leia também