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