Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

E2677c8861e7d02039ebb14e48dbd7be?s=128

Masamichi Ueta

December 17, 2019
Tweet

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