SafeArea

カスタムBarのSafeArea（iPhoneX）対応

1. ΧελϜBarͷ SafeAreaʢiPhoneXʣ ରԠ 2018/02/02
2. iOS8ର৅ϓϩδΣΫτͰ ΧελϜBarͷ SafeAreaʢiPhoneXʣ ରԠ 2018/02/02
3. ͸͡Ίʹ • ର৅iOS͕8Ҏ্ͷҊ݅ͰiPhoneX ʢ=SafeAreaʣͷରԠΛͨ࣌͠ʹಘͨ஌ݟ • ͦͷޙࠓճͷൃදʹ͋ͨͬͯࢿྉΛ·ͱΊͨ ΓɺվͯωοτͰௐ΂ͨΓͯ͠ಘͨ஌ݟ • ΋ͬͱ৭ʑͳ΍Γํ͕͋Γͦ͏
4. SafeArea https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
5. StoryboardͰSafeAreaରԠ
6. iOS9Ҏ߱ϓϩδΣΫτͷ StoryboardͰSafeAreaରԠ
7. Top(Bottom)LayoutGuide
8. SafeArea
9. iOS8ର৅ϓϩδΣΫτͷ StoryboardͰSafeAreaରԠ
10. SafeArea+IF:8.x
11. Interface BuilderͷDeployment Target=8.xͰ͸ϏϧυΤϥʔ Illegal Configuration Group Safe Area Layout Guide before iOS 9.0
12. SafeArea+IF:9.x+Device:8.x
13. Interface BuilderͷDeployment Target=9.xͰ Ϗϧυͨ͠΋ͷΛiOS8Ͱىಈ͢Δͱ࣮ߦ࣌Τϥʔ Terminating app due to uncaught exception 'NSInvalidUnarchiveOperationException', reason: 'Could not instantiate class named UILayoutGuide'
14. SafeAreaLayoutGuide • SafeAreaLayoutGuide -> UILayoutGuide • UILayoutGuide ͸ iOS9Ҏ߱
15. iOS8ର৅ϓϩδΣΫτͷ StoryboardͰSafeAreaରԠ • iOS8ର৅ϓϩδΣΫτͰSafeAreaରԠΛ͢Δ ʹ͸Top(Bottom)LayoutGuidetΛར༻͢Δɻ ʢSafeArea͸ར༻Ͱ͖ͳ͍ʣ • Xcode9Λར༻͍ͯ͠Δঢ়گͰ͸ͦΕ΄Ͳҧ͍ Λҙࣝ͢Δඞཁ͸ͳͦ͞͏ʢSafeAreaͱಁա తʹѻͬͯ͘ΕΔʣ
16. iOS8ର৅ϓϩδΣΫτͷStoryboardͰSafeAreaରԠ
17. Appleඪ४ͷUIBar
18. SafeArea+UIBar https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area
19. UINavigationBarController UITabBarController
20. • ϊονɺHome Indicator·Ͱ޿͕Δ
21. UIToolbar
22. UIToolbar+Superview
23. UIToolbar+BottomLayoutGuide
24. ΧελϜBar = UIViewϕʔεͷBar΋Ͳ͖
25. ΧελϜBar+Superview
26. ΧελϜBar+BottomLayoutGuide
27. ΧελϜBarΛ Appleඪ४ͷUIBarͷΑ͏ʹ ରԠ͢Δ
28. SafeAreaInsets
29. SafeAreaInsets https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
30. SafeAreaInsetsͷऔಘ
31. viewSafeAreaInsetsDidChange ͰऔಘՄೳ
32. ͜ΕΛ౿·͑ͯ
33. έʔε1 1. Լʢ্ʣΛsuperviewʹ߹ΘͤΔ 2. heightͷ੍໿ʢNSLayoutConstraintʣΛΞ΢ τϨοτ 3. viewSafeAreaInsetsDidChangeͰ safeAreaInsets෼ɺߴ͞Λௐ੔͢Δ
34. viewSafeAreaInsetsDidChange
35. έʔε1·ͱΊ 1. Լʢ্ʣΛsuperviewʹ߹ΘͤΔ 2. heightͷ੍໿ ʢNSLayoutConstraintʣΛΞ΢τ Ϩοτ 3. viewSafeAreaInsetsDidChangeͰ safeAreaInsets෼ɺߴ͞Λௐ੔͢Δ
36. έʔε2 1. SafeArea֎ʹ֦େ͢ΔഎܠviewΛ௥Ճ 2. എܠviewͷԼʢ্ʣΛsuperviewʹ෇͚Δ 3. ίϯςϯπviewΛbottomLayoutGuideʢtopLayoutGuideʣʹ෇ ͚Δ 4. എܠviewͱίϯςϯπviewͷtopEdgeʢbottomEdgeʣΛἧ͑Δ 5. ίϯςϯπviewͷbackgroundColorΛಁ໌ʹ͢Δ
37. എܠview
38. ίϯςϯπview
39. έʔε2·ͱΊ 1. SafeArea֎ʹ֦େ͢ΔഎܠviewΛ௥Ճ 2. എܠviewͷԼʢ্ʣΛsuperviewʹ෇͚Δ 3. ίϯςϯπviewΛbottomLayoutGuide ʢtopLayoutGuideʣʹ෇͚Δ 4. എܠviewͱίϯςϯπviewͷtopEdge ʢbottomEdgeʣΛἧ͑Δ 5. ίϯςϯπviewͷbackgroundColorΛಁ໌ʹ͢Δ
40. έʔε3ʢiOS9Ҏ߱ʣ 1. SafeArea֎ʹ֦େ͢ΔഎܠviewΛ௥Ճ 2. എܠviewͷԼʢ্ʣΛsuperviewʹ෇͚Δ 3. എܠviewʹίϯςϯπviewΛࢠͱͯ͠௥Ճ 4. എܠviewͷSafeAreaLayoutGuideΛ༗ޮʹ͢Δ 5. ίϯςϯπviewͷԼʢ্ʣΛSafeAreaʹ෇͚Δ 6. ίϯςϯπviewͷ্ʢԼʣΛsuperviewʢഎܠviewʣʹ෇͚Δ 7. ίϯςϯπviewͷbackgroundColorΛಁ໌ʹ͢Δ
41. IF: 9.x + UseSafeAreaGuide
42. എܠview
43. ίϯςϯπview
44. έʔε3·ͱΊ 1. SafeArea֎ʹ֦େ͢ΔഎܠviewΛ௥Ճ 2. എܠviewͷԼʢ্ʣΛsuperviewʹ෇͚Δ 3. എܠviewʹίϯςϯπviewΛࢠͱͯ͠௥Ճ 4. എܠviewͷSafeAreaLayoutGuideΛ༗ޮʹ͢Δ 5. ίϯςϯπviewͷԼʢ্ʣΛSafeAreaʹ෇͚Δ 6. ίϯςϯπviewͷ্ʢԼʣΛsuperviewʢഎܠviewʣʹ ෇͚Δ 7. ίϯςϯπviewͷbackgroundColorΛಁ໌ʹ͢Δ
45. ΧελϜBarͷSafeAreaରԠํ ๏ྫͷ·ͱΊ • έʔε1͸Storyboardͱίʔυͷ྆ํʹखΛ͍ΕΔඞཁ͕͋Δ • έʔε2,3͸Storyboard্Ͱجຊతʹ׬݁Ͱ͖Δ • έʔε2,3͸viewʢഎܠʣΛ1ݸ௥Ճ͢Δඞཁ͕͋Δ • έʔε3͸iOS9Ҏ߱ • έʔε3͸എܠΛUIImageViewʹ͍ͨ͠৔߹ɺStoryboard্Ͱ ͸ࢠviewΛ௥ՃͰ͖ͳ͍
46. ... ໘౗͍͘͞ ...
47. ࣗಈͰAppleඪ४ͷUIBarͷ Α͏ͳϨΠΞ΢τΛͯ͘͠Ε ΔΧελϜBarΛ࡞ͬͯΈͨ
48. ΧελϜBar
49. DEMO
50. UIToolbarͷview hierarchy
51. ࣮૷ • SafeArea֎ʹ޿͕Δഎܠviewͷ࡞੒ • SafeAreaͷLayoutGuideʹ઀͍ͯ͠Δํ޲Λऔ ಘʢԼ͚ͩͰͳ্͘Ͱ΋ରԠͰ͖ΔΑ͏ʹʣ • औಘͨ͠SafeAreaInsetsΛجʹഎܠviewΛ֘౰ ͢ΔSafeAreaྖҬʹ޿͛Δ
52. എܠviewͷ࡞੒ • Ұ൪എ໘ʹ͍࣋ͬͯ ͘ • ίϯςϯπviewͷ backgroundColorΛ എܠviewʹҕৡ͢Δ
53. SafeAreaͷLayoutGuideʹ઀ ͍ͯ͠Δํ޲Λද͢ߏ଄ମ • ࠓճ͸topͱbottom͔͠ର৅ͱ͍ͯ͠ͳ͍͕ ҰԠશํ޲Λఆٛ
54. SafeAreaͷLayoutGuideʹ઀ ͍ͯ͠Δํ޲Λऔಘ
55. SafeAreaͷLayoutGuideʹ઀ ͍ͯ͠Δํ޲Λऔಘ • ίϯςϯπviewʢഎܠviewͷsuperviewʣʹؔ࿈ ͢Δશͯͷ੍໿Λௐࠪ • ܭࢉίετ͕ߴ͍ͷͰ࣮ࡍ͸updateConstraints ͳͲͷλΠϛϯάͰΩϟογϡ͓ͯ͘͠ • ࠓճ͸iOS8΋ର৅ͱͨ͠ͷͰɺUILayoutSupport ͱUILayoutGuideͷ྆ΫϥεΛର৅
56. SafeAreaInsetsͷઃఆ • എܠviewʹSafeAreaInsetsͷ஋Λઃఆ͠ɺऔಘͨ͠ LayoutGuideͷํ޲ͷSafeAreaྖҬ֎ʹ޿͛Δ
58. αϯϓϧίʔυ • https://github.com/matsuda/TestSafeArea • ࠓճ͸എܠviewΛframeͰϨΠΞ΢τͨ͠ύ λʔϯΛઆ໌͠·͕ͨ͠ɺAutoLayoutͰϨΠ Ξ΢τͨ͠΋ͷ΋͋Γ·͢ɻ
60. ·ͱΊ • iOS8ର৅ϓϩδΣΫτͰ͸ Top(Bottom)LayoutGuideΛར༻ͯ͠ରԠͰ͖Δ • എܠviewΛҰͭڬΉํ๏Λར༻͢ΔͱStoryboard ্ͷΈͰରԠͰ͖Δ • Ұը໘ɺҰݸͣͭ௚͢ͷ͸େมͳͷͰΧελϜ viewΛ࡞੒͢Δ
61. 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
62. ͓·͚
63. UINavigationBar UITabBar (not Controller)