Size Class: co to je, třídy velikosti Compact a Regular v iOS
Size Class — je mechanismus iOS pro adaptivní rozvržení, který rozděluje všechna zařízení do dvou kategorií podle každé osy: Compact (úzký/krátký) a Regular (široký/dlouhý). Kombinace těchto hodnot určují, jak se rozhraní zobrazuje na iPhone, iPad, Mac Catalyst a CarPlay. Podle Apple Human Interface Guidelines, 2024 umožňuje Size Class vytvoření jednoho storyboardu pro všechna zařízení pomocí Auto Layout a UITraitCollection. Systém funguje na všech zařízeních iOS od iOS 8.
Hlavní body
- Size Class — systém klasifikace velikosti v iOS se dvěma hodnotami na osu: Compact (stlačený) a Regular (plná velikost).
- Horizontální Size Class na iPhone v portrétní orientaci — Compact, na iPad — Regular. Vertikální — Regular na všech iPhone kromě SE.
- UITraitCollection — programové rozhraní pro získání aktuálního Size Class a reakci na změny trait collection za běhu.
- Interface Builder umožňuje konfigurovat omezení a viditelnost prvků pro každou kombinaci Size Class pomocí nástroje Vary for Traits.
- Adaptivní rozvržení založené na Size Class nahrazuje samostatná storyboardy pro iPhone a iPad — jeden soubor se přizpůsobí všem zařízením.
Co je Size Class?
Size Class — je abstraktní klasifikace obrazovky v iOS, zavedená společností Apple v iOS 8 pro sjednocení adaptivního rozvržení. Místo kontroly konkrétního modelu zařízení určuje Size Class dvě charakteristiky: dostupný prostor horizontálně a vertikálně. Každá charakteristika nabývá jedné ze dvou hodnot — Compact (omezený prostor) nebo Regular (dostatečný prostor). Kombinace těchto hodnot tvoří trait collection, která je předávána všem prvkům rozhraní.
Historie a účel
Před příchodem Size Class vytvářeli vývojáři samostatné storyboardy pro iPhone a iPad nebo používali kontroly UI_USER_INTERFACE_IDIOM() v kódu. To vedlo k duplicitě kódu, nafouknutí storyboardů a potížím s podporou nových velikostí obrazovek. Size Class vyřešil problém nabídkou univerzálního systému: vývojář nakonfiguruje rozhraní pro 4 kombinace Compact/Regular a iOS automaticky vybere tu správnou. S příchodem Split View na iPadu a různých velikostí iPhone se systém stal nepostradatelným pro adaptivní rozvržení.
Jak Size Class funguje
Size Class je vypočítáván iOS na základě šířky a výšky aktuální obrazovky s ohledem na orientaci a multitasking. Hodnoty nejsou vázány na konkrétní pixely — jde o logickou kategorii. Například iPhone 16 Pro v portrétu má horizontální Compact a vertikální Regular. Stejný iPhone v krajině — Compact na obou osách. iPad v Split View s aplikací na 1/3 obrazovky získává horizontální Compact, i když v režimu celé obrazovky — Regular. Systém automaticky aktualizuje Size Class při změně orientace nebo Split View.
Jaké třídy velikosti existují
Size Class používá čtyři kombinace dvou hodnot na dvou osách. Každá kombinace má své uplatnění v závislosti na typu zařízení a jeho orientaci. Pochopení těchto kombinací je základem navrhování adaptivního rozhraní pro iOS. Systém pokrývá všechna aktuální zařízení Apple: iPhone, iPad, Mac Catalyst a CarPlay. Apple doporučuje začít navrhování s kombinací wAny hAny (základní rozvržení) a upřesnit pro konkrétní kombinace.
Čtyři kombinace Size Class
wCompact hRegular — portrétní iPhone (kromě Plus/Max v některých případech). wCompact hCompact — krajinný iPhone SE/6/7/8. wRegular hRegular — iPad na celou obrazovku v libovolné orientaci, iPhone Plus/Max v krajině. wRegular hCompact — iPad v krajině s úzkým obsahem. Každá kombinace určuje, která omezení a prvky jsou aktivní. Vývojář může nastavit vzhled pro každou kombinaci zvlášť v Interface Builder.
Size Class pro Mac Catalyst
Na Mac Catalyst je Size Class vždy wRegular hRegular — rozhraní plné velikosti. To znamená, že Mac verze aplikace pro iPad získává maximální prostor. Vývojář může použít dodatečné kontroly přes UIScreen.traitCollection.userInterfaceIdiom k rozlišení Mac od iPad. Size Class na Macu funguje stabilně, ale aplikace Catalyst často vyžadují další přizpůsobení pro myš a klávesnici, přesahující rámec Size Class.
Jak Size Class ovlivňuje adaptivní rozvržení
Size Class určuje, která Auto Layout omezení jsou aktivní, které prvky rozhraní jsou viditelné a jak jsou uspořádány subview. Vývojář může nastavit různá omezení pro různé Size Class a iOS je automaticky přepíná při změně trait collection. Například na iPad (wRegular hRegular) se tabulka s detaily zobrazuje v Master-Detail, na iPhone (wCompact hRegular) — v Navigation Stack. Toto je hlavní scénář adaptivního rozvržení s Size Class.
Nastavení a odstranění omezení
V Interface Builder vývojář vybere kombinaci Size Class pomocí tlačítka Vary for Traits a přidá omezení, která mají fungovat pouze pro tuto kombinaci. Omezení nastavená pro wAny hAny fungují vždy. Omezení nastavená pro konkrétní kombinaci se aktivují pouze při shodě Size Class. Pokud pro kombinaci nejsou nastavena žádná speciální omezení, použijí se základní. Při změně Size Class iOS animuje přechod mezi sadami omezení.
Skrytí a zobrazení prvků
Příznak Installed v Interface Builder umožňuje skrýt prvky pro určité Size Class. Vývojář označí prvek jako Uninstalled pro vybranou kombinaci. Například tlačítko Details je viditelné pouze na iPad (wRegular hRegular) a na iPhone — skryté. To je jednodušší než správa isHidden v kódu. Pro programové skrytí se používá přepsání traitCollectionDidChange nebo metoda willTransition, kde se kontroluje aktuální Size Class.
Použití Size Class v Interface Builder
Interface Builder poskytuje vizuální nástroj Vary for Traits pro práci s Size Class. Vývojář vybere požadovanou kombinaci (šířku a výšku) a Interface Builder zobrazí náhled obrazovky pro tuto kombinaci. Všechny změny omezení, velikostí, písem a viditelnosti provedené v tomto režimu se aplikují pouze na vybraný Size Class. Opuštění režimu potvrzuje nastavení. Tento přístup nahrazuje potřebu psát kód přizpůsobení pro různá zařízení.
Práce krok za krokem v Interface Builder
Pro konfiguraci Size Class v Interface Builder vývojář otevře storyboard, vybere view controller a stiskne tlačítko Vary for Traits v dolním panelu. Poté vybere Width (Compact, Regular nebo Any) a Height (Compact, Regular nebo Any). Rozhraní se přepne do režimu úprav pro vybranou kombinaci. Všechny změny omezení, přidání nebo odstranění prvků se aplikují pouze na tuto kombinaci. Po dokončení konfigurace vývojář opustí režim — změny se uloží pro konkrétní kombinaci Size Class.
Nejlepší postupy
Apple doporučuje začít se základním rozvržením pro wAny hAny (základní kombinace pokrývající všechna zařízení). Poté upřesnit rozvržení pro problematické kombinace: wCompact hRegular (portrétní iPhone) a wRegular hRegular (iPad). Nedoporučuje se konfigurovat každou kombinaci — pouze tam, kde se rozvržení láme. Nadměrná konfigurace ztěžuje údržbu. Pro přesné nastavení písem použijte Dynamic Type místo Size Class: písma se automaticky přizpůsobí velikosti obrazovky.
Size Class v kódu: UITraitCollection
UITraitCollection — je třída iOS, která obsahuje aktuální Size Class a další charakteristiky prostředí (force touch, display scale, user interface idiom). Každý UIView a UIViewController má svůj traitCollection, zděděný od rodiče. Vývojář získává Size Class přes traitCollection.horizontalSizeClass a traitCollection.verticalSizeClass, které vracejí UIUserInterfaceSizeClass (.compact, .regular nebo .unspecified). Změna Size Class je sledována přepsáním traitCollectionDidChange.
Příklad: přepnutí rozvržení v kódu
Zvažte příklad přizpůsobení rozvržení UICollectionView pro Size Class. Na iPad (wRegular hRegular) používáme UICollectionViewCompositionalLayout se dvěma sloupci, na iPhone (wCompact hRegular) — s jedním. Kód zkontroluje horizontální Size Class a vybere odpovídající rozvržení. Při otočení nebo přechodu do Split View iOS zavolá traitCollectionDidChange a kontroler přepne rozvržení s animací.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Reakce na změny trait collection
Metoda traitCollectionDidChange je volána při každé změně Size Class: otočení zařízení, vstup/výstup ze Split View, připojení externího displeje. V této metodě vývojář aktualizuje rozvržení, znovu načte kolekce, aktualizuje priority omezení nebo mění viditelnost prvků. Je důležité zkontrolovat, zda se změnil právě Size Class, nikoli jiná charakteristika: porovnejte traitCollection.horizontalSizeClass s previousTraitCollection?.horizontalSizeClass. Optimalizace zabraňuje zbytečným překreslením při změně force touch nebo display scale.
Vlastnosti Size Class na různých zařízeních
Různá zařízení Apple mají různé kombinace Size Class a vývojář musí tyto vlastnosti zohlednit. iPhone v portrétu — wCompact hRegular, v krajině — závisí na modelu: iPhone SE/6/7/8 (wCompact hCompact), iPhone X a novější (wCompact hCompact nebo wCompact hRegular v závislosti na obsahu). iPad v režimu celé obrazovky — wRegular hRegular, v Split View — může být wCompact hRegular (1/3 obrazovky) nebo wRegular hRegular (2/3 obrazovky). Mac Catalyst — vždy wRegular hRegular.
iPhone: všechny velikosti
Na iPhone je Size Class stabilní pro většinu modelů, ale existují nuance. iPhone Plus (6+, 7+, 8+) a Max (X, XS, 11 Pro, 13–16 Pro Max) v krajině mají wRegular hCompact — jako iPad mini. To umožňuje umístit obsah do dvou sloupců na velkých iPhone v krajině. iPhone SE (1–3 generace) v krajině — wCompact hCompact. Vertikální Size Class na všech iPhone v portrétu — Regular, kromě iPhone SE v krajině, kde je Compact. Horizontální — vždy Compact pro portrét i krajinu (kromě Plus/Max v krajině).
iPad a Split View
iPad v režimu celé obrazovky — wRegular hRegular, což poskytuje maximální flexibilitu rozvržení. V Split View se chování mění: pokud aplikace zabírá 1/3 obrazovky (Slide Over nebo Split na 1/3), horizontální Size Class se stává Compact, i když vertikální zůstává Regular. Při 2/3 obrazovky — wRegular hRegular. Vývojář by měl testovat rozhraní ve všech režimech Split View, protože Size Class se dynamicky mění. Apple doporučuje používat Size Class společně s UISplitViewController pro konzistentní chování na iPad.
Často kladené otázky
Čím se Size Class liší od breakpointu v CSS?
Size Class — diskrétní systém se 4 kombinacemi, zatímco CSS-breakpointy jsou spojité s libovolným počtem bodů. Size Class abstrahuje od konkrétních velikostí obrazovky a seskupuje zařízení podle chování. CSS-breakpointy jsou vázány na pixely, Size Class — na logické kategorie Compact/Regular.
Proč je na iPhone Plus v krajině Size Class horizontálně Regular?
iPhone Plus/Max v krajině má dostatečnou šířku obrazovky pro zobrazení obsahu ve dvou sloupcích (jako na iPad mini). Apple přiřazuje horizontální Regular, aby vývojář mohl používat multi-column layout bez dalších kontrol. Toto je výjimka z pravidla Compact pro iPhone.
Lze Size Class změnit programově?
Size Class je určen iOS na základě skutečných charakteristik zařízení a nelze jej změnit z kódu aplikace. Vývojář může pouze reagovat na aktuální hodnotu. System UI může přepsat Size Class pro systémové prvky, ale v aplikaci to není možné.
Jak Size Class funguje s SwiftUI?
SwiftUI nepoužívá Size Class přímo — místo toho vývojář aplikuje modifikátory @Environment(\.horizontalSizeClass) pro čtení aktuální hodnoty. SwiftUI nabízí nástroje vyšší úrovně: Size Classes a AnyLayout s Layout protocol pro adaptivní rozvržení.
Aktualizuje se Size Class při připojení externího monitoru?
Ano, při připojení externího displeje přes Stage Manager nebo Sidecar iOS aktualizuje Size Class. Externí monitor obvykle získává wRegular hRegular, zatímco hlavní obrazovka si zachovává svůj Size Class. traitCollectionDidChange je volán pro okna na každé obrazovce nezávisle.
Shrnutí
- Size Class — systém klasifikace obrazovky iOS se dvěma hodnotami Compact/Regular na každé ose, celkem 4 kombinace.
- iPhone v portrétu — wCompact hRegular. iPad v režimu celé obrazovky — wRegular hRegular. iPhone Plus/Max v krajině — wRegular hCompact.
- Interface Builder poskytuje Vary for Traits pro vizuální konfiguraci omezení a viditelnosti pro každý Size Class.
- UITraitCollection — programové API pro čtení Size Class přes horizontalSizeClass a verticalSizeClass. Změny jsou sledovány v traitCollectionDidChange.
- Split View na iPad dynamicky mění Size Class: při 1/3 obrazovky se horizontální stává Compact, což vyžaduje přizpůsobení rozvržení.
- SwiftUI poskytuje @Environment(\.horizontalSizeClass) pro čtení Size Class a AnyLayout pro přepínání mezi rozvrženími za běhu.
- Doporučuje se začít s rozvržením pro wAny hAny, poté přizpůsobit pro wCompact hRegular (iPhone) a wRegular hRegular (iPad), bez přetěžování ostatních kombinací.
Vyvineme mobilní aplikaci na klíč
IT Sectr vytváří aplikace pro iOS a Android pro startupy a podniky od roku 2017. Poradíme vám a navrhneme nejlepší řešení.
Přečtěte si také