アイフォンX、凹みを切るか？凹みを使うか？ ~iPhoneX対応のススメ~

CA.swift #4 （ https://cyberagent.connpass.com/event/66850/ ）での発表資料です。

Transcript

1. CA.swift #4 2017/10/18 Keisuke Tatsumi ~iPhoneXରԠͷεεϝ~
2. Keisuke Tatsumi • iOS engineer at AbemaTV, Inc. • Github, Qiita : cokaholic • Twitter : @TK_u_nya • AppStore : Keisuke Tatsumi
4. ຊ೔ͷςʔϚ͸…
5. iPhoneXରԠ
6. Agenda • What’s iPhoneX • What’s Safe Area • How To “TRUE” Support iPhoneX • Summary
7. Agenda • What’s iPhoneX • What’s Safe Area • How To “TRUE” Support iPhoneX • Summary
8. What’s iPhoneX • 9݄12೔ʹ։࠵͞ΕͨApple Special Eventʹ ͯൃද͞Εͨ࠷৽ͷiPhone
9. One more thing…
11. ৽ܕiPhoneΩλʔʂ
12. What’s iPhoneX • 9݄12೔ʹ։࠵͞ΕͨApple Special Eventʹ ͯൃද͞Εͨ࠷৽ͷiPhone
13. What’s iPhoneX • 9݄12೔ʹ։࠵͞ΕͨApple Special Eventʹ ͯൃද͞Εͨ࠷৽ͷiPhone • ϕθϧϨεσΟεϓϨΠ
15. ͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔ʁ
17. ͑…͜Ε…ԜΈͷ෦෼ɺ΍͹͘Ͷʁ
18. ͦ͜Ͱొ৔͢Δͷ͕...
19. Safe Area
20. Agenda • What’s iPhoneX • What’s Safe Area • How To “TRUE” Support iPhoneX • Summary
21. What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦
22. What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦ • φϏήʔγϣϯόʔ΍εςʔλεόʔͳͲͷ֎ ଆͷUIʹඃΒͳ͍҆શͳྖҬΛऔಘͰ͖Δ
23. What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦ • φϏήʔγϣϯόʔ΍εςʔλεόʔͳͲͷ֎ ଆͷUIʹඃΒͳ͍҆શͳྖҬΛऔಘͰ͖Δ • iPhoneXͷΑ͏ͳԜΈΛؚΜͩը໘ʹ΋ରԠ Ͱ͖Δ
24. What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦ • φϏήʔγϣϯόʔ΍εςʔλεόʔͳͲͷ֎ଆͷ UIʹඃΒͳ͍҆શͳྖҬΛऔಘͰ͖Δ • iPhoneXͷΑ͏ͳԜΈΛؚΜͩը໘ʹ΋ରԠͰ͖Δ • Xcode9+ɺiOS11+ SDKΛ࢖༻͠ɺLaunch images Ͱ͸ͳ͘ɺLaunch Screen storyboard͕ඞਢ
25. What’s Safe Area API Roadmap • ηʔϑΤϦΞΛ༗ޮʹ͢Δ 1. StoryboardΛ։͘ 2. ӈଆʹ͋ΔInterface BuilderͷΠϯεϖ ΫλΛ։͘ 3. ʮUse Safe Area Layout Guidesʯͷ νΣοΫΛONʹ͢Δ 4. ࣗಈͰηʔϑΤϦΞ(UILayoutGuide) ͕ ௥Ճ͞ΕΔ
26. Safe Area Preview API Roadmap J1IPOF9 J1IPOF 1PSUSBJU -BOETDBQF എܠ৭෇͖ͷϥϕϧΛSafeAreaʹදࣔ͢ΔΑ͏ʹ੍໿Λ௥Ճ࣮ͯ͠ߦͨ͠৔߹
27. What’s Safe Area API Roadmap • ͍··ͰͷStoryboardͰηʔϑΤϦΞΛ༗ޮʹ͢Δͱɺ Top Layout Guide΍Bottom Layout Guideʹ઀ଓ͍ͯ͠ ͨϏϡʔ͸ࣗಈͰηʔϑΤϦΞͷTopɺBottomʹࠩ͠ସ ͑ͯ͘ΕΔ ηʔϑΤϦΞద༻લ ηʔϑΤϦΞద༻ޙ
28. ͭ·Γ
29. ԜΈΛ੾Δ͜ͱͰ
30. iPhoneXରԠ׬ྃʂ
31. ͱ͸͍͖·ͤΜ iPhoneXରԠ׬ྃʂ
32. Agenda • What’s iPhoneX • What’s Safe Area • How To “TRUE” Support iPhoneX • Summary
33. How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏
34. API Roadmap Designing for iPhone X - Fall 2017 - Videos - Apple DeveloperΑΓ ηʔϑΤϦΞͰ੾ΓऔΔ͚ͩͷσβΠϯ͸ඇਪ঑
35. How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏ • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏
36. API Roadmap ※ը૾͸։ൃதͷ΋ͷͰ͢ɻରԠ൛Ͱ͸ى͖·ͤΜͷͰɺ҆͝৺͍ͩ͘͞ɻ clipsToBoundsΛ໌֬ʹࢦఆ͓͔ͯ͠ͳ͍ͱɺ ηʔϑΤϦΞ͕શવηʔϑʹͳΒͳ͘ͳΔ ແ೦ʹ΋͸Έग़ͯ͠͠·ͬͨ…
37. How To “TRUE” Support iPhoneX • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏ • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏ • ίʔυϕʔεͷϏϡʔʹؾΛ͚ͭΑ͏
38. • ίʔυϕʔεͰViewControllerͷViewͳͲʹ௥Ճ͠ ͍ͯΔViewʹ͸ࣗಈͰηʔϑΤϦΞ͸ద༻͞Εͳ͍ • iOS11͔Β͸UIViewͷϓϩύςΟʹsafeAreaInsets (UIEdgeInsets) ͕௥Ճ͞Ε͍ͯͯɺ͔ͦ͜Βηʔϑ ΤϦΞͷϚʔδϯΛऔಘͰ͖Δ • iOS11+͔͠࢖͑ͳ͍ϓϩύςΟͷͨΊɺ
 #available(iOS 11, *) Ͱͷ෼ذ͕ඞཁ How To Get Safe Area
