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

Transcript

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

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

3. None

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") } } } }
11. None

12. ScrollView+NavigationLink NavigationView { ScrollView { ForEach(0..<10) { _ in VStack

    { NavigationLink(destination: Text("NavigationLink1")) { Text("NavigationLink1") } NavigationLink(destination: Text("NavigationLink2")) { Text("NavigationLink2") } Divider() } } } }
13. None

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