Tweet
Tweet

Slide 1

Slide 1 text

͋͋͏͑(@_kwzr_) iPadͷը໘αΠζରԠೖ໳ ΤϯδχΞͱσβΠφʔ͕Θ͔Δ

Slide 2

Slide 2 text

ࣗݾ঺հ • ͋͋͏͑(@_kwzr_) • ॴଐ: ৽نࣄۀ෦ɾσβΠϯγεςϜ෦ • ಛٕ: iPad͕޷͖ͳͷͰ4୆͍࣋ͬͯ·͢

Slide 3

Slide 3 text

iPadରԠͯ͠·͔͢ʂ

Slide 4

Slide 4 text

pixiv SketchͰ͸͍ͯ͠·͢ʂ

Slide 5

Slide 5 text

શવ࠷ۙ΍ͬͨͱ͔Ͱ͸ͳ͘ɺ 2019೥͘Β͍ʹ΍ͬͯ·ͨ͠ ஌ݟΛ࢒͢λΠϛϯάΛಀͨ͠...ʂ

Slide 6

Slide 6 text

Α͋͘ΔiPadରԠͷؒҧ͍

Slide 7

Slide 7 text

× UIUserInterfaceIdiomΛ࢖ͬͯ͠·͏

Slide 8

Slide 8 text

UIUserInterfaceIdiomΛ࢖͏ͱͲ͏ͳΔ͔

Slide 9

Slide 9 text

SplitView • ը໘Λ෼ׂͯ͠ԣฒ΂ʹΞϓϦΛ഑ஔͰ͖Δ • 1/3, 1/2, 2/3ͷ3ͭͷαΠζʹͳΔ • ※ॎը໘Ͱ͸1/2αΠζʹ͸ͳΒͳ͍

Slide 10

Slide 10 text

SlideOver • ϑϧεΫϦʔϯΞϓϦʹΦʔόʔϨΠͰΞϓϦΛ഑ஔͰ͖Δ • ӈ·ͨ͸ࠨʹ഑ஔՄೳ

Slide 11

Slide 11 text

StageManager • iPadOS 16.1͔Β࢖༻Մೳʹͳͬͨ • ίϯτϩʔϧηϯλʔ͔ΒONʹ͢Δͱɺ ΞϓϦͷαΠζɾ഑ஔΛ͜Ε·ͰΑΓࣗ༝ ʹ഑ஔͰ͖Δ

Slide 12

Slide 12 text

SizeClassΛ࢖͓͏

Slide 13

Slide 13 text

SizeClass • SizeClass͸iOSͰσόΠεͷը໘αΠζΛ ද͢෼ྨ • ԣํ޲͸HorizontalSizeClassɺॎํ޲͸ VerticalSizeClass • ஋ʹ͸Unspeci fi edɾCompactɾRegular ͕͋Δ https://developer.apple.com/documentation/uikit/uitraitcollection

Slide 14

Slide 14 text

SizeClass • ԿpointҎ্ͱ͔Ͱ͸ͳͯ͘ɺ୺຤͝ͱʹܾ·͍ͬͯΔ • ྫ: iPhone 8 PlusͱiPhone 14ͷHorizontalSizeClassΛൺֱ • iPhone 8 Plus(ԣը໘): Regular(736pt) • iPhone 14(ԣը໘): Compact(844pt) • iPhone 14ͷํ͕pt਺͕େ͖͍͕ɺCompact

Slide 15

Slide 15 text

SizeClassͷදه • wC, hC, wR, hR, wAny, hAnyͳͲͱॻ͘ɻXcode্ͳͲͰͨ·ʹݟ͔͚ ·͢Ͷ • wC: ෯͕Compact • hC: ߴ͕͞Compact • wR: ෯͕Regular • hR: ߴ͕͞Regular

Slide 16

Slide 16 text

ΫΠζ: ͦΕͧΕͷ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

Slide 17

Slide 17 text

ΫΠζ: ͦΕͧΕͷ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

Slide 18

Slide 18 text

