SwiftUI 뷰 시스템 (SwiftUI 강좌)

Dark Mode

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

VStack HStack 사용하기

하나의 뷰를 리턴해야 하기 때문에 다음과 같이 코드를 작성하면 안 됩니다.

var body: some View {
    Text("SwiftUI")
    Text("Munon")
}

두 개 이상의 뷰를 사용하기 위해서는 다음과 같이 VStack 혹은 HStack을 감싸면 됩니다. VStack은 Vertical Stack, HStack은 Horizontal Stack으로 각각 세로와 가로 스택입니다.

VStack {
    Text("SwiftUI")
    Text("Munon")
}

HStack {
    Text("SwiftUI")
    Text("Munon")
}

스택 레이아웃 지정

스택 안에 있는 뷰들 간의 간격을 주기 위해서는 spacing을 사용하면 됩니다.

VStack(spacing: 50) {
    Text("SwiftUI")
    Text("Munon")
}

적당한 간격을 주는 또 다른 방법에는 Divider()도 있습니다.

VStack {
    Text("SwiftUI")
    Divider()
    Text("Munon")
}

스택 안에 있는 뷰를 정렬하기 위해는 alignment를 다음과 같이 사용하면 됩니다.

VStack(alignment: .leading) {
    Text("SwiftUI")
    Text("Munon")
}

뷰 사이에 간격 주기

적당한 간격(padding)을 주기 위해서는 padding()을 사용하면 되는데요. padding에 인자 값을 전달하지 않으면 시스템 기본값으로 자동 적용되고,

VStack {
    Text("SwiftUI")
        .padding()
    Text("rocks")
}

인자 값을 전달하면, 다음과 같이 원하는 위치에 원하는 간격을 줄 수 있습니다.

Text("SwiftUI")
    .padding(.bottom, 100)

ZStack 사용하기

ZStack은 또 다른 스택 뷰로, 뷰를 겹칠 때 사용하면 되는데요. 다음 코드는 어떠한 결과를 만들까요? 이미지와 텍스트가 포개지게 됩니다.

ZStack() {
    Image("image-name")
    Text("Munon")
}

다양한 뷰 타입 리턴

some View는 특정한 하나의 뷰 타입이 리턴한다고 이해합니다. 그렇기 때문에 다음과 같은 다양한 뷰 타입을 한 번에 리턴할 수 없습니다.

var body: some View {
    if Bool.random() {
        Image("image-name")
    } else {
        Text("fail")
    }
}

이런 상황을 해결하는 1번째 방법은 다음과 같이 Group으로 감싸주는 것입니다.

var body: some View {
    Group {
        if Bool.random() {
            Image("image-name")
        } else {
            Text("fail")
        }
    }
}

2번째 방법은 AnyView로 각각의 View를 감싸서 특정한 리턴 View 타입을 없애는 것입니다.

var body: AnyView {
    if Bool.random() {
        return AnyView(Image("image-name"))
    } else {
        return AnyView(Text("fail"))
    }
}

Safe Area

기본적으로 SwiftUI의 View는 Safe Area 안에 배치됩니다. Safe Area를 넘고 싶다면, .edgesIgnoringSafeArea를 사용하면 됩니다.

Text("Hello World")
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    .background(Color.yellow)
    .edgesIgnoringSafeArea(.all)

마무리

이렇게 해서 SwiftUI에서는 뷰 시스템을 어떻게 이용하는지에 대해 알아봤는데요. 다음에는 SwiftUI에서 텍스트필드를 어떻게 다루는지 알아보겠습니다. 궁금한 점은 댓글로 남겨주세요!

댓글

Please enter your comment!
Please enter your name here