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 система стала незамінною для адаптивного верстання.
Як працює 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, а не інша характеристика: порівняйте 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 року. Ми проконсультуємо вас і запропонуємо найкраще рішення.
Читайте також