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

What's new in Xcode9 Interface Building / 20170627 #geek_garage_ios / 20170722 #fincwwdc

What's new in Xcode9 Interface Building / 20170627 #geek_garage_ios / 20170722 #fincwwdc

GEEK GARAGE iOS vol3 - connpass
https://geekgarage.connpass.com/event/58698/
(初稿)

および

WWDC2017振り返り勉強会@FiNC - connpass
https://finc.connpass.com/event/58947/
(改稿)

での発表資料です。

704056da9a4c4e075ad14479beaebab7?s=128

takasek

July 22, 2017
Tweet

Transcript

  1. What's new in Xcode9 Interface Building by. 2017/6/27 GEEK GARAGE

    iOS vol3 (beta2) 2017/7/24 WWDC2017ৼΓฦΓษڧձˏFiNC (beta3) 1
  2. takasek iOS Developer ϑϦʔϥϯε(΄΅FiNC) @takasek OSS ActionClosurable Notifwift౳ 2

  3. ͜ͷൃද͸ WWDC2017ͷηογϣϯ What's new in Xcode9 Interface Building ͷ಺༰঺հͰ͢ 3

  4. ΢ιͰ͢ 4

  5. ͦΜͳηογϣϯͳ͔ͬͨͷͰ ͍͔ͭ͘ͷηογϣϯͷ৘ใΛर͍ूΊͨൃදͰ͢ 5

  6. ໨࣍ Dynamic Types safe areas 6

  7. Dynamic Types 7

  8. 8

  9. !" 9

  10. 10

  11. ! 11

  12. ॏཁ౓↗ 4 iOS11ͷίϯτϩʔϧηϯλʔ ʹɺจࣈαΠζมߋͷίϯτ ϩʔϧ΋ઃஔͰ͖ΔΑ͏ʹͳ ΔΒ͍͠ 4 ͜Ε·Ͱ͸ઃఆappͷԞਂ ͘ʹ͋ͬͨ 4

    ͜Ε͔Β͸ɺΑΓΧδϡΞ ϧʹϑΥϯταΠζ͕มߋ ͞Ε͏Δ 4 ͜Ε·ͰҎ্ʹҙࣝ͠ͳ͍ͱ Ϡό͍ 12
  13. IBͰར༻͠΍ ͘͢ͳͬͨ Xcode8.3Ҏ߱ 4 Automatically Adjusts Font νΣοΫϘοΫε͕ ͍ͭͨ 4

    Font sizeΛText Styleʹ มߋ͢ΔͷΛ๨Εͳ͍Α͏ ʹ 13
  14. standard ͷ text sizeɾstyle͸ ͜Μͳ͔Μ͡ 14

  15. Dynamic Type ֬ೝํ๏ʢSimulatorʣ 4 Accessibility Inspectorܦ༝ͰɺSimulatorͷϑΥϯταΠζΛߋ৽Ͱ͖Δ 15

  16. UIFontMetricsͷڧԽ ίʔυͷ࿩ʹͳΔ͚Ͳ…iOS11Ҏ߱ɺ 4 System FontҎ֎Ͱ΋ Dynamic Type͕࢖͑ΔΑ͏ʹ 4 UIFontMetrics(forTextStyle: .title1)

    ɹɹɹɹɹɹɹɹɹɹ.scaledFont(for: customFont) 4 ೚ҙͷϑΥϯτ΍஋ΛɺDynamic TypeΛ௨ͯ͠ม׵Մ 4 UIFontMetrics(forTextStyle: .title1) ɹɹɹɹɹɹɹɹɹɹ.scaledValue(forValue: 40.0) 16
  17. ϑΥϯταΠζΛେ͖͘ ͢ΔͱɺαΠζ͚ͩͰͳ ͘ϨΠΞ΢τ΋มΘΔ 4 Ϣʔβʔ࣮૷Ͱ΋ɺ UITraitCollection.preferredContentSizeCategory ʹ ैͬͯ৚݅෼ذɾϨΠΞ΢τΛมߋ͢Δ࣮૷͕ٻΊΒΕΔ 4 ৄࡉ͸Session

    245 ͷ Building Apps with Dynamic Type ʹͯ 17
  18. IBͰͷը૾ͷDynamic SizeରԠ 4 text͚ͩͰͳ͘ը૾αΠζ΋Dynamicʹ͍ͨ͠৔߹ 4 Assets͸VectorͰ༻ҙ 4 IBͰ͸ `Adjusts Image

    Size ΛΦϯʹ͢Δ 18
  19. 4 TabBarItemΛϩϯάϓϨ εͨ͠ͱ͖ͷϏϡʔͰ΋ɺ Dynamic SizeͰ֦େ͞Ε ͨը૾͕࢖ΘΕΔ 19

  20. safe areas 20

  21. safe areaͷޠݯ ςϨϏ! ͷϕθϧ(࿮)Ͱ ӅΕΔ৺഑ͷͳ͍ྖҬ 21

  22. unsafe! 22

  23. safe! 23

  24. iOS։ൃͷͲ͜Ͱ ॏཁʹͳͬͯ͘Δ͔ʁ 24

  25. 25

  26. Learge Title ! 26

  27. NavigationBarͷߴ͞͸44pt! 27

  28. NavigationBarͷߴ͞͸44pt! ͱ͍͏຀Վతͳ࣌୅͸ ऴΘΓ·ͨ͠ 28

  29. iOS11ͷφϏήʔγϣϯόʔ͸ɺ 4 navigationItem.largeTitleDisplayMode ʹ ΑͬͯදࣔϞʔυ͕มಈ 4 LargeTitle͕εΫϩʔϧͰ֦ॖ 4 UISearchController ΋දࣔ͞ΕΔ

    4 Refresh controls ΋දࣔ͞ΕΔ 29
  30. 30

  31. 31

  32. 32

  33. 33

  34. 34

  35. 35

  36. SafeAreaʹ·ͭΘΔΫϥεͱϓϩύςΟ 4 UIView 4 var safeAreaLayoutGuide: UILayoutGuide { get }

    4 ViewͰɺbar౳ͷίϯςϯπʹΑΓӅ͞ΕΔ෦෼Λࣔ͢ 4 UIViewController 4 var additionalSafeAreaInsets: UIEdgeInsets { get set } 4 ViewControllerͰɺsafeAreaͷࡉ͔͍ิਖ਼ʹ࢖͏insets 4 UIScreen 4 var overscanCompensationInsets: UIEdgeInsets { get } 4 ScreenͰɺΤοδͷΫϦοϐϯάΛආ͚ΔͨΊͷinsets 36
  37. additionalSafeareaInsets ͬͯʁ ಠࣗͷόʔΛ͍࣋ͬͯΔViewControllerͰઃఆ͢Δ 37

  38. UIViewͷ৽ઃϓϩύςΟ class UIView { var safeAreaLayoutGuide: UILayoutGuide { get }

    var safeAreaInsets: UIEdgeInsets { get } // safeAreaInsets ͕ߋ৽͞ΕͨΒݺ͹ΕΔ func safeAreaInsetsDidChange() // insetsΛ૬ରతʹ͢Δ͔Ͳ͏͔ɻσϑΥͰ͸ true var insetsLayoutMarginsFromSafeArea: Bool { get set } // ݴޠͷ޲͖ʹΑΔϚʔδϯ΋ઃఆͰ͖ΔΑ͏ʹͳͬͨ var directionalLayoutMargins: NSDirectionalEdgeInsets { get set } } 38
  39. UIScrollViewͷ৽ઃϓϩύςΟ class UIScrollView { // enumɻ .automatic, .scrollableAxes, .never, .always

    ΛͱΔ var contentInsetAdjustmentBehavior : UIScrollViewContentInsetAdjustmentBehavior // ! automaticallyAdjustsScrollViewInsets ͷ୅ସ var adjustedContentInset: UIEdgeInsets { get } // adjustedContentInset ͕ߋ৽͞ΕͨΒݺ͹ΕΔ func adjustedContentInsetDidChange() // UIScrollViewͷ LalyoutGuide ΋औΕΔΑ͏ʹͳͬͨʂ var frameLayoutGuide: UILayoutGuide { get } var contentLayoutGuide: UILayoutGuide { get } } 39
  40. TableViewपΓͰ͸ 4 Cellͷseparator , UITableViewCell , UITableViewHeaderFoote rView ͸ɺ ࣗ਎ͷsafearea΁ͷinset

    Λઃ͚ͯ͘ΕΔ 4 ϔομɾϑολʹ͸ඞͣ UITableViewHeaderFoote rView Λ࢖͍·͠ΐ͏ 40
  41. Interface BuilderͰͷSafeAreaରԠ ɹɹɹɹɹɹɹɹɹɹFile Inspector!ɹɹɹɹɹɹɹ!View Hierarchy 41

  42. Interface BuilderͰͷSafeAreaରԠ Use Safe Area Layout Guides ʹνΣοΫΛೖΕΔͱ… 42

  43. Interface BuilderͰͷSafeAreaରԠ ɹɹɹɹɹɹɹɹɹɹFile Inspector!ɹɹɹɹɹ!஫໨!View Hierarchy!஫໨! 43

  44. Interface BuilderͰͷSafeAreaରԠ TopLayoutGuide / BottomLayoutGuide ͕࢟Λม͑Δʂ 44

  45. ·ͱΊ ίʔυͰͷ෼ذ͸͍ͣΕ΍Δͱͯ͠΋ɺIBͷ ରԠ͸ࠓ͔ΒՄೳʂ iOS11࣌୅ʹඋ͑ͯɺࠓ͔ΒରԠ͍͖ͯ͠· ͠ΐ͏ʂ 45