σβΠϯ͢Δͱ͖͸ • ಛʹiPadͰ͸৭ʑͳը໘αΠζʹͳΔ͜ͱΛ஌͓ͬͯ͘ • جຊతʹHorizontalSizeClassΛҙࣝ͢Δ • VerticalSizeClassΛ࢖͏͜ͱ͸͋·Γͳ͍...͸ͣ • εϚϗΞϓϦ͸େମॎεΫϩʔϧ͢Δ΋ͷ͕ଟ͘ɺॎ෯͕มΘͬͯ΋ͦ ͷڍಈࣗମ͸มΘΔ͜ͱ͕গͳ͍

Slide 19

Slide 19 text

ͦͷଞ: 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/

Slide 20

Slide 20 text

UIUserInterfaceIdiomΛ࢖͏ͱ͖ • SizeClassΛߟ্ྀͨ͠ͰiPad͔Ͳ͏͔൑ఆ͍ͨ͠ͱ͖ • SplitViewͳͲʹରԠ͠ͳ͍৔߹(Requires Full Screen͕ON) • ήʔϜͳͲ

Slide 21

Slide 21 text

࣮૷ํ๏Λ஌Δ

Slide 22

Slide 22 text

SwiftUI • Environment͔Βऔಘ͠·͢ • SizeClassΛ࢖͏ํ๏͕޿·͍ͬͯͯྑ͍Ͱ͢Ͷ

Slide 23

Slide 23 text

UIKit • UITraitCollection͔Βऔಘ͠·͢ɻUIView΍UIViewControllerʹ͸ɺ traitCollectionͷϓϩύςΟ͕ੜ͍͑ͯΔͷͰ͜ΕΛར༻͢Δ

Slide 24

Slide 24 text

SizeClass͕มΘͬͨ͜ͱΛݕ஌͢Δ • UIKitͷίʔυͰϨΠΞ΢τΛ͍ͯ͠Δ৔߹͸SizeClass͕มΘͬͨͱ͖ʹ ࠶ϨΠΞ΢τͯ͋͛͠Δඞཁ͕͋Δ

Slide 25

Slide 25 text

TraitCollectionͷมߋݕ஌ • TraitCollectionͷมߋʹΑͬͯݺ͹ΕΔϝιου͸2ͭ • traitCollectionDidChange • willTransition • ͲͬͪΛ࢖͏ͷ͕ྑ͍?

Slide 26

Slide 26 text

traitCollectionDidChange(_:) • ͦͷ··ɻTraitCollection͕มΘͬͨޙʹݺ͹ΕΔ • UIViewɾUIViewControllerͰ࢖༻Մೳ

Slide 27

Slide 27 text

willTransition(to:with:) • UIViewControllerʹੜ͑ͯΔ • ୈ1Ҿ਺ʹมߋޙͷTraitCollection͕౉͞ΕΔ

Slide 28

Slide 28 text

traitCollectionDidChange vs willTransition • willTransitionͷυΩϡϝϯτΛಡΉ https://developer.apple.com/documentation/uikit/uicontentcontainer/1621511-willtransition

Slide 29

Slide 29 text

willTransitionͷ࢖͍Ͳ͖ • A common use of this method is to make changes to the high-level presentation style when the current size class changes. • > ϋΠϨϕϧϓϨθʔςϯγϣϯελΠϧ < • ΞχϝʔγϣϯΛ͍ͨ࣌͠ͱ͔Ͱ͢Ͷ

Slide 30

Slide 30 text

SizeClassͷݕ஌ • high-level presentation style͍ͨ͠৔߹͸willTransitionΛ࢖͏ • ͦΕҎ֎͸traitCollectionDidChangeͰྑ͍

Slide 31

Slide 31 text

গ͠ൃలతͳࣄྫ

Slide 32

Slide 32 text

TraitCollectionͱը໘αΠζΛ࢖͍ͬͯΔ৔߹ • ྫ͑͹ɺpixiv Sketchͷ΢ΥʔϧͰ͸ • ը໘෯͕Compactͷ৔߹͸ͦͷ·· • ը໘෯͕Regularͷ৔߹͸ɺCollectionViewͷ෯ΛΠϥετ͕ݟ΍͍͢ αΠζʹௐ੔͍ͯ͠Δ

Slide 33

Slide 33 text

TraitCollectionͱը໘αΠζΛ࢖͍ͬͯΔ৔߹

Slide 34

Slide 34 text

TraitCollectionͱը໘αΠζΛ࢖͍ͬͯΔ৔߹

