SafeArea - Speaker Deck

Slide 1

Slide 1 text

ΧελϜBarͷ SafeAreaʢiPhoneXʣ ରԠ 2018/02/02

Slide 2

Slide 2 text

iOS8ର৅ϓϩδΣΫτͰ ΧελϜBarͷ SafeAreaʢiPhoneXʣ ରԠ 2018/02/02

Slide 3

Slide 3 text

͸͡Ίʹ • ର৅iOS͕8Ҏ্ͷҊ݅ͰiPhoneX ʢ=SafeAreaʣͷରԠΛͨ࣌͠ʹಘͨ஌ݟ • ͦͷޙࠓճͷൃදʹ͋ͨͬͯࢿྉΛ·ͱΊͨ ΓɺվͯωοτͰௐ΂ͨΓͯ͠ಘͨ஌ݟ • ΋ͬͱ৭ʑͳ΍Γํ͕͋Γͦ͏

Slide 4

Slide 4 text

SafeArea https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

Slide 5

Slide 5 text

StoryboardͰSafeAreaରԠ

Slide 6

Slide 6 text

iOS9Ҏ߱ϓϩδΣΫτͷ StoryboardͰSafeAreaରԠ

Slide 7

Slide 7 text

Top(Bottom)LayoutGuide

Slide 8

Slide 8 text

SafeArea

Slide 9

Slide 9 text

iOS8ର৅ϓϩδΣΫτͷ StoryboardͰSafeAreaରԠ

Slide 10

Slide 10 text

SafeArea+IF:8.x

Slide 11

Slide 11 text

Interface BuilderͷDeployment Target=8.xͰ͸ϏϧυΤϥʔ Illegal Conﬁguration Group Safe Area Layout Guide before iOS 9.0

Slide 12

Slide 12 text

SafeArea+IF:9.x+Device:8.x

Slide 13

Slide 13 text

Interface BuilderͷDeployment Target=9.xͰ Ϗϧυͨ͠΋ͷΛiOS8Ͱىಈ͢Δͱ࣮ߦ࣌Τϥʔ Terminating app due to uncaught exception 'NSInvalidUnarchiveOperationException', reason: 'Could not instantiate class named UILayoutGuide'

Slide 14

Slide 14 text

SafeAreaLayoutGuide • SafeAreaLayoutGuide -> UILayoutGuide • UILayoutGuide ͸ iOS9Ҏ߱

Slide 15

Slide 15 text

iOS8ର৅ϓϩδΣΫτͷ StoryboardͰSafeAreaରԠ • iOS8ର৅ϓϩδΣΫτͰSafeAreaରԠΛ͢Δ ʹ͸Top(Bottom)LayoutGuidetΛར༻͢Δɻ ʢSafeArea͸ར༻Ͱ͖ͳ͍ʣ • Xcode9Λར༻͍ͯ͠Δঢ়گͰ͸ͦΕ΄Ͳҧ͍ Λҙࣝ͢Δඞཁ͸ͳͦ͞͏ʢSafeAreaͱಁա తʹѻͬͯ͘ΕΔʣ

Slide 16

Slide 16 text

iOS8ର৅ϓϩδΣΫτͷStoryboardͰSafeAreaରԠ

Slide 17

Slide 17 text

Appleඪ४ͷUIBar

Slide 18

Slide 18 text

SafeArea+UIBar https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area

Slide 19

Slide 19 text

UINavigationBarController UITabBarController

Slide 20

Slide 20 text

• ϊονɺHome Indicator·Ͱ޿͕Δ

Slide 21

Slide 21 text

UIToolbar

Slide 22

Slide 22 text

UIToolbar+Superview

Slide 23

Slide 23 text

UIToolbar+BottomLayoutGuide

Slide 24

Slide 24 text

ΧελϜBar = UIViewϕʔεͷBar΋Ͳ͖

Slide 25

Slide 25 text

ΧελϜBar+Superview

Slide 26

Slide 26 text

ΧελϜBar+BottomLayoutGuide

Slide 27

Slide 27 text

ΧελϜBarΛ Appleඪ४ͷUIBarͷΑ͏ʹ ରԠ͢Δ

Slide 28

Slide 28 text

SafeAreaInsets

Slide 29

Slide 29 text

SafeAreaInsets https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

Slide 30

Slide 30 text

SafeAreaInsetsͷऔಘ

Slide 31

Slide 31 text

