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

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

【サポーターズCoLab勉強会】まだ間に合う!SafeArea完全対応勉強会(iOSアプリ)( https://supporterzcolab.com/event/612/ )での発表資料です。

95f926465b1c71fbb49850c5b6223c4d?s=128

Keisuke Tatsumi

November 15, 2018
Tweet

Transcript

  1. 2.

    cokaholic • iOS engineer at AbemaTV, Inc. • Github, Qiita:

    cokaholic • Twitter: @TK_u_nya • AppStore: Keisuke Tatsumi
  2. 5.

    Agenda • What’s iPhone X • What’s Safe Area •

    How To “TRUE” Support iPhone X • Support iPhone X in 2018 • Summary
  3. 6.

    Agenda • What’s iPhone X • What’s Safe Area •

    How To “TRUE” Support iPhone X • Support iPhone X in 2018 • Summary
  4. 9.
  5. 12.
  6. 18.

    Touch ID to Face ID • ੜମೝূ͸LocalAuthentication.frameworkͰ؅ཧ ͞Ε͍ͯΔ • LABiometryTypeͱ͍͏enumͰੜମೝূͷλΠϓ

    Λ؅ཧ͍ͯ͠Δ • framework಺ͰࣗಈͰݕ஌ͯ͠ɺͲͪΒΛ࢖͏͔Λ ൑அ͢ΔͨΊɺ࣮૷͸Touch IDͷͱ͖ͷ··Ͱྑ͍
  7. 21.
  8. 23.
  9. 26.
  10. 27.

    Agenda • What’s iPhone X • What’s Safe Area •

    How To “TRUE” Support iPhone X • Support iPhone X in 2018 • Summary
  11. 32.

    What’s Safe Area API Roadmap • ηʔϑΤϦΞΛ༗ޮʹ͢Δ 1. StoryboardΛ։͘ 2.

    ӈଆʹ͋ΔInterface BuilderͷΠϯεϖ ΫλΛ։͘ 3. ʮUse Safe Area Layout Guidesʯͷ νΣοΫΛONʹ͢Δ 4. ࣗಈͰηʔϑΤϦΞ(UILayoutGuide) ͕ ௥Ճ͞ΕΔ
  12. 33.

    What’s Safe Area API Roadmap • ͍··ͰͷStoryboardͰηʔϑΤϦΞΛ༗ޮʹ͢Δͱɺ Top Layout Guide΍Bottom

    Layout Guideʹ઀ଓ͍ͯ͠ ͨϏϡʔ͸ࣗಈͰηʔϑΤϦΞͷTopɺBottomʹࠩ͠ସ ͑ͯ͘ΕΔ ηʔϑΤϦΞద༻લ ηʔϑΤϦΞద༻ޙ
  13. 35.
  14. 39.

    Agenda • What’s iPhone X • What’s Safe Area •

    How To “TRUE” Support iPhone X • Support iPhone X in 2018 • Summary
  15. 41.

    API Roadmap Designing for iPhone X - Fall 2017 -

    Videos - Apple DeveloperΑΓ ηʔϑΤϦΞͰ੾ΓऔΔ͚ͩͷσβΠϯ͸ඇਪ঑
  16. 43.

    How To “TRUE” Support iPhone X API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏

    • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏
  17. 49.

    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)") } } ViewController.swift ᶃ safeAreaInsetsΛUIView͔Βऔಘ͢Δ
  18. 50.

    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)") } } ViewController.swift ᶃ safeAreaInsetsΛUIView͔Βऔಘ͢Δ ຖճ͜ͷ෼ذΛॻ͘ͷ͸໘౗͡Όͳ͍ʁ
  19. 51.

    How To Get Safe Area import UIKit extension UIView {

    var viewSafeAreaInsets: UIEdgeInsets { guard #available (iOS 11, *) else { return .zero } return safeAreaInsets } } UIViewExtension.swift ᶄ safeAreaInsetsΛऔಘ͢ΔͨΊͷUIViewͷExtensionΛ࡞੒
  20. 52.

    How To Get Safe Area ᶄ safeAreaInsetsΛऔಘ͢ΔͨΊͷUIViewͷExtensionΛ࡞੒ ͜ΕͰຖճ෼ذॻ͘໰୊͸ղܾʂ" import UIKit

    class ViewController: UIViewController { // ͜͜ͰsafeAreaInsets͕ॳΊͯ֬ఆ͢Δ override func viewWillLayoutSubviews() { super.viewWillLayoutSubviews() let safeAreaInsets = view.viewSafeAreaInsets print("safeAreaInsets: \(safeAreaInsets)") } } ViewController.swift
  21. 53.

    How To Get Safe Area import UIKit class ViewController: UIViewController

    { // ͜͜ͰsafeAreaInsets͕ॳΊͯ֬ఆ͢Δ override func viewWillLayoutSubviews() { super.viewWillLayoutSubviews() let safeAreaInsets = view.viewSafeAreaInsets print("safeAreaInsets: \(safeAreaInsets)") } } ViewController.swift ᶄ safeAreaInsetsΛऔಘ͢ΔͨΊͷUIViewͷExtensionΛ࡞੒ ͑ʁϓϩύςΟ໊มΘΔͷͬͯ෼͔ΓͮΒ͘ͳ͍ʁ
  22. 54.

    How To Get Safe Area ᶅ safeAreaInsetsΛsafeAreaInsetsͰऔಘ͢ΔͨΊͷUIViewͷExtensionΛ࡞੒ Extension༻ͷϓϩύςΟ (exͳͲ) Λܦ༝ͯ͠

    Extensionఆٛͨ͠΋ͷ͔ΒΞΫηε͢Ε͹ɺ ͦͷ··ͷϓϩύςΟ໊ͰΞΫηεͰ͖Δʂ ࢀߟهࣄɿSwiftͷExtensionΛϞμϯͰΦγϟϨʹ࣮૷͢Δ - Qiita URLɿhttps://qiita.com/motokiee/items/e8f07c11b88d692b2cc5
  23. 55.

    How To Get Safe Area struct Extension<Base> { let base:

    Base init (_ base: Base) { self.base = base } } protocol ExtensionCompatible { associatedtype Compatible static var ex: Extension<Compatible>.Type { get } var ex: Extension<Compatible> { get } } extension ExtensionCompatible { static var ex: Extension<Self>.Type { return Extension<Self>.self } var ex: Extension<Self> { return Extension(self) } } BaseExtension.swift ᶅ safeAreaInsetsΛsafeAreaInsetsͰऔಘ͢ΔͨΊͷUIViewͷExtensionΛ࡞੒
  24. 56.

    How To Get Safe Area ᶅ safeAreaInsetsΛsafeAreaInsetsͰऔಘ͢ΔͨΊͷUIViewͷExtensionΛ࡞੒ import UIKit extension

    UIView : ExtensionCompatible {} extension Extension where Base: UIView { var safeAreaInsets: UIEdgeInsets { guard #available (iOS 11, *) else { return .zero } return base.safeAreaInsets } } UIViewExtension.swift
  25. 57.

    How To Get Safe Area ᶅ safeAreaInsetsΛsafeAreaInsetsͰऔಘ͢ΔͨΊͷUIViewͷExtensionΛ࡞੒ import UIKit extension

    UIView : ExtensionCompatible {} extension Extension where Base: UIView { var safeAreaInsets: UIEdgeInsets { guard #available (iOS 11, *) else { return .zero } return base.safeAreaInsets } } UIViewExtension.swift ͜ΕͰϓϩύςΟ໊͕มΘͬͯ͠·͏໰୊΋ղܾʂ"
  26. 58.

    How To Get Safe Area import UIKit class ViewController: UIViewController

    { // ͜͜ͰsafeAreaInsets͕ॳΊͯ֬ఆ͢Δ override func viewWillLayoutSubviews() { super.viewWillLayoutSubviews() let safeAreaInsets = view.ex.safeAreaInsets print("safeAreaInsets: \(safeAreaInsets)") } } ViewController.swift ᶅ safeAreaInsetsΛsafeAreaInsetsͰऔಘ͢ΔͨΊͷUIViewͷExtensionΛ࡞੒
  27. 59.

    How To Detect Change Safe Area • iOS11͔Β͸ηʔϑΤϦΞͷมԽΛײ஌͢ΔͨΊʹUIViewʹ open func

    safeAreaInsetsDidChange() ͕ɺUIViewController ʹ open func viewSafeAreaInsetsDidChange() ͕௥Ճ͞Εͯ ͍Δ • ͦΕͧΕɺΦʔόʔϥΠυ͢Δ͜ͱͰɺϝιου಺Ͱηʔϑ ΤϦΞͷมԽΛײ஌Ͱ͖Δ • มԽ͸ݕ஌Ͱ͖Δ͕ɺҾ਺Ͱ safeAreaInsets ͸ड͚औΕͳ͍ ͨΊɺϝιου಺Ͱࣗ਎Ͱऔಘ͢Δඞཁ͕͋Δ
  28. 60.

    How To “TRUE” Support iPhone X API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏

    • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏ • ίʔυϕʔεͷϏϡʔʹؾΛ͚ͭΑ͏ • ϑϧεΫϦʔϯදࣔͰͷΞεϖΫτൺ͸कΖ͏
  29. 61.

    Designing for iPhone X - Fall 2017 - Videos -

    Apple DeveloperΑΓ ίϯςϯπΛϑϧεΫϦʔϯදࣔ͢Δࡍʹ͸ΞεϖΫτൺΛอͪ·͠ΐ͏ iPhone8 (16:9) Λج४ʹ͢Δ৔߹ ࠨӈΛ੾Γऔͬͯදࣔ ্ԼΛԜ·ͤͯදࣔ or
  30. 62.

    Designing for iPhone X - Fall 2017 - Videos -

    Apple DeveloperΑΓ ίϯςϯπΛϑϧεΫϦʔϯදࣔ͢Δࡍʹ͸ΞεϖΫτൺΛอͪ·͠ΐ͏ iPhoneX (18:9) Λج४ʹ͢Δ৔߹ ্ԼΛ੾Γऔͬͯදࣔ ࠨӈΛԜ·ͤͯදࣔ or
  31. 75.

    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
  32. 78.

    Agenda • What’s iPhone X • What’s Safe Area •

    How To “TRUE” Support iPhone X • Support iPhone X in 2018 • Summary
  33. 86.

    iOS Devices With Safe Area 2017೥11݄࣌఺Ͱ͸ηʔϑΤϦΞΛ࣋ͬͨiOS୺຤͸iPhone X ͚ͩͰ͕ͨ͠… 2018೥11݄ݱࡏɺηʔϑΤϦΞΛ࣋ͬͨiOS୺຤͸ҎԼͷ5छ ྨʹͳΓ·ͨ͠

    ‣ iPhone X (5.8 inch) ‣ iPhone XS (5.8 inch) ‣ iPhone XS Max (6.5 inch) ‣ iPhone XR (6.1 inch) ‣ iPad Pro (mid2018) (11 inch, 12.9 inch)
  34. 93.

    Agenda • What’s iPhone X • What’s Safe Area •

    How To “TRUE” Support iPhone X • Support iPhone X in 2018 • Summary