39. How To Get Safe Area import UIKit class ViewController: UIViewController { // ͜͜ͰsafeAreaInsets͕ॳΊͯ֬ఆ͢Δ override func viewWillLayoutSubviews() { super.viewWillLayoutSubviews() // iOS11͔Ͳ͏͔Ͱ෼ذ͢Δ let safeAreaInsets: UIEdgeInsets if #available(iOS 11, *) { safeAreaInsets = view.safeAreaInsets } else { safeAreaInsets = .zero } print("safeAreaInsets: \(safeAreaInsets)") } } UIViewController.swift UIViewControllerͷview͔ΒsafeAreaInsetsΛऔಘ͢Δ
40. How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏ • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏ • ίʔυϕʔεͷϏϡʔʹؾΛ͚ͭΑ͏ • ϑϧεΫϦʔϯදࣔͰͷΞεϖΫτൺ͸कΖ͏
41. Designing for iPhone X - Fall 2017 - Videos - Apple DeveloperΑΓ ίϯςϯπΛϑϧεΫϦʔϯදࣔ͢Δࡍʹ͸ΞεϖΫτൺΛอͪ·͠ΐ͏ iPhone8 (16:9) Λج४ʹ͢Δ৔߹ ࠨӈΛ੾Γऔͬͯදࣔ ্ԼΛ੾Γऔͬͯදࣔ or
42. ͔͠͠ɺ͜͜Ͱ໰୊͕
43. Safe Area Preview API Roadmap J1IPOF9 J1IPOF 1PSUSBJU -BOETDBQF എܠ৭෇͖ͷϥϕϧΛSafeAreaʹදࣔ͢ΔΑ͏ʹ੍໿Λ௥Ճ࣮ͯ͠ߦͨ͠৔߹
44. Safe Area Preview API Roadmap J1IPOF9 J1IPOF 1PSUSBJU -BOETDBQF എܠ৭෇͖ͷϥϕϧΛSafeAreaʹදࣔ͢ΔΑ͏ʹ੍໿Λ௥Ճ࣮ͯ͠ߦͨ͠৔߹
45. Safe Area Preview API Roadmap J1IPOF9 J1IPOF 1PSUSBJU -BOETDBQF എܠ৭෇͖ͷϥϕϧΛSafeAreaʹදࣔ͢ΔΑ͏ʹ੍໿Λ௥Ճ࣮ͯ͠ߦͨ͠৔߹ ఈ͕੾ΕͪΌͬͯΔΜͰ͚͢Ͳ…
46. How To Support Fullscreen API Roadmap • Bottomͷ੍໿Λ࣍ͷΑ͏ʹมߋ͠·͠ΐ͏ Portraitͷͱ͖
47. How To Support Fullscreen API Roadmap • Bottomͷ੍໿Λ࣍ͷΑ͏ʹมߋ͠·͠ΐ͏ Portraitͷͱ͖
48. How To Support Fullscreen API Roadmap • Bottomͷ੍໿Λ࣍ͷΑ͏ʹมߋ͠·͠ΐ͏ Landscapeͷͱ͖
49. How To Support Fullscreen API Roadmap • Bottomͷ੍໿Λ࣍ͷΑ͏ʹมߋ͠·͠ΐ͏ Landscapeͷͱ͖
50. How To Support Fullscreen ͜ΕͰແࣄʹϑϧεΫϦʔϯදࣔ׬ྃʂ
51. How To Support Fullscreen ͜ΕͰແࣄʹϑϧεΫϦʔϯදࣔ׬ྃʂ
52. How To Support Fullscreen Home Indicator ͕अຐͳΜͰ͚͢Ͳ…
53. How To Support Fullscreen • Home Indicator ͸ඇදࣔʹͰ͖Δ ‣ iOS11͔Β͸UIViewControllerͷΦʔόʔϥΠυϝιο υͱͯ͠ɺ༻ҙ͞Ε͍ͯΔ import UIKit class ViewController: UIViewController { private var isHiddenHomeIndicator: Bool = true override func viewDidLoad() { super.viewDidLoad() // HomeIndicatorͷදࣔΛߋ৽͢ΔͨΊͷϝιου if #available(iOS 11, *) { setNeedsUpdateOfHomeIndicatorAutoHidden() } } @available(iOS 11, *) override func prefersHomeIndicatorAutoHidden() -> Bool { return isHiddenHomeIndicator } } UIViewController.swift
54. How To Support Fullscreen ͜ΕͰຊ౰ʹϑϧεΫϦʔϯදࣔ׬ྃʂ!
55. How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏ • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏ • ίʔυϕʔεͷϏϡʔʹؾΛ͚ͭΑ͏ • ϑϧεΫϦʔϯදࣔͰͷΞεϖΫτൺ͸कΖ͏ etc.
56. Agenda • What’s iPhoneX • What’s Safe Area • How To “TRUE” Support iPhoneX • Summary
57. Summary • iPhoneXʹରԠ͢Δʹ͸ηʔϑΤϦΞͷ֓೦͕ ॏཁʹͳΔ • ηʔϑΤϦΞ಺Ͱ׬݁͢Δ͚ͩͰ͸iPhoneXର Ԡʹ͸ͳΒͳ͍ • ԜΈΛ੾Δ͚ͩͰͳ͘ɺԜΈΛ࢖ͬͯɺԜΈ Λ׆͔࣮ͨ͠૷͕ඞཁ
58. Thank youʂ
59. ࢀߟϦϯΫ • Designing for iPhone X - Fall 2017 - Videos - Apple Developer
 https://developer.apple.com/videos/play/fall2017/801/ • iPhone X - Overview - iOS Human Interface Guidelines
 https://developer.apple.com/ios/human-interface-guidelines/ overview/iphone-x/ • iPhone XͷηʔϑΤϦΞ΍Ϛʔδϯ෯ʹ͍ͭͯ - Qiita
 https://qiita.com/usagimaru/items/761e9a5f3d78b1939df8 • ʲiOS11ʳsafeAreaInsetsͷ஋͕औಘͰ͖ΔλΠϛϯά
 https://qiita.com/hituziando/items/e5873b5bfa42247071e6