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/ )での発表資料です。

Keisuke Tatsumi

October 18, 2017
Tweet

More Decks by Keisuke Tatsumi

Other Decks in Technology

Transcript

  1. Keisuke Tatsumi • iOS engineer at AbemaTV, Inc. • Github,

    Qiita : cokaholic • Twitter : @TK_u_nya • AppStore : Keisuke Tatsumi
  2. Agenda • What’s iPhoneX • What’s Safe Area • How

    To “TRUE” Support iPhoneX • Summary
  3. Agenda • What’s iPhoneX • What’s Safe Area • How

    To “TRUE” Support iPhoneX • Summary
  4. Agenda • What’s iPhoneX • What’s Safe Area • How

    To “TRUE” Support iPhoneX • Summary
  5. What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦ • φϏήʔγϣϯόʔ΍εςʔλεόʔͳͲͷ֎ଆͷ UIʹඃΒͳ͍҆શͳྖҬΛऔಘͰ͖Δ

    • iPhoneXͷΑ͏ͳԜΈΛؚΜͩը໘ʹ΋ରԠͰ͖Δ • Xcode9+ɺiOS11+ SDKΛ࢖༻͠ɺLaunch images Ͱ͸ͳ͘ɺLaunch Screen storyboard͕ඞਢ
  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 iPhoneX • What’s Safe Area • How

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

    Videos - Apple DeveloperΑΓ ηʔϑΤϦΞͰ੾ΓऔΔ͚ͩͷσβΠϯ͸ඇਪ঑
  10. How To “TRUE” Support iPhoneX 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)") } } UIViewController.swift UIViewControllerͷview͔ΒsafeAreaInsetsΛऔಘ͢Δ
  12. How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏ •

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

    Apple DeveloperΑΓ ίϯςϯπΛϑϧεΫϦʔϯදࣔ͢Δࡍʹ͸ΞεϖΫτൺΛอͪ·͠ΐ͏ iPhone8 (16:9) Λج४ʹ͢Δ৔߹ ࠨӈΛ੾Γऔͬͯදࣔ ্ԼΛ੾Γऔͬͯදࣔ or
  14. 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
  15. How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏ •

    ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏ • ίʔυϕʔεͷϏϡʔʹؾΛ͚ͭΑ͏ • ϑϧεΫϦʔϯදࣔͰͷΞεϖΫτൺ͸कΖ͏ etc.
  16. Agenda • What’s iPhoneX • What’s Safe Area • How

    To “TRUE” Support iPhoneX • Summary
  17. ࢀߟϦϯΫ • 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