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
39
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
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
1
360
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
REXML改善のその後
naitoh
0
190
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
580
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Debugging Ruby Performance
tmm1
72
12k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Fireside Chat
paigeccino
31
2.9k
Ruby is Unlike a Banana
tanoku
96
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
Documentation Writing (for coders)
carmenintech
65
4.3k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Why Our Code Smells
bkeepers
PRO
334
56k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
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