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

• Yutaro Muta @yutailang0119 • Hatena Co., Ltd. @Kyoto • Conference Staff • builderscon 2020 • try! Swift Tokyo 2020 • and more Who am I ?

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

What's Swift Playgrounds?

What's Swift Playgrounds? • iPadΞϓϦ Swift Playground • Document: https://developer.apple.com/documentation/swift_playgrounds • ϝΠϯϢʔε͸ɺϓϩάϥϛϯάڭҭΒ͍͠

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

Run SwiftUI on Swift Playgrounds

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

Run SwiftUI on Swift Playgrounds

Run Swift Playgrounds file on Xcode

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

Run Swift Playgrounds file on Xcode

Pros/Cons of Swift Playgrounds

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

Cons of Swift Playgrounds • Xcodeʹൺ΂ΔͱɺΤσΟλ͸෺଍Γͳ͍ • ίϯύΠϧ • ૣ͘͸ͳ͍ • XcodeͷSwiftUI Canvas͸ͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛ஫ࢹ͢Δ͜ͱʹͳΔ

͓͠·͍

⚡͔͜͜Βຊฤ⚡

Cons of Swift Playgrounds • Xcodeʹൺ΂ΔͱɺΤσΟλ͸෺଍Γͳ͍ • ίϯύΠϧ • ૣ͘͸ͳ͍ • XcodeͷSwiftUI Canvas͸ͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛ஫ࢹ͢Δ͜ͱʹͳΔ

Cons of Swift Playgrounds • Xcodeʹൺ΂ΔͱɺΤσΟλ͸෺଍Γͳ͍ • ίϯύΠϧ • ૣ͘͸ͳ͍ • XcodeͷSwiftUI Canvas͸ͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛ஫ࢹ͢Δ͜ͱʹͳΔ <- AppleཔΉ

Cons of Swift Playgrounds • Xcodeʹൺ΂ΔͱɺΤσΟλ͸෺଍Γͳ͍ • ίϯύΠϧ • ૣ͘͸ͳ͍ • XcodeͷSwiftUI Canvas͸ͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛ஫ࢹ͢Δ͜ͱʹͳΔ <- AppleཔΉ

Cons of Swift Playgrounds • Xcodeʹൺ΂ΔͱɺΤσΟλ͸෺଍Γͳ͍ • ίϯύΠϧ • ૣ͘͸ͳ͍ • XcodeͷSwiftUI Canvas͸ͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛ஫ࢹ͢Δ͜ͱʹͳΔ <- AppleཔΉ

Cons of Swift Playgrounds • Xcodeʹൺ΂ΔͱɺΤσΟλ͸෺଍Γͳ͍ • ίϯύΠϧ • ૣ͘͸ͳ͍ • XcodeͷSwiftUI Canvas͸ͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛ஫ࢹ͢Δ͜ͱʹͳΔ ^ | Ͳ͏ʹ͔Ͱ͖ͦ͏

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

LayoutInspector

LayoutInspector import SwiftUI struct LayoutInspector: 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) } }

LayoutInspector

׬ᘳ

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

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(_:) ͱ૊Έ߹Θͤͯ࢖͏

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

Extension SwiftUI.View import SwiftUI extension SwiftUI.View { func labelPrimary() -> some View { self .modifier(PrimaryLabel()) } }

Custom ViewModifier

ͳΔ΄ͲɺΑͦ͞͏ͩ

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

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

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) } }

LayoutInspectModifier (α)

_ViewModifier_Content LayoutInspectModifier (α)

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.

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

OMG

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

LayoutInspecterΛมߋ

LayoutInspecter import SwiftUI struct LayoutInspector: 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)) } }

LayoutInspectModifier

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) } }

TypeNameLayoutInspectModifier

TypeNameLayoutInspectModifier import SwiftUI struct TypeNameLayoutInspectModifier: 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) } }

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)) } }

࣮ߦʂ

࣮ߦʂ

Αͦ͞͏

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

contentView.frame()

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

ࠓ೔͸͜͜·Ͱ

·ͱΊ

·ͱΊ • iPad͚ͩͰ΋ɺSwiftɺSwiftUIΛॻ͘͜ͱ͸Ͱ͖Δ • yutailang0119/LayoutInspector ͸ɺ΋͏ͪΐͬͱ࿅͖ͬͯ·͢ • LayoutInspectModifier୯ମͷΞϓϩʔν͸ѱ͘ͳͦ͞͏ • Swift Playgroundsͷ༻్͚ͩͰͳ͘ɺΞϓϦέʔγϣϯ։ൃͷσόοΨ ͱͯ͠ൃల͍ͤͨ͞ • ྫ͑͹ɺShake GestureΛरͬͯɺදࣔ/ඇදࣔΛ੾Γସ͑Δ౳

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

&OKPZ4XJGU1MBZHSPVOET 5IBOLT w NVUBZVUBSP!HNBJMDPN w IUUQTUXJUUFSDPNZVUBJMBOH w IUUQTHJUIVCDPNZVUBJMBOH