カンファレンスアプリをSwiftUIで作った

Flutter製のMTC2018アプリをSwiftUIで作り直した話です。

Transcript

1. ΧϯϑΝϨϯεΞϓϦ ΛSwiftUIͰ࡞ͬͨ Masamchi Ueta potatotips #67
2. ࣗݾ঺հ • ্ాխಓ(Masamichi Ueta) • GitHub(@masamichiueta), Twitter(@masamichiueta) • ϝϧϖΠ iOS
4. Mercari Tech Conf 2018 ΞϓϦ
5. SwiftUI
6. OSS ✓ MVVM ✓ μʔΫϞʔυ ✓ ϩʔΧϥΠζ ✓ AppleͰαΠϯΠϯ https://github.com/mercari/mtc2018-app-SwiftUI
7. 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) )
8. 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)) } }
9. ಉ͡Row͔Βෳ਺ͷը໘ʹભҠ ͢Δʹ͸ʁ
10. List + NavigationLink NavigationView { List(0..<10) { _ in VStack { NavigationLink(destination: Text("NavigationLink1")) { Text("NavigationLink1") } NavigationLink(destination: Text("NavigationLink2")) { Text("NavigationLink2") } } } }
12. ScrollView+NavigationLink NavigationView { ScrollView { ForEach(0..<10) { _ in VStack { NavigationLink(destination: Text("NavigationLink1")) { Text("NavigationLink1") } NavigationLink(destination: Text("NavigationLink2")) { Text("NavigationLink2") } Divider() } } } }
14. 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)
15. 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ͱ͍͏ϝοηʔδ͸ग़Δ)
16. ͦͷଞ • ϦϞʔτը૾ͷऔಘɺΩϟογϡ • MVVMʢࢀߟ: https://github.com/kitasuke/SwiftUI-MVVM • WebViewʢWKWebViewʣ • ActivityIndicator
17. ײ૝ • SwiftUI͸࡞Γ΍͔ͬͨ͢(Declarative, Component) • ίϯϙʔωϯτ଍Γͳ͍ɺࢥΘ͵ಈ࡞Λ͢Δ৔߹͕͋Δ • Flutterͷํ͕νϡʔτϦΞϧ΍ίϯϙʔωϯτ͕ॆ࣮ͯ͠ ͍ͨͷͰɺ࡞Γ΍͔ͬͨ͢ؾ͕͢Δ • SwiftUI΋΋ͬͱαϯϓϧ΍Tips͕ग़͖ͯͯཉ͍͠
18. ͋Γ͕ͱ͏͍͟͝·ͨ͠ • 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