Tweet
Tweet

Slide 1

Slide 1 text

ΧϯϑΝϨϯεΞϓϦ ΛSwiftUIͰ࡞ͬͨ Masamchi Ueta potatotips #67

Slide 2

Slide 2 text

ࣗݾ঺հ • ্ాխಓ(Masamichi Ueta) • GitHub(@masamichiueta), Twitter(@masamichiueta) • ϝϧϖΠ iOS

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Mercari Tech Conf 2018 ΞϓϦ

Slide 5

Slide 5 text

SwiftUI

Slide 6

Slide 6 text

OSS ✓ MVVM ✓ μʔΫϞʔυ ✓ ϩʔΧϥΠζ ✓ AppleͰαΠϯΠϯ https://github.com/mercari/mtc2018-app-SwiftUI

Slide 7

Slide 7 text

Widget → View Container( padding: EdgeInsets.fromLTRB(8.0, 4.0, 12.0, 8.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(100.0), border: const Border( top: const BorderSide(width: 1.0, color: kMtcSecondaryRed), left: const BorderSide(width: 1.0, color: kMtcSecondaryRed), bottom: const BorderSide(width: 1.0, color: kMtcSecondaryRed), right: const BorderSide(width: 1.0, color: kMtcSecondaryRed), )), child: Text(" # $tag", style: TextStyle(color: kMtcSecondaryRed) )

Slide 8

Slide 8 text

Widget → View struct TagView: View { let tag: String let color: Color var body: some View { Text("# \(tag)") .foregroundColor(color) .font(.system(size: 14)) .padding(EdgeInsets(top: 4, leading: 8, bottom: 6, trailing: 8)) .background(Color.clear) .overlay(RoundedRectangle(cornerRadius: 100).stroke(lineWidth: 1).foregroundColor(color)) } }

Slide 9

Slide 9 text

ಉ͡Row͔Βෳ਺ͷը໘ʹભҠ ͢Δʹ͸ʁ

Slide 10

Slide 10 text

List + NavigationLink NavigationView { List(0..<10) { _ in VStack { NavigationLink(destination: Text("NavigationLink1")) { Text("NavigationLink1") } NavigationLink(destination: Text("NavigationLink2")) { Text("NavigationLink2") } } } }

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

ScrollView+NavigationLink NavigationView { ScrollView { ForEach(0..<10) { _ in VStack { NavigationLink(destination: Text("NavigationLink1")) { Text("NavigationLink1") } NavigationLink(destination: Text("NavigationLink2")) { Text("NavigationLink2") } Divider() } } } }

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

PageView PageView([ ScrollView(.vertical, showsIndicators: true) { ForEach(viewModel.trackASessions, id: \.id) { session in VStack { TimeTableRow(session: session) Divider() } } }, ScrollView(.vertical, showsIndicators: true) { ForEach(viewModel.trackBSessions, id: \.id) { session in VStack { TimeTableRow(session: session) Divider() } } } ], currentPage: $page)

Slide 15

Slide 15 text

PageView+pop… • ެࣜνϡʔτϦΞϧͷPageView • Interfacing with UIKit • https://developer.apple.com/tutorials/swiftui/interfacing- with-uikit • NavigationLinkΛஔ͍ͯPop͢ΔͱXcode11.2.1ͰΫϥογϡ • ͱࢥͬͨΒXcode11.3ͰΫϥογϡ͠ͳ͘ͳ͍ͬͯͨ(Trying to pop to a missing destinationͱ͍͏ϝοηʔδ͸ग़Δ)

Slide 16

Slide 16 text

ͦͷଞ • ϦϞʔτը૾ͷऔಘɺΩϟογϡ • MVVMʢࢀߟ: https://github.com/kitasuke/SwiftUI-MVVM • WebViewʢWKWebViewʣ • ActivityIndicator

Slide 17

Slide 17 text

ײ૝ • SwiftUI͸࡞Γ΍͔ͬͨ͢(Declarative, Component) • ίϯϙʔωϯτ଍Γͳ͍ɺࢥΘ͵ಈ࡞Λ͢Δ৔߹͕͋Δ • Flutterͷํ͕νϡʔτϦΞϧ΍ίϯϙʔωϯτ͕ॆ࣮ͯ͠ ͍ͨͷͰɺ࡞Γ΍͔ͬͨ͢ؾ͕͢Δ • SwiftUI΋΋ͬͱαϯϓϧ΍Tips͕ग़͖ͯͯཉ͍͠

Slide 18

Slide 18 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ • Flutter੡MTC2018ΞϓϦΛSwiftUIͰϦϥΠτͨ͠࿩ʢϝ ϧΧϦ ΞυϕϯτΧϨϯμʔ7೔໨ʣby @jollyjoaster • https://tech.mercari.com/entry/2019/12/07/090000 • mercari/mtc2018-app-SwiftUI • https://github.com/mercari/mtc2018-app-SwiftUI