Slide 35

Slide 35 text

TraitCollectionͱը໘αΠζΛ࢖͍ͬͯΔ৔߹ • traitCollectionDidChange͸TraitCollection͕มΘ͔ͬͨ࣌͠ݺ͹Εͳ͍ • → iPadͩͱը໘ճసͯ͠΋TraitCollection͕มΘΒͳ͍͜ͱ͕͋Γɺܭ ࢉ͕ݺ͹Εͳ͍ • → ը໘αΠζͷมߋΛݕ஌ͨ͠ํ͕౎߹͕ྑ͍

Slide 36

Slide 36 text

ը໘αΠζͷมߋΛݕ஌͢Δ • ը໘αΠζͷมߋʹΑͬͯݺ͹ΕΔViewControllerͷϝιου͸͍ͭ͘ ͔͋Δ • viewWillLayoutSubviews • viewWillTransition • ...

Slide 37

Slide 37 text

viewWillLayoutSubviews() • SubviewΛϨΠΞ΢τ͠Α͏ͱ͍ͯ͠Δͱ͖ʹݺͼग़͞ΕΔϝιου • ը໘Λ։͍ͨͱ͖΍ը໘αΠζ͕มߋ͞Εͨͱ͖ʹݺͼग़͞ΕΔ

Slide 38

Slide 38 text

viewWillTransition(to:with:) • ը໘ճస΍ը໘ͷαΠζ͕มΘͬͨ࣌ʹݺ͹ΕΔ • willTransitionಉ༷ʹΞχϝʔγϣϯͷରԠ͕Մೳ

Slide 39

Slide 39 text

viewWillTransitionͷ஫ҙ • viewWillTransition͸αΠζ͕มߋ͞ΕΔ௚લʹݺ͹ΕΔ • ϝιου͕ݺ͹ΕͨλΠϛϯάͰ͸ • ViewControllerͷtraitCollectionʹ͸ݹ͍஋͕ೖ͍ͬͯΔ • view.frame.sizeͳͲʹೖ͍ͬͯΔ஋΋·ͩݹ͍

Slide 40

Slide 40 text

• coordinator.animate(alongsideTransition:completion:) ͷதͰ৽͍͠ TraitCollectionΛऔಘ͢Δ viewWillTransitionͷ஫ҙ

Slide 41

Slide 41 text

• ৽͍͠ը໘αΠζΛར༻͍ͨ͠৔߹͸Ҿ਺ͷsizeΛར༻͢Δ viewWillTransitionͷ஫ҙ

Slide 42

Slide 42 text

viewWillLayoutSubviews vs viewWillTransition • viewWillLayoutSubviews͸ݺ͹ΕΔλΠϛϯά͕ଟ༷ɻ viewWillTransition͸ݺ͹ΕΔλΠϛϯά͕Θ͔Γ΍͘͢ɺॻ͖΍͍͢ • ϋϚΓͲ͜Ζ΋͋ΔɻΞχϝʔγϣϯෆཁͳΒviewWillLayoutSubviews ͚ͩʹϨΠΞ΢τॲཧΛॻ͍ͯ͠·͏ͷ͕γϯϓϧ • Կ΋ߟ͑ͨ͘ͳ͍৔߹͸྆ํͰϨΠΞ΢τॲཧΛݺΜͰ͓͘ͱྑ͍

Slide 43

Slide 43 text

(ಡ·ͳ͍)ϋϚΔέʔε • 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()͕ػೳ͠ͳ͍έʔε͕͋Γɺλ ϒʹ໭͖ͬͯͨ৔߹ʹݺͼ͍ͨ

Slide 44

Slide 44 text

SwiftUIΛ࢖͓͏...

Slide 45

Slide 45 text

·ͱΊ(఻͍͑ͨ) • iPadͷϨΠΞ΢τ͸SizeClassΛ࢖ͬͯ൑ఆ͠Α͏ • iPadରԠΞϓϦΛ૿΍͍ͨ͠ʂiPadͷϢʔβʔΛҙࣝ͠Α͏ʂ • ϐΫγϒͷϞόΠϧΞϓϦΤϯδχΞ͸։ൃػߪೖ੍౓ͰiPhoneɾiPad ͲͪΒ΋ຖ೥ߪೖՄೳʂ