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

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
3. None

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…

10. None

11. ৽ܕiPhoneΩλʔʂ

12. What’s iPhoneX • 9݄12೔ʹ։࠵͞ΕͨApple Special Eventʹ ͯൃද͞Εͨ࠷৽ͷiPhone

13. What’s iPhoneX • 9݄12೔ʹ։࠵͞ΕͨApple Special Eventʹ ͯൃද͞Εͨ࠷৽ͷiPhone • ϕθϧϨεσΟεϓϨΠ

14. None

15. ͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔ʁ

16. None

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