viewSafeAreaInsetsDidChange ͰऔಘՄೳ

Slide 32

Slide 32 text

͜ΕΛ౿·͑ͯ

Slide 33

Slide 33 text

έʔε1 1. Լʢ্ʣΛsuperviewʹ߹ΘͤΔ 2. heightͷ੍໿ʢNSLayoutConstraintʣΛΞ΢ τϨοτ 3. viewSafeAreaInsetsDidChangeͰ safeAreaInsets෼ɺߴ͞Λௐ੔͢Δ

Slide 34

Slide 34 text

viewSafeAreaInsetsDidChange

Slide 35

Slide 35 text

έʔε1·ͱΊ 1. Լʢ্ʣΛsuperviewʹ߹ΘͤΔ 2. heightͷ੍໿ ʢNSLayoutConstraintʣΛΞ΢τ Ϩοτ 3. viewSafeAreaInsetsDidChangeͰ safeAreaInsets෼ɺߴ͞Λௐ੔͢Δ

Slide 36

Slide 36 text

έʔε2 1. SafeArea֎ʹ֦େ͢ΔഎܠviewΛ௥Ճ 2. എܠviewͷԼʢ্ʣΛsuperviewʹ෇͚Δ 3. ίϯςϯπviewΛbottomLayoutGuideʢtopLayoutGuideʣʹ෇ ͚Δ 4. എܠviewͱίϯςϯπviewͷtopEdgeʢbottomEdgeʣΛἧ͑Δ 5. ίϯςϯπviewͷbackgroundColorΛಁ໌ʹ͢Δ

Slide 37

Slide 37 text

എܠview

Slide 38

Slide 38 text

ίϯςϯπview

Slide 39

Slide 39 text

έʔε2·ͱΊ 1. SafeArea֎ʹ֦େ͢ΔഎܠviewΛ௥Ճ 2. എܠviewͷԼʢ্ʣΛsuperviewʹ෇͚Δ 3. ίϯςϯπviewΛbottomLayoutGuide ʢtopLayoutGuideʣʹ෇͚Δ 4. എܠviewͱίϯςϯπviewͷtopEdge ʢbottomEdgeʣΛἧ͑Δ 5. ίϯςϯπviewͷbackgroundColorΛಁ໌ʹ͢Δ

Slide 40

Slide 40 text

έʔε3ʢiOS9Ҏ߱ʣ 1. SafeArea֎ʹ֦େ͢ΔഎܠviewΛ௥Ճ 2. എܠviewͷԼʢ্ʣΛsuperviewʹ෇͚Δ 3. എܠviewʹίϯςϯπviewΛࢠͱͯ͠௥Ճ 4. എܠviewͷSafeAreaLayoutGuideΛ༗ޮʹ͢Δ 5. ίϯςϯπviewͷԼʢ্ʣΛSafeAreaʹ෇͚Δ 6. ίϯςϯπviewͷ্ʢԼʣΛsuperviewʢഎܠviewʣʹ෇͚Δ 7. ίϯςϯπviewͷbackgroundColorΛಁ໌ʹ͢Δ

Slide 41

Slide 41 text

IF: 9.x + UseSafeAreaGuide

Slide 42

Slide 42 text

എܠview

Slide 43

Slide 43 text

ίϯςϯπview

Slide 44

Slide 44 text

έʔε3·ͱΊ 1. SafeArea֎ʹ֦େ͢ΔഎܠviewΛ௥Ճ 2. എܠviewͷԼʢ্ʣΛsuperviewʹ෇͚Δ 3. എܠviewʹίϯςϯπviewΛࢠͱͯ͠௥Ճ 4. എܠviewͷSafeAreaLayoutGuideΛ༗ޮʹ͢Δ 5. ίϯςϯπviewͷԼʢ্ʣΛSafeAreaʹ෇͚Δ 6. ίϯςϯπviewͷ্ʢԼʣΛsuperviewʢഎܠviewʣʹ ෇͚Δ 7. ίϯςϯπviewͷbackgroundColorΛಁ໌ʹ͢Δ

Slide 45

Slide 45 text

