$30 off During Our Annual Pro Sale. View Details »

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

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

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

Keisuke Tatsumi

November 15, 2018
Tweet

More Decks by Keisuke Tatsumi

Other Decks in Technology

Transcript

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

    cokaholic • Twitter: @TK_u_nya • AppStore: Keisuke Tatsumi
  2. Agenda • What’s iPhone X • What’s Safe Area •

    How To “TRUE” Support iPhone X • Support iPhone X in 2018 • Summary
  3. Agenda • What’s iPhone X • What’s Safe Area •

    How To “TRUE” Support iPhone X • Support iPhone X in 2018 • Summary
  4. Touch ID to Face ID • ੜମೝূ͸LocalAuthentication.frameworkͰ؅ཧ ͞Ε͍ͯΔ • LABiometryTypeͱ͍͏enumͰੜମೝূͷλΠϓ

    Λ؅ཧ͍ͯ͠Δ • framework಺ͰࣗಈͰݕ஌ͯ͠ɺͲͪΒΛ࢖͏͔Λ ൑அ͢ΔͨΊɺ࣮૷͸Touch IDͷͱ͖ͷ··Ͱྑ͍
  5. Agenda • What’s iPhone X • What’s Safe Area •

    How To “TRUE” Support iPhone X • Support iPhone X in 2018 • Summary
  6. What’s Safe Area API Roadmap • ηʔϑΤϦΞΛ༗ޮʹ͢Δ 1. StoryboardΛ։͘ 2.

    ӈଆʹ͋ΔInterface BuilderͷΠϯεϖ ΫλΛ։͘ 3. ʮUse Safe Area Layout Guidesʯͷ νΣοΫΛONʹ͢Δ 4. ࣗಈͰηʔϑΤϦΞ(UILayoutGuide) ͕ ௥Ճ͞ΕΔ
  7. What’s Safe Area API Roadmap • ͍··ͰͷStoryboardͰηʔϑΤϦΞΛ༗ޮʹ͢Δͱɺ Top Layout Guide΍Bottom

    Layout Guideʹ઀ଓ͍ͯ͠ ͨϏϡʔ͸ࣗಈͰηʔϑΤϦΞͷTopɺBottomʹࠩ͠ସ ͑ͯ͘ΕΔ ηʔϑΤϦΞద༻લ ηʔϑΤϦΞద༻ޙ
  8. Agenda • What’s iPhone X • What’s Safe Area •

    How To “TRUE” Support iPhone X • Support iPhone X in 2018 • Summary
  9. API Roadmap Designing for iPhone X - Fall 2017 -

    Videos - Apple DeveloperΑΓ ηʔϑΤϦΞͰ੾ΓऔΔ͚ͩͷσβΠϯ͸ඇਪ঑
  10. How To “TRUE” Support iPhone X API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏

    • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏
  11. 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͔Βऔಘ͢Δ
  12. 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͔Βऔಘ͢Δ ຖճ͜ͷ෼ذΛॻ͘ͷ͸໘౗͡Όͳ͍ʁ
  13. 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Λ࡞੒
  14. 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
  15. 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Λ࡞੒ ͑ʁϓϩύςΟ໊มΘΔͷͬͯ෼͔ΓͮΒ͘ͳ͍ʁ
  16. How To Get Safe Area ᶅ safeAreaInsetsΛsafeAreaInsetsͰऔಘ͢ΔͨΊͷUIViewͷExtensionΛ࡞੒ Extension༻ͷϓϩύςΟ (exͳͲ) Λܦ༝ͯ͠

    Extensionఆٛͨ͠΋ͷ͔ΒΞΫηε͢Ε͹ɺ ͦͷ··ͷϓϩύςΟ໊ͰΞΫηεͰ͖Δʂ ࢀߟهࣄɿSwiftͷExtensionΛϞμϯͰΦγϟϨʹ࣮૷͢Δ - Qiita URLɿhttps://qiita.com/motokiee/items/e8f07c11b88d692b2cc5
  17. 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Λ࡞੒
  18. 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
  19. 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 ͜ΕͰϓϩύςΟ໊͕มΘͬͯ͠·͏໰୊΋ղܾʂ"
  20. 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Λ࡞੒
  21. How To Detect Change Safe Area • iOS11͔Β͸ηʔϑΤϦΞͷมԽΛײ஌͢ΔͨΊʹUIViewʹ open func

    safeAreaInsetsDidChange() ͕ɺUIViewController ʹ open func viewSafeAreaInsetsDidChange() ͕௥Ճ͞Εͯ ͍Δ • ͦΕͧΕɺΦʔόʔϥΠυ͢Δ͜ͱͰɺϝιου಺Ͱηʔϑ ΤϦΞͷมԽΛײ஌Ͱ͖Δ • มԽ͸ݕ஌Ͱ͖Δ͕ɺҾ਺Ͱ safeAreaInsets ͸ड͚औΕͳ͍ ͨΊɺϝιου಺Ͱࣗ਎Ͱऔಘ͢Δඞཁ͕͋Δ
  22. How To “TRUE” Support iPhone X API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏

    • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏ • ίʔυϕʔεͷϏϡʔʹؾΛ͚ͭΑ͏ • ϑϧεΫϦʔϯදࣔͰͷΞεϖΫτൺ͸कΖ͏
  23. Designing for iPhone X - Fall 2017 - Videos -

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

    Apple DeveloperΑΓ ίϯςϯπΛϑϧεΫϦʔϯදࣔ͢Δࡍʹ͸ΞεϖΫτൺΛอͪ·͠ΐ͏ iPhoneX (18:9) Λج४ʹ͢Δ৔߹ ্ԼΛ੾Γऔͬͯදࣔ ࠨӈΛԜ·ͤͯදࣔ or
  25. 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
  26. Agenda • What’s iPhone X • What’s Safe Area •

    How To “TRUE” Support iPhone X • Support iPhone X in 2018 • Summary
  27. 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)
  28. Agenda • What’s iPhone X • What’s Safe Area •

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