SwiftUI 폼과 스크롤 뷰

이번에는 SwiftUI에서 폼과 스크롤 뷰를 어떻게 사용하는지 알아보겠습니다. 이 강좌는 Swift 기본 문법을 숙지하고 있다는 가정 하에 작성되었습니다.

Form 기본

SwiftUI의 Form은 HStack이나 VStack과 같은 컨테이너와 비슷하게 작동합니다. 즉, Form 안에 여러 뷰를 넣을 수 있다는 것입니다. 단지, 특정 컨트롤 요소에 대해 더 보기 좋고 잘 작동하게 해줍니다.

다음 예시를 보면, 네비게이션 뷰 안에 Form이 있고, 그 안에 토글 스위치와 버튼이 있습니다. 실행해보면, 토글 스위치와 버튼이 차례대로 담기는 것을 볼 수 있습니다.

struct ContentView : View {
    @State var toggling = false
    var body: some View {
        NavigationView {
            Form {
                Toggle(isOn: $toggling) {
                    Text("Toggly")
                }
                Button(action: {
                }) {
                    Text("Save changes")
                }
            }.navigationBarTitle(Text("Settings"))
        }
    }
}

섹션 나누기

Form의 섹션을 나누기 위해서는 Form 안에서 Section 별로 구분 지어주면 됩니다. 다음 예시는 Form을 두 개의 Section으로 나눴는데요. 하나의 섹션에는 토글 스위치와 footer가 있고, 다른 섹션에는 버튼이 있습니다. 실행해보면, 섹션이 나뉘어 있는 것을 볼 수 있습니다.

struct ContentView : View {
    @State var toggling = false
    var body: some View {
        NavigationView {
            Form {
                Section(footer: Text("footer")) {
                    Toggle(isOn: $toggling) {
                        Text("Toggly")
                    }
                }
                Section {
                    Button(action: {
                    }) {
                        Text("Save changes")
                    }
                }
            }.navigationBarTitle(Text("Settings"))
        }
    }
}

폼 활성화 및 비활성화

Form의 특정 뷰를 활성 또는 비활성 할 수 있는데요. Toggle 스위치에 따라 toggling 변수에 담기는 bool 값이 변경되고, 그 값이 버튼 뷰의 활성화 여부를 결정합니다. 실행해보면, 토글 스위치에 따라 버튼이 활성화 되는 것을 볼 수 있습니다.

struct ContentView : View {
    @State var toggling = false
    var body: some View {
        NavigationView {
            Form {
                Section(footer: Text("footer")) {
                    Toggle(isOn: $toggling) {
                        Text("Toggly")
                    }
                }
                Section {
                    Button(action: {
                    }) {
                        Text("Save changes")
                    }.disabled(!toggling)
                }
            }.navigationBarTitle(Text("Settings"))
        }
    }
}

폼 숨기기

Form 안의 view를 비활성화 하는 것 뿐만 아니라, 아예 숨길 수도 있습니다. 다음과 같이 토글 스위치 변수의 값에 따라 또 다른 토글 스위치의 보이고 안 보이고를 결정할 수 있는데요. if 문을 사용하면 됩니다. 실행해보면, 토글 스위치에 따라 다른 토글 스위치가 숨겨집니다.

struct ContentView : View {
    @State var showingAdvancedOptions = false
    @State var toggling = false
    var body: some View {
        Form {
            Section {
                Toggle(isOn: $showingAdvancedOptions) {
                    Text("Show advanced options")
                }
                if showingAdvancedOptions {
                    Toggle(isOn: $toggling) {
                        Text("Toggly")
                    }
                }
            }
        }
    }
}

스크롤 뷰

SwiftUI에서의 스크롤 뷰는 매우 간단합니다. 그저 ScrollView(){} 안에, 추가할 다른 view를 넣으면 됩니다. 실행해보면, 이미지와 텍스트 뷰가 스크롤 되는 것을 볼 수 있습니다.

struct ContentView : View {
    var body: some View {
        ScrollView() {
            Image("cover")
            Text("Hello Hohyeon")
        }
    }
}

마무리

이렇게 해서 SwiftUI에서는 스크롤 뷰를 어떻게 만드는지에 대해 알아봤는데요. 다음에는 SwiftUI에서 Picker를 어떻게 사용하는지 알아보겠습니다.

관련 글