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-а и реаговање на промене trait collection-а у рантајму.
- Interface Builder омогућава подешавање constraint-а и видљивости елемената за сваку комбинацију 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 (основни изглед) и прецизирање за конкретне комбинације.
Четири комбинације Size Class-а
wCompact hRegular — портретни iPhone (осим Plus/Max у неким случајевима). wCompact hCompact — пејзажни iPhone SE/6/7/8. wRegular hRegular — iPad пуног екрана у било којој оријентацији, iPhone Plus/Max у пејзажу. wRegular hCompact — iPad у пејзажу са уским садржајем. Свака комбинација одређује који constraint-и и елементи су активни. Програмер може поставити изглед за сваку комбинацију посебно у 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 constraint-и су активни, који елементи интерфејса су видљиви и како су subview-и распоређени. Програмер може поставити различите constraint-е за различите Size Class-е, а iOS их аутоматски пребацује при промени trait collection-а. На пример, на iPad-у (wRegular hRegular) табела са детаљима приказује се у Master-Detail-у, на iPhone-у (wCompact hRegular) — у Navigation Stack-у. Ово је основни сценарио адаптивног изгледа са Size Class-ом.
Постављање и уклањање constraint-а
У Interface Builder-у, програмер бира комбинацију Size Class-а преко дугмета Vary for Traits и додаје constraint-е који треба да делују само за ову комбинацију. Constraint-и постављени за wAny hAny делују увек. Constraint-и постављени за конкретну комбинацију активирају се само при поклапању Size Class-а. Ако за комбинацију нису постављени посебни constraint-и, користе се основни. При промени Size Class-а, iOS анимира прелаз између скупова constraint-а.
Сакривање и приказивање елемената
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 приказује преглед екрана за ову комбинацију. Све промене constraint-а, величина, фонтова и видљивости направљене у овом режиму примењују се само на изабрани Size Class. Излазак из режима учвршћује подешавања. Овај приступ замењује потребу за писањем кода адаптације за различите уређаје.
Корак по корак рад у Interface Builder-у
За подешавање Size Class-а у Interface Builder-у, програмер отвара storyboard, бира view controller и притиска дугме Vary for Traits у доњем панелу. Затим бира Width (Compact, Regular или Any) и Height (Compact, Regular или Any). Интерфејс се пребацује у режим уређивања за изабрану комбинацију. Све промене constraint-а, додавање или уклањање елемената примењују се само на ову комбинацију. Након завршетка подешавања, програмер излази из режима — промене се чувају за конкретну комбинацију Size Class-а.
Најбоље праксе
Apple препоручује почетак са основним изгледом за wAny hAny (основна комбинација која покрива све уређаје). Затим прецизирање изгледа за проблематичне комбинације: wCompact hRegular (портретни iPhone) и wRegular hRegular (iPad). Не препоручује се подешавање сваке комбинације — само тамо где се изглед ломи. Прекомерно подешавање отежава одржавање. За прецизно подешавање фонтова користите 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.
Пример: пребацивање изгледа у коду
Размотримо пример адаптације UICollectionView изгледа под Size Class. На iPad-у (wRegular hRegular) користимо UICollectionViewCompositionalLayout са две колоне, на iPhone-у (wCompact hRegular) — са једном. Код проверава хоризонтални Size Class и бира одговарајући изглед. При ротацији или преласку у Split View, iOS позива traitCollectionDidChange, и контролер пребацује изглед са анимацијом.
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-а, повезивање спољног дисплеја. У овом методу, програмер ажурира изглед, поново учитава колекције, ажурира приоритете constraint-а или мења видљивост елемената. Важно је проверити да ли се променио баш 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, што даје максималну флексибилност изгледа. У 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 протоколом за адаптивни изглед.
Да ли се 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 за визуелно подешавање constraint-а и видљивости за сваки Size Class.
- UITraitCollection — програмски API за читање Size Class-а кроз horizontalSizeClass и verticalSizeClass. Промене се прате у traitCollectionDidChange.
- Split View на iPad-у динамички мења Size Class: при 1/3 екрана хоризонтални постаје Compact, што захтева адаптацију изгледа.
- SwiftUI пружа @Environment(\.horizontalSizeClass) за читање Size Class-а и AnyLayout за пребацивање између изгледа у рантајму.
- Препоручује се почетак са изгледом за wAny hAny, затим адаптација за wCompact hRegular (iPhone) и wRegular hRegular (iPad), без преоптерећивања осталих комбинација.
Развићемо мобилну апликацију под кључ
IT Sectr креира iOS и Android апликације за стартапе и предузећа од 2017. године. Саветоваћемо вас и предложити најбоље решење.
Прочитајте такође