エンジニアとデザイナーがわかる iPadの画面サイズ対応入門

2023/1/26 pixiv App Night

https://www.youtube.com/watch?v=AWESPAsGP-8

1. ͋͋͏͑(@_kwzr_) iPadͷը໘αΠζରԠೖ໳ ΤϯδχΞͱσβΠφʔ͕Θ͔Δ
2. ࣗݾ঺հ • ͋͋͏͑(@_kwzr_) • ॴଐ: ৽نࣄۀ෦ɾσβΠϯγεςϜ෦ • ಛٕ: iPad͕޷͖ͳͷͰ4୆͍࣋ͬͯ·͢
3. iPadରԠͯ͠·͔͢ʂ
4. pixiv SketchͰ͸͍ͯ͠·͢ʂ
5. શવ࠷ۙ΍ͬͨͱ͔Ͱ͸ͳ͘ɺ 2019೥͘Β͍ʹ΍ͬͯ·ͨ͠ ஌ݟΛ࢒͢λΠϛϯάΛಀͨ͠...ʂ
6. Α͋͘ΔiPadରԠͷؒҧ͍
7. × UIUserInterfaceIdiomΛ࢖ͬͯ͠·͏
8. UIUserInterfaceIdiomΛ࢖͏ͱͲ͏ͳΔ͔
9. SplitView • ը໘Λ෼ׂͯ͠ԣฒ΂ʹΞϓϦΛ഑ஔͰ͖Δ • 1/3, 1/2, 2/3ͷ3ͭͷαΠζʹͳΔ • ※ॎը໘Ͱ͸1/2αΠζʹ͸ͳΒͳ͍
10. SlideOver • ϑϧεΫϦʔϯΞϓϦʹΦʔόʔϨΠͰΞϓϦΛ഑ஔͰ͖Δ • ӈ·ͨ͸ࠨʹ഑ஔՄೳ
11. StageManager • iPadOS 16.1͔Β࢖༻Մೳʹͳͬͨ • ίϯτϩʔϧηϯλʔ͔ΒONʹ͢Δͱɺ ΞϓϦͷαΠζɾ഑ஔΛ͜Ε·ͰΑΓࣗ༝ ʹ഑ஔͰ͖Δ
12. SizeClassΛ࢖͓͏
13. SizeClass • SizeClass͸iOSͰσόΠεͷը໘αΠζΛ ද͢෼ྨ • ԣํ޲͸HorizontalSizeClassɺॎํ޲͸ VerticalSizeClass • ஋ʹ͸Unspeci fi edɾCompactɾRegular ͕͋Δ https://developer.apple.com/documentation/uikit/uitraitcollection
14. SizeClass • ԿpointҎ্ͱ͔Ͱ͸ͳͯ͘ɺ୺຤͝ͱʹܾ·͍ͬͯΔ • ྫ: iPhone 8 PlusͱiPhone 14ͷHorizontalSizeClassΛൺֱ • iPhone 8 Plus(ԣը໘): Regular(736pt) • iPhone 14(ԣը໘): Compact(844pt) • iPhone 14ͷํ͕pt਺͕େ͖͍͕ɺCompact
15. SizeClassͷදه • wC, hC, wR, hR, wAny, hAnyͳͲͱॻ͘ɻXcode্ͳͲͰͨ·ʹݟ͔͚ ·͢Ͷ • wC: ෯͕Compact • hC: ߴ͕͞Compact • wR: ෯͕Regular • hR: ߴ͕͞Regular
16. ΫΠζ: ͦΕͧΕͷHorizontalSizeClass͸ͲΕ? • iPad Pro 12.9Πϯν(ୈ6ੈ୅)(ԣ޲͖)Ͱ1/2ʹ෼ׂͨ͠ͱ͖ • iPad Pro 12.9Πϯν(ୈ6ੈ୅)(ԣ޲͖)Ͱ1/3ʹ෼ׂͨ͠ͱ͖ • iPhone 14 Pro(ԣ޲͖) • iPhone 14 Pro Max(ԣ޲͖) • 1: Compact, 2: Regular
17. ΫΠζ: ͦΕͧΕͷHorizontalSizeClass͸ͲΕ? • iPad Pro 12.9Πϯν(ୈ6ੈ୅)(ԣ޲͖)Ͱ1/2ʹ෼ׂͨ͠ͱ͖ 2: Regular • iPad Pro 12.9Πϯν(ୈ6ੈ୅)(ԣ޲͖)Ͱ1/3ʹ෼ׂͨ͠ͱ͖ 1: Compact • iPhone 14 Pro(ԣ޲͖) 1: Compact • iPhone 14 Pro Max(ԣ޲͖) 2: Regular • 1: Compact, 2: Regular
18. σβΠϯ͢Δͱ͖͸ • ಛʹiPadͰ͸৭ʑͳը໘αΠζʹͳΔ͜ͱΛ஌͓ͬͯ͘ • جຊతʹHorizontalSizeClassΛҙࣝ͢Δ • VerticalSizeClassΛ࢖͏͜ͱ͸͋·Γͳ͍...͸ͣ • εϚϗΞϓϦ͸େମॎεΫϩʔϧ͢Δ΋ͷ͕ଟ͘ɺॎ෯͕มΘͬͯ΋ͦ ͷڍಈࣗମ͸มΘΔ͜ͱ͕গͳ͍
19. ͦͷଞ: HIGʹै͏ • On iPad, consider placing controls on the sides of the screen in landscape orientation. • iPadͷԣ޲͖ͷը໘Ͱ͸ɺૢ࡞ੑͷ؍఺͔Βը໘ͷ྆୺ʹ഑ஔ͢Δ͜ͱ ΛקΊΒΕ͍ͯΔ • https://developer.apple.com/design/human-interface-guidelines/ foundations/layout/
20. UIUserInterfaceIdiomΛ࢖͏ͱ͖ • SizeClassΛߟ্ྀͨ͠ͰiPad͔Ͳ͏͔൑ఆ͍ͨ͠ͱ͖ • SplitViewͳͲʹରԠ͠ͳ͍৔߹(Requires Full Screen͕ON) • ήʔϜͳͲ
21. ࣮૷ํ๏Λ஌Δ
22. SwiftUI • Environment͔Βऔಘ͠·͢ • SizeClassΛ࢖͏ํ๏͕޿·͍ͬͯͯྑ͍Ͱ͢Ͷ
23. UIKit • UITraitCollection͔Βऔಘ͠·͢ɻUIView΍UIViewControllerʹ͸ɺ traitCollectionͷϓϩύςΟ͕ੜ͍͑ͯΔͷͰ͜ΕΛར༻͢Δ
24. SizeClass͕มΘͬͨ͜ͱΛݕ஌͢Δ • UIKitͷίʔυͰϨΠΞ΢τΛ͍ͯ͠Δ৔߹͸SizeClass͕มΘͬͨͱ͖ʹ ࠶ϨΠΞ΢τͯ͋͛͠Δඞཁ͕͋Δ
25. TraitCollectionͷมߋݕ஌ • TraitCollectionͷมߋʹΑͬͯݺ͹ΕΔϝιου͸2ͭ • traitCollectionDidChange • willTransition • ͲͬͪΛ࢖͏ͷ͕ྑ͍?
26. traitCollectionDidChange(_:) • ͦͷ··ɻTraitCollection͕มΘͬͨޙʹݺ͹ΕΔ • UIViewɾUIViewControllerͰ࢖༻Մೳ
27. willTransition(to:with:) • UIViewControllerʹੜ͑ͯΔ • ୈ1Ҿ਺ʹมߋޙͷTraitCollection͕౉͞ΕΔ
28. traitCollectionDidChange vs willTransition • willTransitionͷυΩϡϝϯτΛಡΉ https://developer.apple.com/documentation/uikit/uicontentcontainer/1621511-willtransition
29. willTransitionͷ࢖͍Ͳ͖ • A common use of this method is to make changes to the high-level presentation style when the current size class changes. • > ϋΠϨϕϧϓϨθʔςϯγϣϯελΠϧ < • ΞχϝʔγϣϯΛ͍ͨ࣌͠ͱ͔Ͱ͢Ͷ
30. SizeClassͷݕ஌ • high-level presentation style͍ͨ͠৔߹͸willTransitionΛ࢖͏ • ͦΕҎ֎͸traitCollectionDidChangeͰྑ͍
31. গ͠ൃలతͳࣄྫ
32. TraitCollectionͱը໘αΠζΛ࢖͍ͬͯΔ৔߹ • ྫ͑͹ɺpixiv Sketchͷ΢ΥʔϧͰ͸ • ը໘෯͕Compactͷ৔߹͸ͦͷ·· • ը໘෯͕Regularͷ৔߹͸ɺCollectionViewͷ෯ΛΠϥετ͕ݟ΍͍͢ αΠζʹௐ੔͍ͯ͠Δ
33. TraitCollectionͱը໘αΠζΛ࢖͍ͬͯΔ৔߹
34. TraitCollectionͱը໘αΠζΛ࢖͍ͬͯΔ৔߹
35. TraitCollectionͱը໘αΠζΛ࢖͍ͬͯΔ৔߹ • traitCollectionDidChange͸TraitCollection͕มΘ͔ͬͨ࣌͠ݺ͹Εͳ͍ • → iPadͩͱը໘ճసͯ͠΋TraitCollection͕มΘΒͳ͍͜ͱ͕͋Γɺܭ ࢉ͕ݺ͹Εͳ͍ • → ը໘αΠζͷมߋΛݕ஌ͨ͠ํ͕౎߹͕ྑ͍
36. ը໘αΠζͷมߋΛݕ஌͢Δ • ը໘αΠζͷมߋʹΑͬͯݺ͹ΕΔViewControllerͷϝιου͸͍ͭ͘ ͔͋Δ • viewWillLayoutSubviews • viewWillTransition • ...
37. viewWillLayoutSubviews() • SubviewΛϨΠΞ΢τ͠Α͏ͱ͍ͯ͠Δͱ͖ʹݺͼग़͞ΕΔϝιου • ը໘Λ։͍ͨͱ͖΍ը໘αΠζ͕มߋ͞Εͨͱ͖ʹݺͼग़͞ΕΔ
38. viewWillTransition(to:with:) • ը໘ճస΍ը໘ͷαΠζ͕มΘͬͨ࣌ʹݺ͹ΕΔ • willTransitionಉ༷ʹΞχϝʔγϣϯͷରԠ͕Մೳ
39. viewWillTransitionͷ஫ҙ • viewWillTransition͸αΠζ͕มߋ͞ΕΔ௚લʹݺ͹ΕΔ • ϝιου͕ݺ͹ΕͨλΠϛϯάͰ͸ • ViewControllerͷtraitCollectionʹ͸ݹ͍஋͕ೖ͍ͬͯΔ • view.frame.sizeͳͲʹೖ͍ͬͯΔ஋΋·ͩݹ͍
40. • coordinator.animate(alongsideTransition:completion:) ͷதͰ৽͍͠ TraitCollectionΛऔಘ͢Δ viewWillTransitionͷ஫ҙ
41. • ৽͍͠ը໘αΠζΛར༻͍ͨ͠৔߹͸Ҿ਺ͷsizeΛར༻͢Δ viewWillTransitionͷ஫ҙ
42. viewWillLayoutSubviews vs viewWillTransition • viewWillLayoutSubviews͸ݺ͹ΕΔλΠϛϯά͕ଟ༷ɻ viewWillTransition͸ݺ͹ΕΔλΠϛϯά͕Θ͔Γ΍͘͢ɺॻ͖΍͍͢ • ϋϚΓͲ͜Ζ΋͋ΔɻΞχϝʔγϣϯෆཁͳΒviewWillLayoutSubviews ͚ͩʹϨΠΞ΢τॲཧΛॻ͍ͯ͠·͏ͷ͕γϯϓϧ • Կ΋ߟ͑ͨ͘ͳ͍৔߹͸྆ํͰϨΠΞ΢τॲཧΛݺΜͰ͓͘ͱྑ͍
43. (ಡ·ͳ͍)ϋϚΔέʔε • SketchͷྫͷΑ͏ʹCollectionViewͷFlowLayoutͷinsetʹܭࢉͨ͠஋Λઃఆ͍ͯ͠Δ৔߹ɺinset͕ collectionViewͷ෯Λ௒͑ͯ͠·͏ͱϥϯλΠϜΤϥʔ(negative or zero sizes are not supported in the fl ow layout)ͰΫϥογϡ͢Δ • viewWillTransitionͰcoordinator.animateΛݺͼग़ͨ࣌͠ͷclosure͕ݺ͹ΕΔλΠϛϯά͸ viewWillLayoutSubviewsΑΓ΋ޙ • viewWillLayoutSubviewsͰcollectionViewLayout.invalidateLayout()ΛݺΜͰ͍Δ৔߹ɺλΠϛϯάతʹ ্هͷΤϥʔ͕ग़Δ৔߹͕͋Δ • ͳͥviewWillLayoutSubviewsͰinvalidateLayout()ΛݺͿඞཁ͕͋Δ͔ͱ͍͏ͱɺUITabBarControllerͳ ͲͰผλϒΛ։͍͍ͯΔ్தʹը໘ճసͳͲΛ͢ΔͱinvalidateLayout()͕ػೳ͠ͳ͍έʔε͕͋Γɺλ ϒʹ໭͖ͬͯͨ৔߹ʹݺͼ͍ͨ
44. SwiftUIΛ࢖͓͏...
45. ·ͱΊ(఻͍͑ͨ) • iPadͷϨΠΞ΢τ͸SizeClassΛ࢖ͬͯ൑ఆ͠Α͏ • iPadରԠΞϓϦΛ૿΍͍ͨ͠ʂiPadͷϢʔβʔΛҙࣝ͠Α͏ʂ • ϐΫγϒͷϞόΠϧΞϓϦΤϯδχΞ͸։ൃػߪೖ੍౓ͰiPhoneɾiPad ͲͪΒ΋ຖ೥ߪೖՄೳʂ