Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SafeArea
Search
M
February 02, 2018
Programming
0
51
SafeArea
カスタムBarのSafeArea(iPhoneX)対応
M
February 02, 2018
Tweet
Share
More Decks by M
See All by M
Combine
matsuda
0
67
Swift 5.1 - Property Wrapper
matsuda
0
40
Swift 5.1
matsuda
0
30
Build Time Analyzer
matsuda
0
130
URLProtocol
matsuda
0
63
APIKit
matsuda
0
89
Other Decks in Programming
See All in Programming
いかにして不足・不整合なくデータ移行したか
tjmtmmnk
1
850
Going Staff - Keynote edition
pragtob
0
350
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
150
実践サーバーレスパフォーマンスチューニング ~その実力に迫る~ / Practical Serverless Performance Tuning ~A Close Look at its Power~
seike460
PRO
2
230
Re:proS_案内資料
rect
0
150
Golang と Erlang
taiyow
7
1.7k
Honoの来た道とこれから
yusukebe
6
870
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
170
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
230
App Store Connect APIで 作業時間を増やそう
mot_techtalk
3
130
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
7
1.9k
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
440
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Producing Creativity
orderedlist
PRO
341
39k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
For a Future-Friendly Web
brad_frost
174
9.4k
Designing for Performance
lara
604
68k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Become a Pro
speakerdeck
PRO
24
4.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Transcript
ΧελϜBarͷ SafeAreaʢiPhoneXʣ ରԠ 2018/02/02
iOS8ରϓϩδΣΫτͰ ΧελϜBarͷ SafeAreaʢiPhoneXʣ ରԠ 2018/02/02
͡Ίʹ • ରiOS͕8Ҏ্ͷҊ݅ͰiPhoneX ʢ=SafeAreaʣͷରԠΛͨ࣌͠ʹಘͨݟ • ͦͷޙࠓճͷൃදʹ͋ͨͬͯࢿྉΛ·ͱΊͨ ΓɺվͯωοτͰௐͨΓͯ͠ಘͨݟ • ͬͱ৭ʑͳΓํ͕͋Γͦ͏
SafeArea https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
StoryboardͰSafeAreaରԠ
iOS9Ҏ߱ϓϩδΣΫτͷ StoryboardͰSafeAreaରԠ
Top(Bottom)LayoutGuide
SafeArea
iOS8ରϓϩδΣΫτͷ StoryboardͰSafeAreaରԠ
SafeArea+IF:8.x
Interface BuilderͷDeployment Target=8.xͰϏϧυΤϥʔ Illegal Configuration Group Safe Area Layout Guide
before iOS 9.0
SafeArea+IF:9.x+Device:8.x
Interface BuilderͷDeployment Target=9.xͰ Ϗϧυͨ͠ͷΛiOS8Ͱىಈ͢Δͱ࣮ߦ࣌Τϥʔ Terminating app due to uncaught exception
'NSInvalidUnarchiveOperationException', reason: 'Could not instantiate class named UILayoutGuide'
SafeAreaLayoutGuide • SafeAreaLayoutGuide -> UILayoutGuide • UILayoutGuide iOS9Ҏ߱
iOS8ରϓϩδΣΫτͷ StoryboardͰSafeAreaରԠ • iOS8ରϓϩδΣΫτͰSafeAreaରԠΛ͢Δ ʹTop(Bottom)LayoutGuidetΛར༻͢Δɻ ʢSafeAreaར༻Ͱ͖ͳ͍ʣ • Xcode9Λར༻͍ͯ͠Δঢ়گͰͦΕ΄Ͳҧ͍ Λҙࣝ͢Δඞཁͳͦ͞͏ʢSafeAreaͱಁա తʹѻͬͯ͘ΕΔʣ
iOS8ରϓϩδΣΫτͷStoryboardͰSafeAreaରԠ
Appleඪ४ͷUIBar
SafeArea+UIBar https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area
UINavigationBarController UITabBarController
• ϊονɺHome Indicator·Ͱ͕Δ
UIToolbar
UIToolbar+Superview
UIToolbar+BottomLayoutGuide
ΧελϜBar = UIViewϕʔεͷBarͲ͖
ΧελϜBar+Superview
ΧελϜBar+BottomLayoutGuide
ΧελϜBarΛ Appleඪ४ͷUIBarͷΑ͏ʹ ରԠ͢Δ
SafeAreaInsets
SafeAreaInsets https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
SafeAreaInsetsͷऔಘ
viewSafeAreaInsetsDidChange ͰऔಘՄೳ
͜ΕΛ౿·͑ͯ
έʔε1 1. Լʢ্ʣΛsuperviewʹ߹ΘͤΔ 2. heightͷ੍ʢNSLayoutConstraintʣΛΞ τϨοτ 3. viewSafeAreaInsetsDidChangeͰ safeAreaInsetsɺߴ͞Λௐ͢Δ
viewSafeAreaInsetsDidChange
έʔε1·ͱΊ 1. Լʢ্ʣΛsuperviewʹ߹ΘͤΔ 2. heightͷ੍ ʢNSLayoutConstraintʣΛΞτ Ϩοτ 3. viewSafeAreaInsetsDidChangeͰ safeAreaInsetsɺߴ͞Λௐ͢Δ
έʔε2 1. SafeArea֎ʹ֦େ͢ΔഎܠviewΛՃ 2. എܠviewͷԼʢ্ʣΛsuperviewʹ͚Δ 3. ίϯςϯπviewΛbottomLayoutGuideʢtopLayoutGuideʣʹ ͚Δ 4. എܠviewͱίϯςϯπviewͷtopEdgeʢbottomEdgeʣΛἧ͑Δ
5. ίϯςϯπviewͷbackgroundColorΛಁ໌ʹ͢Δ
എܠview
ίϯςϯπview
έʔε2·ͱΊ 1. SafeArea֎ʹ֦େ͢ΔഎܠviewΛՃ 2. എܠviewͷԼʢ্ʣΛsuperviewʹ͚Δ 3. ίϯςϯπviewΛbottomLayoutGuide ʢtopLayoutGuideʣʹ͚Δ 4. എܠviewͱίϯςϯπviewͷtopEdge
ʢbottomEdgeʣΛἧ͑Δ 5. ίϯςϯπviewͷbackgroundColorΛಁ໌ʹ͢Δ
έʔε3ʢiOS9Ҏ߱ʣ 1. SafeArea֎ʹ֦େ͢ΔഎܠviewΛՃ 2. എܠviewͷԼʢ্ʣΛsuperviewʹ͚Δ 3. എܠviewʹίϯςϯπviewΛࢠͱͯ͠Ճ 4. എܠviewͷSafeAreaLayoutGuideΛ༗ޮʹ͢Δ 5.
ίϯςϯπviewͷԼʢ্ʣΛSafeAreaʹ͚Δ 6. ίϯςϯπviewͷ্ʢԼʣΛsuperviewʢഎܠviewʣʹ͚Δ 7. ίϯςϯπviewͷbackgroundColorΛಁ໌ʹ͢Δ
IF: 9.x + UseSafeAreaGuide
എܠview
ίϯςϯπview
έʔε3·ͱΊ 1. SafeArea֎ʹ֦େ͢ΔഎܠviewΛՃ 2. എܠviewͷԼʢ্ʣΛsuperviewʹ͚Δ 3. എܠviewʹίϯςϯπviewΛࢠͱͯ͠Ճ 4. എܠviewͷSafeAreaLayoutGuideΛ༗ޮʹ͢Δ 5.
ίϯςϯπviewͷԼʢ্ʣΛSafeAreaʹ͚Δ 6. ίϯςϯπviewͷ্ʢԼʣΛsuperviewʢഎܠviewʣʹ ͚Δ 7. ίϯςϯπviewͷbackgroundColorΛಁ໌ʹ͢Δ
ΧελϜBarͷSafeAreaରԠํ ๏ྫͷ·ͱΊ • έʔε1Storyboardͱίʔυͷ྆ํʹखΛ͍ΕΔඞཁ͕͋Δ • έʔε2,3Storyboard্Ͱجຊతʹ݁Ͱ͖Δ • έʔε2,3viewʢഎܠʣΛ1ݸՃ͢Δඞཁ͕͋Δ • έʔε3iOS9Ҏ߱
• έʔε3എܠΛUIImageViewʹ͍ͨ͠߹ɺStoryboard্Ͱ ࢠviewΛՃͰ͖ͳ͍
... ໘͍͘͞ ...
ࣗಈͰAppleඪ४ͷUIBarͷ Α͏ͳϨΠΞτΛͯ͘͠Ε ΔΧελϜBarΛ࡞ͬͯΈͨ
ΧελϜBar
DEMO
UIToolbarͷview hierarchy
࣮ • SafeArea֎ʹ͕Δഎܠviewͷ࡞ • SafeAreaͷLayoutGuideʹ͍ͯ͠ΔํΛऔ ಘʢԼ͚ͩͰͳ্͘ͰରԠͰ͖ΔΑ͏ʹʣ • औಘͨ͠SafeAreaInsetsΛجʹഎܠviewΛ֘ ͢ΔSafeAreaྖҬʹ͛Δ
എܠviewͷ࡞ • Ұ൪എ໘ʹ͍࣋ͬͯ ͘ • ίϯςϯπviewͷ backgroundColorΛ എܠviewʹҕৡ͢Δ
SafeAreaͷLayoutGuideʹ ͍ͯ͠ΔํΛද͢ߏମ • ࠓճtopͱbottom͔͠ରͱ͍ͯ͠ͳ͍͕ ҰԠશํΛఆٛ
SafeAreaͷLayoutGuideʹ ͍ͯ͠ΔํΛऔಘ
SafeAreaͷLayoutGuideʹ ͍ͯ͠ΔํΛऔಘ • ίϯςϯπviewʢഎܠviewͷsuperviewʣʹؔ࿈ ͢Δશͯͷ੍Λௐࠪ • ܭࢉίετ͕ߴ͍ͷͰ࣮ࡍupdateConstraints ͳͲͷλΠϛϯάͰΩϟογϡ͓ͯ͘͠ • ࠓճiOS8ରͱͨ͠ͷͰɺUILayoutSupport
ͱUILayoutGuideͷ྆ΫϥεΛର
SafeAreaInsetsͷઃఆ • എܠviewʹSafeAreaInsetsͷΛઃఆ͠ɺऔಘͨ͠ LayoutGuideͷํͷSafeAreaྖҬ֎ʹ͛Δ
None
αϯϓϧίʔυ • https://github.com/matsuda/TestSafeArea • ࠓճഎܠviewΛframeͰϨΠΞτͨ͠ύ λʔϯΛઆ໌͠·͕ͨ͠ɺAutoLayoutͰϨΠ Ξτͨ͠ͷ͋Γ·͢ɻ
None
·ͱΊ • iOS8ରϓϩδΣΫτͰ Top(Bottom)LayoutGuideΛར༻ͯ͠ରԠͰ͖Δ • എܠviewΛҰͭڬΉํ๏Λར༻͢ΔͱStoryboard ্ͷΈͰରԠͰ͖Δ • Ұը໘ɺҰݸͣͭ͢ͷେมͳͷͰΧελϜ viewΛ࡞͢Δ
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
͓·͚
UINavigationBar UITabBar (not Controller)
None