Size Class: какво е това, класове размер Compact и Regular в iOS
Size Class — е механизъм в iOS за адаптивен layout, който разделя всички устройства на две категории по всяка ос: 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 и реагиране на промени в trait collection по време на изпълнение.
- Interface Builder позволява конфигуриране на constraints и видимост на елементи за всяка комбинация Size Class с инструмента Vary for Traits.
- Адаптивен layout базиран на Size Class заменя отделни storyboard-ове за iPhone и iPad — един файл се адаптира към всички устройства.
Какво е Size Class?
Size Class — е абстрактна класификация на екрана в iOS, въведена от Apple в iOS 8 за унифициране на адаптивния layout. Вместо да проверява конкретния модел устройство, 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, системата стана незаменима за адаптивния layout.
Как работи 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 в пейзаж с тясно съдържание. Всяка комбинация определя кои constraints и елементи са активни. Разработчикът може да зададе външен вид за всяка комбинация отделно в 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 влияе на адаптивния layout
Size Class определя кои Auto Layout constraints са активни, кои елементи на интерфейса са видими и как са подредени subview-тата. Разработчикът може да зададе различни constraints за различни Size Class-ове, а iOS автоматично ги превключва при промяна на trait collection. Например на iPad (wRegular hRegular) таблицата с детайли се показва в Master-Detail, на iPhone (wCompact hRegular) — в Navigation Stack. Това е основният сценарий за адаптивен layout с Size Class.
Задаване и премахване на constraints
В Interface Builder разработчикът избира комбинацията Size Class чрез бутона Vary for Traits и добавя constraints, които трябва да действат само за тази комбинация. Constraints, зададени за wAny hAny, действат винаги. Constraints, зададени за конкретна комбинация, се активират само при съвпадение на Size Class. Ако за комбинация не са зададени специални constraints, се използват основните. При промяна на Size Class iOS анимира прехода между наборите от constraints.
Скриване и показване на елементи
Флагът Installed в Interface Builder позволява скриване на елементи за определени Size Class-ове. Разработчикът маркира елемента като Uninstalled за избраната комбинация. Например бутонът Details е видим само на iPad (wRegular hRegular), а на iPhone — скрит. Това е по-просто от управлението на isHidden в код. За програмно скриване се използва override на traitCollectionDidChange или методът willTransition, където се проверява текущият Size Class.
Използване на Size Class в Interface Builder
Interface Builder предоставя визуалния инструмент Vary for Traits за работа с Size Class. Разработчикът избира необходимата комбинация (ширина и височина), а Interface Builder показва преглед на екрана за тази комбинация. Всички промени на constraints, размери, шрифтове и видимост, направени в този режим, се прилагат само към избрания Size Class. Излизането от режима фиксира настройките. Този подход заменя необходимостта от писане на код за адаптация за различни устройства.
Работа стъпка по стъпка в Interface Builder
За конфигуриране на Size Class в Interface Builder разработчикът отваря storyboard-а, избира view controller и натиска бутона Vary for Traits в долния панел. След това избира Width (Compact, Regular или Any) и Height (Compact, Regular или Any). Интерфейсът превключва в режим на редактиране за избраната комбинация. Всички промени на constraints, добавяне или премахване на елементи се прилагат само за тази комбинация. След завършване на конфигурацията разработчикът излиза от режима — промените се запазват за конкретната комбинация 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 се проследява чрез override на 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()
}
}Реагиране на промени в trait collection
Методът traitCollectionDidChange се извиква при всяка промяна на Size Class: завъртане на устройството, влизане/излизане от Split View, свързване на външен дисплей. В този метод разработчикът актуализира layout, презарежда колекции, актуализира приоритети на constraints или променя видимостта на елементи. Важно е да проверите дали точно 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-breakpoint-овете са непрекъснати с произволен брой точки. Size Class абстрахира от конкретните размери на екрана, групирайки устройствата по поведение. CSS-breakpoint-овете са обвързани с пиксели, 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 за адаптивен layout.
Обновява ли се 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 за визуално конфигуриране на constraints и видимост за всеки 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 г. Ще ви консултираме и ще предложим най-доброто решение.
Прочетете също