Let's Coding SwiftUI on iPad!

Transcript

1. Let's Coding SwiftUI on iPad! 2020/01/21 @HAKATA.swift vol.11 Yutaro Muta

   @yutailang0119

2. • Yutaro Muta @yutailang0119 • Hatena Co., Ltd. @Kyoto •

   Conference Staff • builderscon 2020 • try! Swift Tokyo 2020 • and more Who am I ?

3. Goal • iPadͰίʔσΟϯά͢ΔΑ͏ʹͳΔ • ͍࣋ͬͯͳ͍ਓ͸iPadΛങͬͯؼΔ • SwiftUIͷViewʹ͍ͭͯɺͪΐͬͱ஌Δ

4. What's Swift Playgrounds?

5. What's Swift Playgrounds? • iPadΞϓϦ Swift Playground • Document: https://developer.apple.com/documentation/swift_playgrounds

   • ϝΠϯϢʔε͸ɺϓϩάϥϛϯάڭҭΒ͍͠

6. What's Swift Playgrounds? • iOSΞϓϦ։ൃͱ͍ۙ͠ػೳ͕ଟ͘࢖͑Δ • UIKit (Xcode Playground) •

   Camera • Bluetooth • AR (SceneKit) • SwiftUI ΋࢖͑Δʂʂʂʂʂ • Swift Playgrounds 3.1: Build with the SwiftUI framework in new playgrounds you create

7. Run SwiftUI on Swift Playgrounds

8. Run SwiftUI on Swift Playgrounds import SwiftUI import PlaygroundSupport struct

   ContentView: View { var body: some View { VStack { Text("Hello") .font(.largeTitle) .foregroundColor(.primary) Text("world") .font(.title) .foregroundColor(.secondary) } } } let host = UIHostingController(rootView: ContentView()) PlaygroundPage.current.liveView = host

9. Run SwiftUI on Swift Playgrounds

10. Run Swift Playgrounds file on Xcode

11. Run Swift Playgrounds file on Xcode • PlaygroundsͷStarting Pointʹ Xcode

    PlaygroundΛબ୒͢Δ • ֦ுࢠ͕ .playgroundͱͯ͠࡞੒͞ΕΔ (্هҎ֎ͩͱ .playgroundbook) -> XcodeͷPlaygroundͰ΋࣮ߦ͕Ͱ͖Δ • ٯʹɺXcodeͰ࡞੒ͨ͠ .playground ΋Swift PlaygroundsͰ࣮ߦՄೳ

12. Run Swift Playgrounds file on Xcode

13. Pros/Cons of Swift Playgrounds

14. Pros of Swift Playgrounds • iPadͰखܰʹίʔυ͕ॻ͚Δ • Foundation΋SwiftUI΋ͦΕҎ֎ͷFramework΋ѻ͑Δ • ΦϑϥΠϯͰ࣮ߦՄೳ

15. Cons of Swift Playgrounds • Xcodeʹൺ΂ΔͱɺΤσΟλ͸෺଍Γͳ͍ • ίϯύΠϧ • ૣ͘͸ͳ͍

    • XcodeͷSwiftUI Canvas͸ͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛ஫ࢹ͢Δ͜ͱʹͳΔ

16. ͓͠·͍

17. ⚡͔͜͜Βຊฤ⚡

18. Cons of Swift Playgrounds • Xcodeʹൺ΂ΔͱɺΤσΟλ͸෺଍Γͳ͍ • ίϯύΠϧ • ૣ͘͸ͳ͍

    • XcodeͷSwiftUI Canvas͸ͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛ஫ࢹ͢Δ͜ͱʹͳΔ

19. Cons of Swift Playgrounds • Xcodeʹൺ΂ΔͱɺΤσΟλ͸෺଍Γͳ͍ • ίϯύΠϧ • ૣ͘͸ͳ͍

    • XcodeͷSwiftUI Canvas͸ͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛ஫ࢹ͢Δ͜ͱʹͳΔ <- AppleཔΉ

