カスタム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

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

63. UINavigationBar
UITabBar
(not Controller)