Size Class: что это, классы размера Compact и Regular в iOS
Size Class — это механизм iOS для адаптивной вёрстки, который разделяет все устройства на две категории по каждой оси: Compact (узкий/короткий) и Regular (широкий/длинный). Комбинации этих значений определяют, как интерфейс отображается на iPhone, iPad, Mac Catalyst и CarPlay. По данным Apple Human Interface Guidelines, 2024, Size Class позволяет строить один storyboard для всех устройств, используя Auto Layout и UITraitCollection. Система работает на всех iOS-устройствах начиная с iOS 8.
Главное
- Size Class — система классификации размера в iOS с двумя значениями на ось: Compact (сжатый) и Regular (полноразмерный).
- Горизонтальный Size Class на iPhone в портретной ориентации — Compact, на iPad — Regular. Вертикальный — Regular на всех iPhone кроме SE.
- UITraitCollection — программный интерфейс для получения текущего Size Class и реагирования на изменения трагио-коллекции в рантайме.
- Interface Builder позволяет настраивать констрейнты и видимость элементов для каждой комбинации Size Class с инструментом Vary for Traits.
- Адаптивная вёрстка на Size Class заменяет отдельные storyboard для iPhone и iPad — один файл адаптируется под все устройства.
Что такое Size Class?
Size Class — это абстрактная классификация экрана в iOS, введённая Apple в iOS 8 для унификации адаптивной вёрстки. Вместо проверки конкретной модели устройства Size Class определяет две характеристики: доступное пространство по горизонтали и по вертикали. Каждая характеристика принимает одно из двух значений — Compact (ограниченное пространство) или Regular (достаточное пространство). Комбинация этих значений образует трагио-коллекцию (trait collection), которая передаётся всем элементам интерфейса.
История и назначение
До появления Size Class разработчики создавали отдельные storyboard для iPhone и iPad или использовали проверки UI_USER_INTERFACE_IDIOM() в коде. Это приводило к дублированию кода, раздуванию storyboard и сложностям при поддержке новых размеров экранов. Size Class решил проблему, предложив универсальную систему: разработчик настраивает интерфейс для 4 комбинаций Compact/Regular, и iOS автоматически выбирает нужную. С появлением Split View на iPad и разных размеров iPhone система стала indispensable для адаптивной вёрстки.
Как работает Size Class
Size Class вычисляется iOS на основе ширины и высоты текущего экрана с учётом ориентации и мультизадачности. Значения не привязаны к конкретным пикселям — это логическая категория. Например, iPhone 16 Pro в портрете имеет горизонтальный Compact и вертикальный Regular. Тот же iPhone в ландшафте — Compact по обеим осям. iPad в Split View с приложением на 1/3 экрана получает горизонтальный Compact, хотя на полноэкранном режиме — Regular. Система автоматически обновляет Size Class при изменении ориентации или Split View.
Какие бывают классы размера
Size Class использует четыре комбинации двух значений на двух осях. Каждая комбинация имеет своё применение в зависимости от типа устройства и его ориентации. Понимание этих комбинаций — основа проектирования адаптивного интерфейса для iOS. Система покрывает все актуальные устройства Apple: iPhone, iPad, Mac Catalyst и CarPlay. Apple рекомендует начинать проектирование с комбинации wAny hAny (базовый layout) и уточнять для конкретных комбинаций.
Четыре комбинации Size Class
wCompact hRegular — портретный iPhone (кроме Plus/Max в некоторых случаях). wCompact hCompact — ландшафтный iPhone SE/6/7/8. wRegular hRegular — полноэкранный iPad в любой ориентации, iPhone Plus/Max в ландшафте. wRegular hCompact — iPad в ландшафте с узким контентом. Каждая комбинация определяет, какие констрейнты и элементы активны. Разработчик может задать внешний вид для каждой комбинации отдельно в Interface Builder.
Size Class для Mac Catalyst
На Mac Catalyst Size Class всегда wRegular hRegular — полноразмерный интерфейс. Это означает, что Mac-версия iPad-приложения получает максимальное пространство. Разработчик может использовать дополнительные проверки через UIScreen.traitCollection.userInterfaceIdiom для отличия Mac от iPad. Size Class на Mac работает стабильно, но Catalyst-приложения часто требуют дополнительной адаптации для мыши и клавиатуры, выходящей за рамки Size Class.
Как Size Class влияет на адаптивную вёрстку
Size Class определяет, какие Auto Layout-констрейнты активны, какие элементы интерфейса видимы и как расположены subview. Разработчик может задать разные констрейнты для разных Size Class, и iOS автоматически переключает их при изменении трагио-коллекции. Например, на iPad (wRegular hRegular) таблица с детализацией отображается в Master-Detail, на iPhone (wCompact hRegular) — в Navigation Stack. Это основной сценарий адаптивной вёрстки с Size Class.
Установка и удаление констрейнтов
В Interface Builder разработчик выбирает комбинацию Size Class через кнопку Vary for Traits и добавляет констрейнты, которые должны действовать только для этой комбинации. Констрейнты, установленные для wAny hAny, действуют всегда. Констрейнты, установленные для конкретной комбинации, активируются только при совпадении Size Class. Если для комбинации не заданы специальные констрейнты, используются базовые. При изменении Size Class iOS анимирует переход между наборами констрейнтов.
Скрытие и показ элементов
Installed флаг в Interface Builder позволяет скрывать элементы для определённых Size Class. Разработчик отмечает элемент как Uninstalled для выбранной комбинации. Например, кнопка Details видна только на iPad (wRegular hRegular), а на iPhone — скрыта. Это проще, чем управлять isHidden в коде. Для программного скрытия используется переопределение traitCollectionDidChange или метод willTransition, где проверяется текущий Size Class.
Использование Size Class в Interface Builder
Interface Builder предоставляет визуальный инструмент Vary for Traits для работы с Size Class. Разработчик выбирает нужную комбинацию (ширина и высота), и Interface Builder показывает превью экрана для этой комбинации. Все изменения констрейнтов, размеров, шрифтов и видимости, сделанные в этом режиме, применяются только к выбранному Size Class. Выход из режима фиксирует настройки. Этот подход заменяет необходимость писать код адаптации для разных устройств.
Пошаговая работа в Interface Builder
Для настройки Size Class в Interface Builder разработчик открывает storyboard, выбирает вью-контроллер и нажимает кнопку Vary for Traits в нижней панели. Затем выбирает Width (Compact, Regular или Any) и Height (Compact, Regular или Any). Интерфейс переключается в режим редактирования для выбранной комбинации. Все изменения констрейнтов, добавление или удаление элементов применяются только к этой комбинации. После завершения настройки разработчик выходит из режима — изменения сохраняются для конкретной комбинации Size Class.
Лучшие практики
Apple рекомендует начинать с базового layout для wAny hAny (базовая комбинация, покрывающая все устройства). Затем уточнять layout для проблемных комбинаций: wCompact hRegular (портретный iPhone) и wRegular hRegular (iPad). Не рекомендуется настраивать каждую комбинацию — только те, где layout ломается. Избыточная настройка усложняет поддержку. Для точной настройки шрифтов используйте Dynamic Type вместо Size Class: шрифты адаптируются автоматически к размеру экрана.
Size Class в коде: UITraitCollection
UITraitCollection — это класс iOS, который содержит текущий Size Class и другие характеристики окружения (force touch, display scale, user interface idiom). Каждый UIView и UIViewController имеет свой traitCollection, наследующийся от родителя. Разработчик получает Size Class через traitCollection.horizontalSizeClass и traitCollection.verticalSizeClass, которые возвращают UIUserInterfaceSizeClass (.compact, .regular или .unspecified). Изменение Size Class отслеживается через переопределение traitCollectionDidChange.
Пример: переключение layout в коде
Рассмотрим пример адаптации UICollectionView layout под Size Class. На iPad (wRegular hRegular) используем UICollectionViewCompositionalLayout с двумя колонками, на iPhone (wCompact hRegular) — с одной. Код проверяет горизонтальный Size Class и выбирает соответствующий layout. При повороте или переходе в Split View iOS вызывает traitCollectionDidChange, и контроллер переключает layout с анимацией.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Реагирование на изменения трагио-коллекции
Метод traitCollectionDidChange вызывается при любом изменении Size Class: поворот устройства, вход/выход из Split View, подключение внешнего дисплея. В этом методе разработчик обновляет layout, перезагружает коллекции, обновляет constraint priorities или меняет видимость элементов. Важно проверять, изменился ли именно Size Class, а не другая характеристика: compare traitCollection.horizontalSizeClass с previousTraitCollection?.horizontalSizeClass. Оптимизация предотвращает лишние перерисовки при изменении force touch или display scale.
Особенности Size Class на разных устройствах
Разные устройства Apple имеют разные комбинации Size Class, и разработчик должен учитывать эти особенности. iPhone в портрете — wCompact hRegular, в ландшафте — модель зависит от модели: iPhone SE/6/7/8 (wCompact hCompact), iPhone X и новее (wCompact hCompact или wCompact hRegular в зависимости от контента). iPad в полноэкранном режиме — wRegular hRegular, в Split View — может быть wCompact hRegular (1/3 экрана) или wRegular hRegular (2/3 экрана). Mac Catalyst — всегда wRegular hRegular.
iPhone: все размеры
На iPhone Size Class стабилен для большинства моделей, но есть нюансы. iPhone Plus (6+, 7+, 8+) и Max (X, XS, 11 Pro, 13–16 Pro Max) в ландшафте имеют wRegular hCompact — как iPad mini. Это позволяет размещать контент в две колонки на больших iPhone в ландшафте. iPhone SE (1–3 поколения) в ландшафте — wCompact hCompact. Вертикальный Size Class на всех iPhone в портрете — Regular, кроме iPhone SE в ландшафте, где он Compact. Горизонтальный — всегда Compact для портрета и ландшафта (кроме Plus/Max в ландшафте).
iPad и Split View
iPad в полноэкранном режиме — wRegular hRegular, что даёт максимальную гибкость layout. В Split View поведение меняется: если приложение занимает 1/3 экрана (Slide Over или Split при 1/3), горизонтальный Size Class становится Compact, хотя вертикальный остаётся Regular. При 2/3 экрана — wRegular hRegular. Разработчик должен тестировать интерфейс во всех режимах Split View, так как Size Class меняется динамически. Apple рекомендует использовать Size Class совместно с UISplitViewController для консистентного поведения на iPad.
Часто задаваемые вопросы
Чем Size Class отличается от точки останова (breakpoint) в CSS?
Size Class — дискретная система с 4 комбинациями, а CSS-брейкпоинты — непрерывная с произвольным количеством точек. Size Class абстрагируется от конкретных размеров экрана, группируя устройства по поведению. CSS-брейкпоинты привязаны к пикселям, Size Class — к логическим категориям Compact/Regular.
Почему на iPhone Plus в ландшафте Size Class Regular по горизонтали?
iPhone Plus/Max в ландшафте имеет ширину экрана, достаточную для отображения контента в две колонки (как на iPad mini). Apple присваивает горизонтальный Regular, чтобы разработчик мог использовать multi-column layout без дополнительных проверок. Это исключение из правила Compact для iPhone.
Можно ли изменить Size Class программно?
Size Class определяется iOS на основе реальных характеристик устройства и не может быть изменён из кода приложения. Разработчик может только реагировать на текущее значение. System UI может переопределить Size Class для системных элементов, но в приложении это невозможно.
Как Size Class работает с SwiftUI?
SwiftUI не использует Size Class напрямую — вместо этого разработчик применяет модификаторы @Environment(\.horizontalSizeClass) для чтения текущего значения. SwiftUI предлагает более высокоуровневые инструменты: Size Classes и AnyLayout с Layout protocol для адаптивной вёрстки.
Обновляется ли Size Class при подключении внешнего монитора?
Да, при подключении внешнего дисплея через Stage Manager или Sidecar iOS обновляет Size Class. Внешний монитор обычно получает wRegular hRegular, а основной экран сохраняет свой Size Class. traitCollectionDidChange вызывается для окон на каждом экране независимо.
Итоги
- Size Class — система классификации экрана iOS с двумя значениями Compact/Regular на каждую ось, всего 4 комбинации.
- iPhone в портрете — wCompact hRegular. iPad в полноэкранном режиме — wRegular hRegular. iPhone Plus/Max в ландшафте — wRegular hCompact.
- Interface Builder предоставляет Vary for Traits для визуальной настройки констрейнтов и видимости под каждый Size Class.
- UITraitCollection — программный API для чтения Size Class через horizontalSizeClass и verticalSizeClass. Изменения отслеживаются в traitCollectionDidChange.
- Split View на iPad динамически меняет Size Class: при 1/3 экрана горизонтальный становится Compact, что требует адаптации layout.
- SwiftUI предоставляет @Environment(\.horizontalSizeClass) для чтения Size Class и AnyLayout для переключения между layout в рантайме.
- Рекомендуется начинать с layout для wAny hAny, затем адаптировать для wCompact hRegular (iPhone) и wRegular hRegular (iPad), не перегружая остальные комбинации.
Мы разработаем мобильное приложение под ключ
IT Sectr создаёт приложения для iOS и Android для стартапов и бизнеса с 2017 года. Мы проконсультируем вас и предложим наилучшее решение.
Читайте также