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
78
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
CSC509 Lecture 08
javiergs
PRO
0
260
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
450
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.2k
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
930
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
250
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
Towards Transactional Buffering of CDC Events @ Flink Forward 2025 Barcelona Spain
hpgrahsl
0
120
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
560
技術的負債の正体を知って向き合う
irof
0
260
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Writing Fast Ruby
sferik
630
62k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Designing Experiences People Love
moore
142
24k
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