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/
(改稿)

での発表資料です。

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
9. !" 9
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
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
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