최근 Flutter가 좀 지루해져서 – 지루해진 이유는 다음에 쓰기로 하고 – iOS 네이티브 개발을 다시 해보고 싶다는 충동(?)에 SwiftUI 스터디를 시작했다. iOS 개발은 Obj-C 부터 거의 10여년을 하고 있지만 아직 SwiftUI를 써보지 못해서 아래 링크의 튜토리얼을 따라해보고 대략의 감을 잡을 수 있었다.
아래 링크를 따라가면 SwiftUI의 기본적인 Interface에 대한 이해를 얻을 수 있다.
https://developer.apple.com/tutorials/swiftui/creating-and-combining-views
각설하고… 아래 코드는 iOS의 대표적인 UI인 탭바네비게이션 셈플코드이다. Xib 파일도 없고 폼디자이너도 없다. 이렇게 심플하게 코드를 만들 수 있는데 그동안 왜 그렇게 했는지 이해 할 수 없지만… 매우 만족 스럽다. Group, VStack, HStack 등을 이용해서 뷰 상세를 꾸미다보면 CSS에서 본것 같기도 하고 Flutter 에서 본것 같기도한데 각종UI 프레임워크의 좋은 점을 잘 가져와서 만들었다는 생각이 들었다.
//
// ContentView.swift
// study1
//
// Created by Park Billy on 2021/04/20.
//
import SwiftUI
struct View1: View {
var body: some View {
// 네이게이션뷰로 만들어 줘야 BarTitle을 만들며 상세뷰로 이동 할 수 있다.
NavigationView {
// DetailView로 이동
NavigationLink(destination: DetailView()){
Text("Go Detail View")
}
.navigationBarTitle("첫번째뷰")
}
.tabItem { // 탭바 타이틀과 아이콘
Text("View1")
Image(systemName: "tray.full")
}
}
}
struct View2: View {
var body: some View {
NavigationView {
Text("Hello View2")
.navigationBarTitle("두번째뷰")
}
.tabItem {
Text("View2")
Image(systemName: "tray")
}
}
}
struct DetailView: View {
var body: some View {
Text("Hello Detail View")
.navigationBarTitle("상세뷰")
}
}
struct ContentView: View {
var body: some View {
// 탭바를 만든다 ... 이렇게 간단히?
TabView {
View1()
View2()
}
}
}
아래는 실행 결과 – 첫번째뷰에서 [Go Detail View]를 누르면 상세뷰로 이동한다. 상세뷰는 상단에 네비게이션 타이틀이 뷰 스크롤되면 자동으로 상단으로 붙어올라가는 기능이 있다. 그리고 빌드하지 않아도 Xcode에서 프리뷰를 볼 수도 있다.
오랜만에 네이티브로 스토어에 앱을 하나 올려야겠다고 생각했다.