20. Cons of Swift Playgrounds • Xcodeʹൺ΂ΔͱɺΤσΟλ͸෺଍Γͳ͍ • ίϯύΠϧ • ૣ͘͸ͳ͍

    • XcodeͷSwiftUI Canvas͸ͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛ஫ࢹ͢Δ͜ͱʹͳΔ <- AppleཔΉ

21. Cons of Swift Playgrounds • Xcodeʹൺ΂ΔͱɺΤσΟλ͸෺଍Γͳ͍ • ίϯύΠϧ • ૣ͘͸ͳ͍

    • XcodeͷSwiftUI Canvas͸ͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛ஫ࢹ͢Δ͜ͱʹͳΔ <- AppleཔΉ

22. Cons of Swift Playgrounds • Xcodeʹൺ΂ΔͱɺΤσΟλ͸෺଍Γͳ͍ • ίϯύΠϧ • ૣ͘͸ͳ͍

    • XcodeͷSwiftUI Canvas͸ͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛ஫ࢹ͢Δ͜ͱʹͳΔ ^ | Ͳ͏ʹ͔Ͱ͖ͦ͏

23. yutailang0119/LayoutInspector ໊લ͸෇͚͍ͯΔ͚Ͳɺ·ͩͰ͖ͯͳ͍
    

24. LayoutInspector

25. LayoutInspector import SwiftUI struct LayoutInspector<Body: View>: View { private let

    _body: Body private let color: Color init(body: Body, color: Color? = nil) { self._body = body self.color = color ?? Color.random } var body: some View { ZStack(alignment: .topLeading) { self._body .layoutPriority(1.0) self._label } .border(color) } private var _label: some View { Text(String(describing: type(of: _body))) .lineLimit(1) .font(.footnote) .foregroundColor(.primary) .background(color.opacity(0.7)) } } import SwiftUI extension SwiftUI.View { func layoutInspector(color: Color? = nil) -> some View { LayoutInspector(body: self, color: color) } }

26. LayoutInspector

27. ׬ᘳ

28. < ViewModifier protocolʹ ४ڌ͢ΔͱΑͦ͞͏ͩΑ

29. ViewModifier • https://developer.apple.com/documentation/swiftui/viewmodifier > A modifier that you apply to

    a view or another view modifier, producing a different version of the original value. • ModifiedContent ΍ View.modifier(_:) ͱ૊Έ߹Θͤͯ࢖͏

30. Custom ViewModifier import SwiftUI struct PrimaryLabel: ViewModifier { func body(content:

    Content) -> some View { content .padding() .background(Color.red) .foregroundColor(Color.white) .font(.largeTitle) } } HACKING WITH Swift: How to create custom modifiers https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-custom-modifiers

31. Extension SwiftUI.View import SwiftUI extension SwiftUI.View { func labelPrimary() ->

    some View { self .modifier(PrimaryLabel()) } }

32. Custom ViewModifier

33. ͳΔ΄ͲɺΑͦ͞͏ͩ

34. ݁࿦͔Βݴ͏ͱɺେมͩͬͨ

35. ModifierΛ࡞ͬͯɺ ಺෦ͰLayoutInspectorΛ࢖ͬͯΈΔ

36. LayoutInspectModifier (α) struct LayoutInspectModifier: ViewModifier { private let color: Color?

    init(color: Color? = nil) { self.color = color } public func body(content: Content) -> some View { LayoutInspector(body: content, color: color) } }

37. LayoutInspectModifier (α)

38. _ViewModifier_Content<LayoutInspectorModifier> LayoutInspectModifier (α)

39. ViewModifierͷ࣮૷ • func body(content: Self.Content) -> Self.Body • Gets the

    current body of the caller. • Discussion • content is a proxy for the view that will have the modifier represented by Self applied to it. • typealias ViewModifier.Content • The content view type.

40. ViewModifierͷ࣮૷ • ViewModifier.Content ͸ɺݩͷViewͦͷ΋ͷͰ͸ͳ͘ɺProxy • contentʹ type(of:) Λ͔͚ͯ΋ɺݩͷViewͷType͸Θ͔Βͳ͍