ΧελϜBarͷSafeAreaରԠํ ๏ྫͷ·ͱΊ • έʔε1͸Storyboardͱίʔυͷ྆ํʹखΛ͍ΕΔඞཁ͕͋Δ • έʔε2,3͸Storyboard্Ͱجຊతʹ׬݁Ͱ͖Δ • έʔε2,3͸viewʢഎܠʣΛ1ݸ௥Ճ͢Δඞཁ͕͋Δ • έʔε3͸iOS9Ҏ߱ • έʔε3͸എܠΛUIImageViewʹ͍ͨ͠৔߹ɺStoryboard্Ͱ ͸ࢠviewΛ௥ՃͰ͖ͳ͍

Slide 46

Slide 46 text

... ໘౗͍͘͞ ...

Slide 47

Slide 47 text

ࣗಈͰAppleඪ४ͷUIBarͷ Α͏ͳϨΠΞ΢τΛͯ͘͠Ε ΔΧελϜBarΛ࡞ͬͯΈͨ

Slide 48

Slide 48 text

ΧελϜBar

Slide 49

Slide 49 text

DEMO

Slide 50

Slide 50 text

UIToolbarͷview hierarchy

Slide 51

Slide 51 text

࣮૷ • SafeArea֎ʹ޿͕Δഎܠviewͷ࡞੒ • SafeAreaͷLayoutGuideʹ઀͍ͯ͠Δํ޲Λऔ ಘʢԼ͚ͩͰͳ্͘Ͱ΋ରԠͰ͖ΔΑ͏ʹʣ • औಘͨ͠SafeAreaInsetsΛجʹഎܠviewΛ֘౰ ͢ΔSafeAreaྖҬʹ޿͛Δ

Slide 52

Slide 52 text

എܠviewͷ࡞੒ • Ұ൪എ໘ʹ͍࣋ͬͯ ͘ • ίϯςϯπviewͷ backgroundColorΛ എܠviewʹҕৡ͢Δ

Slide 53

Slide 53 text

SafeAreaͷLayoutGuideʹ઀ ͍ͯ͠Δํ޲Λද͢ߏ଄ମ • ࠓճ͸topͱbottom͔͠ର৅ͱ͍ͯ͠ͳ͍͕ ҰԠશํ޲Λఆٛ

Slide 54

Slide 54 text

SafeAreaͷLayoutGuideʹ઀ ͍ͯ͠Δํ޲Λऔಘ

Slide 55

Slide 55 text

SafeAreaͷLayoutGuideʹ઀ ͍ͯ͠Δํ޲Λऔಘ • ίϯςϯπviewʢഎܠviewͷsuperviewʣʹؔ࿈ ͢Δશͯͷ੍໿Λௐࠪ • ܭࢉίετ͕ߴ͍ͷͰ࣮ࡍ͸updateConstraints ͳͲͷλΠϛϯάͰΩϟογϡ͓ͯ͘͠ • ࠓճ͸iOS8΋ର৅ͱͨ͠ͷͰɺUILayoutSupport ͱUILayoutGuideͷ྆ΫϥεΛର৅

Slide 56

Slide 56 text

SafeAreaInsetsͷઃఆ • എܠviewʹSafeAreaInsetsͷ஋Λઃఆ͠ɺऔಘͨ͠ LayoutGuideͷํ޲ͷSafeAreaྖҬ֎ʹ޿͛Δ

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

αϯϓϧίʔυ • https://github.com/matsuda/TestSafeArea • ࠓճ͸എܠviewΛframeͰϨΠΞ΢τͨ͠ύ λʔϯΛઆ໌͠·͕ͨ͠ɺAutoLayoutͰϨΠ Ξ΢τͨ͠΋ͷ΋͋Γ·͢ɻ

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

·ͱΊ • iOS8ର৅ϓϩδΣΫτͰ͸ Top(Bottom)LayoutGuideΛར༻ͯ͠ରԠͰ͖Δ • എܠviewΛҰͭڬΉํ๏Λར༻͢ΔͱStoryboard ্ͷΈͰରԠͰ͖Δ • Ұը໘ɺҰݸͣͭ௚͢ͷ͸େมͳͷͰΧελϜ viewΛ࡞੒͢Δ

Slide 61

Slide 61 text

Appendix • https://developer.apple.com/ios/human-interface- guidelines/overview/iphone-x/ • https://developer.apple.com/documentation/uikit/ uiview/positioning_content_relative_to_the_safe_area • https://qiita.com/usagimaru/items/ 761e9a5f3d78b1939df8 • https://medium.com/@kahseng.lee123/creating-custom- navigation-bar-tab-bar-for-iphone-x-f03b1e1827d3