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
60
SafeArea
カスタムBarのSafeArea(iPhoneX)対応
M
February 02, 2018
Tweet
Share
More Decks by M
See All by M
Combine
mtsd
0
77
Swift 5.1 - Property Wrapper
mtsd
0
47
Swift 5.1
mtsd
0
41
Build Time Analyzer
mtsd
0
160
URLProtocol
mtsd
0
71
APIKit
mtsd
0
100
Other Decks in Programming
See All in Programming
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
1
570
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
160
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.5k
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
310
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
430
Current States of Java Web Frameworks at JCConf 2025
kishida
0
580
Swift Concurrency - 状態監視の罠
objectiveaudio
2
430
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.8k
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
150
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
110
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.5k
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
740
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
Six Lessons from altMBA
skipperchong
28
4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
840
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Automating Front-end Workflow
addyosmani
1371
200k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Language of Interfaces
destraynor
162
25k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Bash Introduction
62gerente
615
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
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