41. OMG

42. ࡞ઓมߋ • ModifierΛ෼͚Δ • ֎࿮ͱ೚ҙͷϥϕϧΛ෇͚Δ LayoutInspectModifier • ֎࿮Λ෇͚ͭͭɺType໊Λදࣔ͢Δ TypeNameLayoutInspectModifier

43. LayoutInspecterΛมߋ

44. LayoutInspecter import SwiftUI struct LayoutInspector<Body: View>: View { private let

    _body: Body private let label: String private let color: Color init(body: Body, label: String, color: Color? = nil) { self._body = body self.label = label self.color = color ?? Color.random } var body: some View { ZStack(alignment: .topLeading) { self._body .layoutPriority(1.0) self._label } .border(color) } private var _label: some View { Text(label) .lineLimit(1) .font(.footnote) .foregroundColor(.primary) .background(color.opacity(0.7)) } }

45. LayoutInspectModifier

46. LayoutInspectModifier import SwiftUI struct LayoutInspectModifier: ViewModifier { private let color:

    Color? private let label: String init(color: Color? = nil, label: String = "") { self.color = color self.label = label } func body(content: Content) -> some View { LayoutInspector(body: content, label: label, color: color) } }

47. TypeNameLayoutInspectModifier

48. TypeNameLayoutInspectModifier import SwiftUI struct TypeNameLayoutInspectModifier<V: View>: ViewModifier { private let

    color: Color? private let _body: V init(color: Color? = nil, body: V) { self.color = color self._body = body } func body(content: Content) -> some View { LayoutInspector(body: content, label: String(describing: type(of: _body)), color: color) } }

49. ModifierΛద༻͢Δextension import SwiftUI extension SwiftUI.View { func layoutInspector(color: Color? =

    nil, label: String = "") -> some View { self .modifier(LayoutInspectModifier(color: color, label: label)) } func typeNameLayoutInspector(color: Color? = nil) -> some View { self .modifier(TypeNameLayoutInspectModifier(color: color, body: self)) } }

50. ࣮ߦʂ

51. ࣮ߦʂ

52. Αͦ͞͏

53. ࣮͸·ͩམͱ͕݀͠...

54. contentView.frame()

55. ViewModifierΛܦ༝͢ΔViewʹ TypeNameLayoutInspectModifier͸ ΍ͬͺΓյΕΔ

56. ࠓ೔͸͜͜·Ͱ

57. ·ͱΊ

58. ·ͱΊ • iPad͚ͩͰ΋ɺSwiftɺSwiftUIΛॻ͘͜ͱ͸Ͱ͖Δ • yutailang0119/LayoutInspector ͸ɺ΋͏ͪΐͬͱ࿅͖ͬͯ·͢ • LayoutInspectModifier୯ମͷΞϓϩʔν͸ѱ͘ͳͦ͞͏ • Swift

    Playgroundsͷ༻్͚ͩͰͳ͘ɺΞϓϦέʔγϣϯ։ൃͷσόοΨ ͱͯ͠ൃల͍ͤͨ͞ • ྫ͑͹ɺShake GestureΛरͬͯɺදࣔ/ඇදࣔΛ੾Γସ͑Δ౳

59. Reference • https://yutailang0119.hatenablog.com/entry/swiftui-with-swift-playgrounds • https://www.apple.com/swift/playgrounds/ • https://developer.apple.com/documentation/swift_playgrounds • https://developer.apple.com/xcode/swiftui/ •

    https://tech.d-itlab.co.jp/programming/1052/ • https://developer.apple.com/documentation/swiftui/viewmodifier • https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-custom-modifiers

60. &OKPZ
    4XJGU
    1MBZHSPVOET
    5IBOLT w NVUBZVUBSP!HNBJMDPN
    w IUUQTUXJUUFSDPNZVUBJMBOH
    w IUUQTHJUIVCDPNZVUBJMBOH