[SwiftUI] Zstack 알아보기

September 28, 2021 1 minute read

Hstack, Vstack은 UIKit을 활용할 때에도 Horizontal stack, Vertical stack을 사용했던 기억에 비슷하다고 느꼈는데 Zstack은 처음 만났습니다. 그래서 이번 시간에는 Zstack이 무엇인지 알아보려고 합니다.

Zstack이란?

Zstack의 z는 x, y, z축을 말할 때의 z입니다. 우리가 3차원을 배울 때 z축이 등장하죠. 우리가 보는 화면은 가로, 세로 2차원인데 핸드폰 화면에 놓인 뷰 위에 다른 뷰를 쌓아가는 것을 z축이라고 생각하면 됩니다.

그렇게 생각하면 Zstack은 자식 뷰(child view)들이 화면에 스택처럼 쌓이는 구조를 의미합니다. 그말은 뒤에 나오는 자식 뷰가 그 전의 자식 뷰 위에 쌓이는 structure를 의미합니다. 아래 apple 문서의 예제 코드를 보면서 이해해 봅시다.

let colors: [Color] =
    [.red, .orange, .yellow, .green, .blue, .purple]

var body: some View {
    ZStack {
        ForEach(0..<colors.count) {
            Rectangle()
                .fill(colors[$0])
                .frame(width: 100, height: 100)
                .offset(x: CGFloat($0) * 10.0,
                        y: CGFloat($0) * 10.0)
        }
    }
}

color 프로퍼티를 활용해 6색의 동일한 크기의 정사각형을 만들어 Zstack 에 넣었습니다. 그렇게 되면 아래와 같이 빨강, 주황, 노랑, 초록, 파랑, 보라 순으로 화면 위에 쌓이게 되는 것을 확인할 수 있습니다.

zstack2

만일 아래의 코드처럼 offset() modifier method를 생략한다면 이전과 동일하게 빨강, 주황, 노랑, 초록, 파랑, 보라 순으로 뷰가 쌓이지만 모두 겹쳐진 상태라 다음과 같이 보라색만 보이게 되는 것을 알 수 있습니다.

let colors: [Color] =
    [.red, .orange, .yellow, .green, .blue, .purple]

var body: some View {
    ZStack {
        ForEach(0..<colors.count) {
            Rectangle()
                .fill(colors[$0])
                .frame(width: 100, height: 100)
               // .offset(x: CGFloat($0) * 10.0,
               //         y: CGFloat($0) * 10.0)
        }
    }
}

zstack

Zstack은 Alignment (정렬) 속성을 사용해 Zstack에 속한 자식 뷰들을 쌓아나갈 때 x축과 y축의 정렬 기준을 결정할 수 있습니다. 기본값은 center 입니다. Alignment 의 종류는 다음과 같습니다.

A table showing the various alignment guides next to each

apple문서의 아래의 예제를 하나 보겠습니다.

var body: some View {
    ZStack(alignment: .bottomLeading) {
        Rectangle()
            .fill(Color.red)
            .frame(width: 100, height: 50)
        Rectangle()
            .fill(Color.blue)
            .frame(width:50, height: 100)
    }
    .border(Color.green, width: 1)
}