Size Class: ano ito, mga klase ng laki na Compact at Regular sa iOS
Size Class — ay isang mekanismo ng iOS para sa adaptive layout na naghahati sa lahat ng device sa dalawang kategorya sa bawat axis: Compact (makitid/maikli) at Regular (malapad/mahaba). Ang mga kumbinasyon ng mga halagang ito ay tumutukoy kung paano ipinapakita ang interface sa iPhone, iPad, Mac Catalyst at CarPlay. Ayon sa Apple Human Interface Guidelines, 2024, pinapayagan ng Size Class ang pagbuo ng isang storyboard para sa lahat ng device, gamit ang Auto Layout at UITraitCollection. Gumagana ang system sa lahat ng iOS device simula sa iOS 8.
Mga pangunahing punto
- Size Class — sistema ng pag-uuri ng laki sa iOS na may dalawang halaga bawat axis: Compact (naka-compress) at Regular (buong laki).
- Horizontal na Size Class sa iPhone sa portrait na oryentasyon — Compact, sa iPad — Regular. Vertical — Regular sa lahat ng iPhone maliban sa SE.
- UITraitCollection — programming interface para makuha ang kasalukuyang Size Class at tumugon sa mga pagbabago ng trait collection sa runtime.
- Interface Builder ay nagpapahintulot sa pag-configure ng constraints at visibility ng mga elemento para sa bawat kumbinasyon ng Size Class gamit ang tool na Vary for Traits.
- Adaptive layout batay sa Size Class ay pumapalit sa hiwalay na storyboard para sa iPhone at iPad — isang file ay umaangkop sa lahat ng device.
Ano ang Size Class?
Size Class — ay isang abstract na pag-uuri ng screen sa iOS, na ipinakilala ng Apple sa iOS 8 para sa pag-iisa ng adaptive layout. Sa halip na suriin ang partikular na modelo ng device, tinutukoy ng Size Class ang dalawang katangian: available na espasyo nang pahalang at patayo. Bawat katangian ay kumukuha ng isa sa dalawang halaga — Compact (limitadong espasyo) o Regular (sapat na espasyo). Ang kumbinasyon ng mga halagang ito ay bumubuo ng trait collection, na ipinapasa sa lahat ng elemento ng interface.
Kasaysayan at layunin
Bago ang pagdating ng Size Class, ang mga developer ay gumagawa ng hiwalay na storyboard para sa iPhone at iPad o gumagamit ng UI_USER_INTERFACE_IDIOM() na pagsusuri sa code. Ito ay humantong sa pagdoble ng code, paglobo ng storyboard, at kahirapan sa pagsuporta sa mga bagong laki ng screen. Nalutas ng Size Class ang problema sa pamamagitan ng pag-aalok ng unibersal na sistema: ang developer ay nag-configure ng interface para sa 4 na kumbinasyon ng Compact/Regular, at awtomatikong pinipili ng iOS ang angkop. Sa pagdating ng Split View sa iPad at iba't ibang laki ng iPhone, ang sistema ay naging kailangang-kailangan para sa adaptive layout.
Paano gumagana ang Size Class
Size Class ay kinakalkula ng iOS batay sa lapad at taas ng kasalukuyang screen, na isinasaalang-alang ang oryentasyon at multitasking. Ang mga halaga ay hindi nakatali sa mga partikular na pixel — ito ay isang lohikal na kategorya. Halimbawa, ang iPhone 16 Pro sa portrait ay may horizontal Compact at vertical Regular. Ang parehong iPhone sa landscape — Compact sa parehong axis. Ang iPad sa Split View na may app sa 1/3 screen ay nakakakuha ng horizontal Compact, kahit na sa full screen mode — Regular. Awtomatikong ina-update ng system ang Size Class kapag nagbago ang oryentasyon o Split View.
Ano-ano ang mga klase ng laki
Size Class ay gumagamit ng apat na kumbinasyon ng dalawang halaga sa dalawang axis. Bawat kumbinasyon ay may aplikasyon depende sa uri ng device at oryentasyon nito. Ang pag-unawa sa mga kumbinasyong ito ay ang batayan ng pagdidisenyo ng adaptive interface para sa iOS. Sinasaklaw ng system ang lahat ng kasalukuyang Apple device: iPhone, iPad, Mac Catalyst at CarPlay. Inirerekomenda ng Apple na simulan ang pagdidisenyo sa kombinasyon na wAny hAny (base layout) at pinuhin para sa mga partikular na kumbinasyon.
Apat na kumbinasyon ng Size Class
wCompact hRegular — portrait iPhone (maliban sa Plus/Max sa ilang pagkakataon). wCompact hCompact — landscape iPhone SE/6/7/8. wRegular hRegular — full screen iPad sa anumang oryentasyon, iPhone Plus/Max sa landscape. wRegular hCompact — iPad sa landscape na may makitid na nilalaman. Bawat kumbinasyon ay tumutukoy kung aling mga constraint at elemento ang aktibo. Maaaring itakda ng developer ang hitsura para sa bawat kumbinasyon nang hiwalay sa Interface Builder.
Size Class para sa Mac Catalyst
Sa Mac Catalyst, ang Size Class ay palaging wRegular hRegular — full-size na interface. Nangangahulugan ito na ang Mac na bersyon ng iPad app ay nakakakuha ng maximum na espasyo. Maaaring gumamit ang developer ng mga karagdagang pagsusuri sa pamamagitan ng UIScreen.traitCollection.userInterfaceIdiom upang makilala ang Mac mula sa iPad. Ang Size Class sa Mac ay gumagana nang matatag, ngunit ang mga Catalyst app ay kadalasang nangangailangan ng karagdagang adaptasyon para sa mouse at keyboard, na lampas sa saklaw ng Size Class.
Paano nakakaapekto ang Size Class sa adaptive layout
Size Class ay tumutukoy kung aling Auto Layout-constraints ang aktibo, aling mga elemento ng interface ang nakikita, at kung paano nakaayos ang mga subview. Maaaring magtakda ang developer ng iba't ibang constraint para sa iba't ibang Size Class, at awtomatikong inililipat ng iOS ang mga ito kapag nagbago ang trait collection. Halimbawa, sa iPad (wRegular hRegular) ang talahanayan na may mga detalye ay ipinapakita sa Master-Detail, sa iPhone (wCompact hRegular) — sa Navigation Stack. Ito ang pangunahing senaryo ng adaptive layout na may Size Class.
Pagtatakda at pag-alis ng mga constraint
Sa Interface Builder, pinipili ng developer ang kumbinasyon ng Size Class sa pamamagitan ng button na Vary for Traits at nagdaragdag ng mga constraint na dapat gumana lamang para sa kumbinasyong ito. Ang mga constraint na itinakda para sa wAny hAny ay palaging gumagana. Ang mga constraint na itinakda para sa isang partikular na kumbinasyon ay isinaaktibo lamang kapag tumugma ang Size Class. Kung walang mga espesyal na constraint na itinakda para sa isang kumbinasyon, ginagamit ang mga base constraint. Kapag nagbago ang Size Class, ina-animate ng iOS ang paglipat sa pagitan ng mga set ng constraint.
Pagtatago at pagpapakita ng mga elemento
Ang Installed flag sa Interface Builder ay nagpapahintulot sa pagtatago ng mga elemento para sa mga partikular na Size Class. Minamarkahan ng developer ang elemento bilang Uninstalled para sa napiling kumbinasyon. Halimbawa, ang button na Details ay nakikita lamang sa iPad (wRegular hRegular), at sa iPhone — nakatago. Ito ay mas simple kaysa sa pamamahala ng isHidden sa code. Para sa programmatic na pagtatago, ginagamit ang override ng traitCollectionDidChange o ang willTransition na pamamaraan, kung saan sinusuri ang kasalukuyang Size Class.
Paggamit ng Size Class sa Interface Builder
Interface Builder ay nagbibigay ng visual na tool na Vary for Traits para sa pagtatrabaho sa Size Class. Pinipili ng developer ang kinakailangang kumbinasyon (lapad at taas), at ipinapakita ng Interface Builder ang preview ng screen para sa kumbinasyong ito. Lahat ng pagbabago sa constraint, laki, font, at visibility na ginawa sa mode na ito ay inilalapat lamang sa napiling Size Class. Ang paglabas sa mode ay nagkukumpirma ng mga setting. Ang pamamaraang ito ay pumapalit sa pangangailangan na magsulat ng adaptasyon code para sa iba't ibang device.
Hakbang-hakbang na paggawa sa Interface Builder
Para sa pag-configure ng Size Class sa Interface Builder, binubuksan ng developer ang storyboard, pinipili ang view controller, at pinipindot ang button na Vary for Traits sa ibabang panel. Pagkatapos ay pinipili ang Width (Compact, Regular o Any) at Height (Compact, Regular o Any). Ang interface ay lumilipat sa edit mode para sa napiling kumbinasyon. Lahat ng pagbabago sa constraint, pagdaragdag o pag-alis ng mga elemento ay inilalapat lamang sa kumbinasyong ito. Pagkatapos makumpleto ang pag-configure, lumalabas ang developer sa mode — ang mga pagbabago ay nai-save para sa partikular na kumbinasyon ng Size Class.
Pinakamahusay na kasanayan
Inirerekomenda ng Apple na magsimula sa base layout para sa wAny hAny (ang base combination na sumasaklaw sa lahat ng device). Pagkatapos ay pinuhin ang layout para sa mga problematikong kombinasyon: wCompact hRegular (portrait iPhone) at wRegular hRegular (iPad). Hindi inirerekomenda na i-configure ang bawat kumbinasyon — lamang kung saan nasisira ang layout. Ang labis na pag-configure ay nagpapahirap sa pagpapanatili. Para sa tumpak na pag-configure ng mga font, gamitin ang Dynamic Type sa halip na Size Class: ang mga font ay awtomatikong umaangkop sa laki ng screen.
Size Class sa code: UITraitCollection
UITraitCollection — ay isang iOS class na naglalaman ng kasalukuyang Size Class at iba pang katangian ng kapaligiran (force touch, display scale, user interface idiom). Bawat UIView at UIViewController ay may sariling traitCollection, na minana mula sa magulang. Nakukuha ng developer ang Size Class sa pamamagitan ng traitCollection.horizontalSizeClass at traitCollection.verticalSizeClass, na nagbabalik ng UIUserInterfaceSizeClass (.compact, .regular o .unspecified). Ang pagbabago ng Size Class ay sinusubaybayan sa pamamagitan ng override ng traitCollectionDidChange.
Halimbawa: paglipat ng layout sa code
Isaalang-alang ang halimbawa ng pag-aangkop ng UICollectionView layout sa Size Class. Sa iPad (wRegular hRegular) ginagamit namin ang UICollectionViewCompositionalLayout na may dalawang column, sa iPhone (wCompact hRegular) — na may isa. Sinusuri ng code ang horizontal Size Class at pinipili ang naaangkop na layout. Sa pag-ikot o paglipat sa Split View, tinatawag ng iOS ang traitCollectionDidChange, at inililipat ng controller ang layout na may animasyon.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Pagtugon sa mga pagbabago sa trait collection
Ang pamamaraang traitCollectionDidChange ay tinatawag sa bawat pagbabago ng Size Class: pag-ikot ng device, pagpasok/paglabas sa Split View, pagkonekta ng external na display. Sa pamamaraang ito, ina-update ng developer ang layout, ni-reload ang mga koleksyon, ina-update ang constraint priorities, o binabago ang visibility ng mga elemento. Mahalagang suriin kung ang Size Class ang nagbago, hindi ibang katangian: ihambing ang traitCollection.horizontalSizeClass sa previousTraitCollection?.horizontalSizeClass. Pinipigilan ng optimisasyon ang hindi kinakailangang pag-redraw kapag nagbago ang force touch o display scale.
Mga katangian ng Size Class sa iba't ibang device
Iba't ibang Apple device ay may iba't ibang kumbinasyon ng Size Class at dapat isaalang-alang ng developer ang mga katangiang ito. iPhone sa portrait — wCompact hRegular, sa landscape — depende sa modelo: iPhone SE/6/7/8 (wCompact hCompact), iPhone X at mas bago (wCompact hCompact o wCompact hRegular depende sa nilalaman). iPad sa full screen mode — wRegular hRegular, sa Split View — maaaring wCompact hRegular (1/3 screen) o wRegular hRegular (2/3 screen). Mac Catalyst — palaging wRegular hRegular.
iPhone: lahat ng laki
Sa iPhone, ang Size Class ay matatag para sa karamihan ng mga modelo, ngunit may mga nuances. iPhone Plus (6+, 7+, 8+) at Max (X, XS, 11 Pro, 13–16 Pro Max) sa landscape ay may wRegular hCompact — tulad ng iPad mini. Ito ay nagpapahintulot sa paglalagay ng nilalaman sa dalawang column sa malalaking iPhone sa landscape. iPhone SE (1–3 henerasyon) sa landscape — wCompact hCompact. Vertical Size Class sa lahat ng iPhone sa portrait — Regular, maliban sa iPhone SE sa landscape, kung saan ito ay Compact. Horizontal — laging Compact para sa portrait at landscape (maliban sa Plus/Max sa landscape).
iPad at Split View
iPad sa full screen mode — wRegular hRegular, na nagbibigay ng maximum na flexibility ng layout. Sa Split View nagbabago ang pag-uugali: kung ang app ay sumasakop sa 1/3 ng screen (Slide Over o Split sa 1/3), ang horizontal Size Class ay nagiging Compact, kahit na ang vertical ay nananatiling Regular. Sa 2/3 screen — wRegular hRegular. Dapat subukan ng developer ang interface sa lahat ng mode ng Split View, dahil ang Size Class ay nagbabago nang dynamic. Inirerekomenda ng Apple ang paggamit ng Size Class kasama ng UISplitViewController para sa pare-parehong pag-uugali sa iPad.
Mga madalas itanong
Paano naiiba ang Size Class sa breakpoint sa CSS?
Size Class — isang discrete system na may 4 na kumbinasyon, habang ang CSS-breakpoint ay tuloy-tuloy na may arbitrary na bilang ng mga punto. Ang Size Class ay nag-abstrak mula sa mga tiyak na sukat ng screen, pinapangkat ang mga device ayon sa pag-uugali. Ang CSS-breakpoint ay nakatali sa mga pixel, Size Class — sa mga lohikal na kategorya na Compact/Regular.
Bakit sa iPhone Plus sa landscape ang Size Class ay horizontal Regular?
iPhone Plus/Max sa landscape ay may sapat na lapad ng screen upang ipakita ang nilalaman sa dalawang column (tulad ng sa iPad mini). Ang Apple ay nagtatalaga ng horizontal Regular upang magamit ng developer ang multi-column layout nang walang karagdagang pagsusuri. Ito ay isang exception sa Compact na patakaran para sa iPhone.
Maaari bang baguhin ang Size Class nang programmatically?
Size Class ay tinutukoy ng iOS batay sa aktwal na mga katangian ng device at hindi maaaring baguhin mula sa code ng app. Ang developer ay maaari lamang tumugon sa kasalukuyang halaga. Maaaring i-override ng System UI ang Size Class para sa mga system element, ngunit sa app ito ay hindi posible.
Paano gumagana ang Size Class sa SwiftUI?
SwiftUI ay hindi direktang gumagamit ng Size Class — sa halip, ang developer ay naglalapat ng mga modifier na @Environment(\.horizontalSizeClass) upang basahin ang kasalukuyang halaga. Ang SwiftUI ay nag-aalok ng mas mataas na antas na mga tool: Size Classes at AnyLayout na may Layout protocol para sa adaptive layout.
Na-update ba ang Size Class kapag kumokonekta ng external na monitor?
Oo, kapag kumokonekta ng external na display sa pamamagitan ng Stage Manager o Sidecar, ina-update ng iOS ang Size Class. Ang external na monitor ay karaniwang nakakakuha ng wRegular hRegular, habang ang pangunahing screen ay nagpapanatili ng Size Class nito. Ang traitCollectionDidChange ay tinatawag para sa mga window sa bawat screen nang independiyente.
Buod
- Size Class — sistema ng pag-uuri ng screen ng iOS na may dalawang halaga na Compact/Regular sa bawat axis, kabuuang 4 na kumbinasyon.
- iPhone sa portrait — wCompact hRegular. iPad sa full screen mode — wRegular hRegular. iPhone Plus/Max sa landscape — wRegular hCompact.
- Interface Builder ay nagbibigay ng Vary for Traits para sa visual na pag-configure ng constraint at visibility para sa bawat Size Class.
- UITraitCollection — programming API para sa pagbabasa ng Size Class sa pamamagitan ng horizontalSizeClass at verticalSizeClass. Ang mga pagbabago ay sinusubaybayan sa traitCollectionDidChange.
- Split View sa iPad ay dynamic na nagbabago ng Size Class: sa 1/3 screen, ang horizontal ay nagiging Compact, na nangangailangan ng adaptasyon ng layout.
- SwiftUI ay nagbibigay ng @Environment(\.horizontalSizeClass) para sa pagbabasa ng Size Class at AnyLayout para sa paglipat sa pagitan ng mga layout sa runtime.
- Inirerekomenda na magsimula sa layout para sa wAny hAny, pagkatapos ay umangkop para sa wCompact hRegular (iPhone) at wRegular hRegular (iPad), nang hindi labis na pinapabigat ang iba pang kumbinasyon.
Gagawa kami ng mobile application na turnkey
Gumagawa ang IT Sectr ng mga iOS at Android application para sa mga startup at negosyo mula noong 2017. Magpapayo kami sa iyo at magmumungkahi ng pinakamahusay na solusyon.
Basahin din