Size Class: co to jest, klasy rozmiaru Compact i Regular w iOS
Size Class — to mechanizm iOS dla adaptacyjnego layoutu, który dzieli wszystkie urządzenia na dwie kategorie według każdej osi: Compact (wąski/krótki) i Regular (szeroki/długi). Kombinacje tych wartości określają, jak interfejs wyświetla się na iPhone, iPad, Mac Catalyst i CarPlay. Według Apple Human Interface Guidelines, 2024, Size Class pozwala budować jeden storyboard dla wszystkich urządzeń, używając Auto Layout i UITraitCollection. System działa na wszystkich urządzeniach iOS począwszy od iOS 8.
Najważniejsze
- Size Class — system klasyfikacji rozmiaru w iOS z dwiema wartościami na oś: Compact (ściśnięty) i Regular (pełnowymiarowy).
- Poziomy Size Class na iPhone w orientacji pionowej — Compact, na iPad — Regular. Pionowy — Regular na wszystkich iPhone oprócz SE.
- UITraitCollection — interfejs programistyczny do pobierania bieżącego Size Class i reagowania na zmiany trait collection w czasie wykonania.
- Interface Builder pozwala konfigurować constraints i widoczność elementów dla każdej kombinacji Size Class za pomocą narzędzia Vary for Traits.
- Adaptacyjny layout oparty na Size Class zastępuje osobne storyboard dla iPhone i iPad — jeden plik dostosowuje się do wszystkich urządzeń.
Czym jest Size Class?
Size Class — to abstrakcyjna klasyfikacja ekranu w iOS, wprowadzona przez Apple w iOS 8 w celu ujednolicenia adaptacyjnego layoutu. Zamiast sprawdzania konkretnego modelu urządzenia, Size Class określa dwie cechy: dostępną przestrzeń w poziomie i w pionie. Każda cecha przyjmuje jedną z dwóch wartości — Compact (ograniczona przestrzeń) lub Regular (wystarczająca przestrzeń). Kombinacja tych wartości tworzy trait collection, która jest przekazywana do wszystkich elementów interfejsu.
Historia i przeznaczenie
Przed pojawieniem się Size Class programiści tworzyli osobne storyboard dla iPhone i iPad lub używali sprawdzeń UI_USER_INTERFACE_IDIOM() w kodzie. Prowadziło to do duplikacji kodu, rozdęcia storyboard i trudności przy wsparciu nowych rozmiarów ekranów. Size Class rozwiązał problem, oferując uniwersalny system: programista konfiguruje interfejs dla 4 kombinacji Compact/Regular, a iOS automatycznie wybiera odpowiednią. Wraz z pojawieniem się Split View na iPad i różnych rozmiarów iPhone, system stał się niezbędny dla adaptacyjnego layoutu.
Jak działa Size Class
Size Class jest obliczany przez iOS na podstawie szerokości i wysokości bieżącego ekranu, z uwzględnieniem orientacji i trybu wielozadaniowego. Wartości nie są powiązane z konkretnymi pikselami — to kategoria logiczna. Na przykład iPhone 16 Pro w pionie ma poziomy Compact i pionowy Regular. Ten sam iPhone w poziomie — Compact na obu osiach. iPad w Split View z aplikacją na 1/3 ekranu otrzymuje poziomy Compact, chociaż w trybie pełnoekranowym — Regular. System automatycznie aktualizuje Size Class przy zmianie orientacji lub Split View.
Jakie są klasy rozmiaru
Size Class używa czterech kombinacji dwóch wartości na dwóch osiach. Każda kombinacja ma swoje zastosowanie w zależności od typu urządzenia i jego orientacji. Zrozumienie tych kombinacji to podstawa projektowania adaptacyjnego interfejsu dla iOS. System obejmuje wszystkie aktualne urządzenia Apple: iPhone, iPad, Mac Catalyst i CarPlay. Apple zaleca rozpoczęcie projektowania od kombinacji wAny hAny (podstawowy layout) i doprecyzowanie dla konkretnych kombinacji.
Cztery kombinacje Size Class
wCompact hRegular — pionowy iPhone (oprócz Plus/Max w niektórych przypadkach). wCompact hCompact — poziomy iPhone SE/6/7/8. wRegular hRegular — pełnoekranowy iPad w dowolnej orientacji, iPhone Plus/Max w poziomie. wRegular hCompact — iPad w poziomie z wąską zawartością. Każda kombinacja określa, które constraints i elementy są aktywne. Programista może ustawić wygląd dla każdej kombinacji osobno w Interface Builder.
Size Class dla Mac Catalyst
Na Mac Catalyst Size Class zawsze wRegular hRegular — pełnowymiarowy interfejs. Oznacza to, że wersja Mac aplikacji iPad otrzymuje maksymalną przestrzeń. Programista może użyć dodatkowych sprawdzeń przez UIScreen.traitCollection.userInterfaceIdiom do odróżnienia Mac od iPad. Size Class na Mac działa stabilnie, ale aplikacje Catalyst często wymagają dodatkowej adaptacji dla myszy i klawiatury, wykraczającej poza zakres Size Class.
Jak Size Class wpływa na adaptacyjny layout
Size Class określa, które Auto Layout-constraints są aktywne, które elementy interfejsu są widoczne i jak rozmieszczone są subview. Programista może ustawić różne constraints dla różnych Size Class, a iOS automatycznie przełącza je przy zmianie trait collection. Na przykład na iPad (wRegular hRegular) tabela ze szczegółami wyświetla się w Master-Detail, na iPhone (wCompact hRegular) — w Navigation Stack. To podstawowy scenariusz adaptacyjnego layoutu z Size Class.
Ustawianie i usuwanie constraints
W Interface Builder programista wybiera kombinację Size Class przez przycisk Vary for Traits i dodaje constraints, które mają działać tylko dla tej kombinacji. Constraints ustawione dla wAny hAny działają zawsze. Constraints ustawione dla konkretnej kombinacji aktywują się tylko przy dopasowaniu Size Class. Jeśli dla kombinacji nie ustawiono specjalnych constraints, używane są podstawowe. Przy zmianie Size Class iOS animuje przejście między zestawami constraints.
Ukrywanie i pokazywanie elementów
Flaga Installed w Interface Builder pozwala ukrywać elementy dla określonych Size Class. Programista oznacza element jako Uninstalled dla wybranej kombinacji. Na przykład przycisk Details jest widoczny tylko na iPad (wRegular hRegular), a na iPhone — ukryty. To prostsze niż zarządzanie isHidden w kodzie. Do programowego ukrywania używa się nadpisania traitCollectionDidChange lub metody willTransition, gdzie sprawdzany jest bieżący Size Class.
Używanie Size Class w Interface Builder
Interface Builder udostępnia wizualne narzędzie Vary for Traits do pracy z Size Class. Programista wybiera potrzebną kombinację (szerokość i wysokość), a Interface Builder pokazuje podgląd ekranu dla tej kombinacji. Wszystkie zmiany constraints, rozmiarów, czcionek i widoczności dokonane w tym trybie stosują się tylko do wybranego Size Class. Wyjście z trybu zatwierdza ustawienia. To podejście zastępuje konieczność pisania kodu adaptacji dla różnych urządzeń.
Praca krok po kroku w Interface Builder
Do konfiguracji Size Class w Interface Builder programista otwiera storyboard, wybiera view controller i naciska przycisk Vary for Traits w dolnym panelu. Następnie wybiera Width (Compact, Regular lub Any) i Height (Compact, Regular lub Any). Interfejs przełącza się w tryb edycji dla wybranej kombinacji. Wszystkie zmiany constraints, dodawanie lub usuwanie elementów stosują się tylko do tej kombinacji. Po zakończeniu konfiguracji programista wychodzi z trybu — zmiany zostają zapisane dla konkretnej kombinacji Size Class.
Najlepsze praktyki
Apple zaleca rozpoczynanie od podstawowego layoutu dla wAny hAny (podstawowa kombinacja obejmująca wszystkie urządzenia). Następnie doprecyzowanie layoutu dla problematycznych kombinacji: wCompact hRegular (pionowy iPhone) i wRegular hRegular (iPad). Nie zaleca się konfigurowania każdej kombinacji — tylko tych, gdzie layout się psuje. Nadmierna konfiguracja utrudnia utrzymanie. Do precyzyjnej konfiguracji czcionek używaj Dynamic Type zamiast Size Class: czcionki dostosowują się automatycznie do rozmiaru ekranu.
Size Class w kodzie: UITraitCollection
UITraitCollection — to klasa iOS, która zawiera bieżący Size Class i inne cechy środowiska (force touch, display scale, user interface idiom). Każdy UIView i UIViewController ma swój traitCollection, dziedziczony od rodzica. Programista uzyskuje Size Class przez traitCollection.horizontalSizeClass i traitCollection.verticalSizeClass, które zwracają UIUserInterfaceSizeClass (.compact, .regular lub .unspecified). Zmiana Size Class jest śledzona przez nadpisanie traitCollectionDidChange.
Przykład: przełączanie layoutu w kodzie
Rozważmy przykład adaptacji UICollectionView layout pod Size Class. Na iPad (wRegular hRegular) używamy UICollectionViewCompositionalLayout z dwiema kolumnami, na iPhone (wCompact hRegular) — z jedną. Kod sprawdza poziomy Size Class i wybiera odpowiedni layout. Przy obrocie lub przejściu do Split View iOS wywołuje traitCollectionDidChange, a kontroler przełącza layout z animacją.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Reagowanie na zmiany trait collection
Metoda traitCollectionDidChange jest wywoływana przy każdej zmianie Size Class: obrót urządzenia, wejście/wyjście z Split View, podłączenie zewnętrznego wyświetlacza. W tej metodzie programista aktualizuje layout, przeładowuje kolekcje, aktualizuje constraint priorities lub zmienia widoczność elementów. Ważne jest sprawdzenie, czy zmienił się właśnie Size Class, a nie inna cecha: porównaj traitCollection.horizontalSizeClass z previousTraitCollection?.horizontalSizeClass. Optymalizacja zapobiega niepotrzebnym przerysowaniom przy zmianie force touch lub display scale.
Cechy Size Class na różnych urządzeniach
Różne urządzenia Apple mają różne kombinacje Size Class i programista musi uwzględniać te cechy. iPhone w pionie — wCompact hRegular, w poziomie — model zależy od modelu: iPhone SE/6/7/8 (wCompact hCompact), iPhone X i nowsze (wCompact hCompact lub wCompact hRegular w zależności od zawartości). iPad w trybie pełnoekranowym — wRegular hRegular, w Split View — może być wCompact hRegular (1/3 ekranu) lub wRegular hRegular (2/3 ekranu). Mac Catalyst — zawsze wRegular hRegular.
iPhone: wszystkie rozmiary
Na iPhone Size Class jest stabilny dla większości modeli, ale są niuanse. iPhone Plus (6+, 7+, 8+) i Max (X, XS, 11 Pro, 13–16 Pro Max) w poziomie mają wRegular hCompact — jak iPad mini. Pozwala to umieszczać zawartość w dwóch kolumnach na dużych iPhone w poziomie. iPhone SE (1–3 generacji) w poziomie — wCompact hCompact. Pionowy Size Class na wszystkich iPhone w pionie — Regular, oprócz iPhone SE w poziomie, gdzie jest Compact. Poziomy — zawsze Compact dla pionu i poziomu (oprócz Plus/Max w poziomie).
iPad i Split View
iPad w trybie pełnoekranowym — wRegular hRegular, co daje maksymalną elastyczność layoutu. W Split View zachowanie się zmienia: jeśli aplikacja zajmuje 1/3 ekranu (Slide Over lub Split przy 1/3), poziomy Size Class staje się Compact, chociaż pionowy pozostaje Regular. Przy 2/3 ekranu — wRegular hRegular. Programista powinien testować interfejs we wszystkich trybach Split View, ponieważ Size Class zmienia się dynamicznie. Apple zaleca używanie Size Class razem z UISplitViewController dla spójnego zachowania na iPad.
Często zadawane pytania
Czym różni się Size Class od punktu granicznego (breakpoint) w CSS?
Size Class — system dyskretny z 4 kombinacjami, podczas gdy CSS-breakpointy są ciągłe z dowolną liczbą punktów. Size Class abstrahuje od konkretnych rozmiarów ekranu, grupując urządzenia według zachowania. CSS-breakpointy są powiązane z pikselami, Size Class — z kategoriami logicznymi Compact/Regular.
Dlaczego na iPhone Plus w poziomie Size Class jest Regular w poziomie?
iPhone Plus/Max w poziomie ma szerokość ekranu wystarczającą do wyświetlania zawartości w dwóch kolumnach (jak na iPad mini). Apple przypisuje poziomy Regular, aby programista mógł używać multi-column layout bez dodatkowych sprawdzeń. To wyjątek od reguły Compact dla iPhone.
Czy można zmienić Size Class programowo?
Size Class jest określany przez iOS na podstawie rzeczywistych cech urządzenia i nie może być zmieniony z kodu aplikacji. Programista może tylko reagować na bieżącą wartość. System UI może nadpisać Size Class dla elementów systemowych, ale w aplikacji jest to niemożliwe.
Jak Size Class działa z SwiftUI?
SwiftUI nie używa Size Class bezpośrednio — zamiast tego programista stosuje modyfikatory @Environment(\.horizontalSizeClass) do odczytu bieżącej wartości. SwiftUI oferuje bardziej zaawansowane narzędzia: Size Classes i AnyLayout z Layout protocol dla adaptacyjnego layoutu.
Czy Size Class aktualizuje się przy podłączeniu zewnętrznego monitora?
Tak, przy podłączeniu zewnętrznego wyświetlacza przez Stage Manager lub Sidecar iOS aktualizuje Size Class. Zewnętrzny monitor zazwyczaj otrzymuje wRegular hRegular, a główny ekran zachowuje swój Size Class. traitCollectionDidChange jest wywoływane dla okien na każdym ekranie niezależnie.
Podsumowanie
- Size Class — system klasyfikacji ekranu iOS z dwiema wartościami Compact/Regular na każdą oś, łącznie 4 kombinacje.
- iPhone w pionie — wCompact hRegular. iPad w trybie pełnoekranowym — wRegular hRegular. iPhone Plus/Max w poziomie — wRegular hCompact.
- Interface Builder udostępnia Vary for Traits do wizualnej konfiguracji constraints i widoczności dla każdego Size Class.
- UITraitCollection — programowe API do odczytu Size Class przez horizontalSizeClass i verticalSizeClass. Zmiany są śledzone w traitCollectionDidChange.
- Split View na iPad dynamicznie zmienia Size Class: przy 1/3 ekranu poziomy staje się Compact, co wymaga adaptacji layoutu.
- SwiftUI udostępnia @Environment(\.horizontalSizeClass) do odczytu Size Class i AnyLayout do przełączania między layoutami w czasie wykonania.
- Zaleca się rozpoczęcie od layoutu dla wAny hAny, następnie adaptacja dla wCompact hRegular (iPhone) i wRegular hRegular (iPad), bez przeciążania pozostałych kombinacji.
Opracujemy aplikację mobilną pod klucz
IT Sectr tworzy aplikacje na iOS i Androida dla startupów i firm od 2017 roku. Doradzimy Ci i zaproponujemy najlepsze rozwiązanie.
Przeczytaj również