Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

95f926465b1c71fbb49850c5b6223c4d?s=128

Keisuke Tatsumi

October 18, 2017
Tweet

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