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
Serena MCPのすすめ
wadakatu
4
860
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
140
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
1
420
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.4k
iOSDC.pdf
chronos2500
2
650
実践AIチャットボットUI実装入門
syumai
7
2.4k
株式会社 Sun terras カンパニーデック
sunterras
0
190
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
340
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
Model Pollution
hschwentner
1
180
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
440
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
The Invisible Side of Design
smashingmag
301
51k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Visualization
eitanlees
148
16k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Navigating Team Friction
lara
189
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
It's Worth the Effort
3n
187
28k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
950
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