[SwiftUI] Stack

이번 포스팅에서는
SwiftUI에서 View를 배치하는 데
사용하는 ContainerView이자
하나의 View인
Stack에 대해서 알아보겠다.

UIStakcView 같은 역할인데

UIKit에서는
반복되는 view들의 정렬 같은 상황에서
개발자가 선택적으로 사용을 했다면

SwiftUI에서는
거의 필수적으로 사용을 함과 동시에
사용법도 매우 간단해졌다고 한다.

먼저 가로 방향으로 View들을 나열하는
Horizontal Stack에 대해 알아보겠다.

 

두개의 사각형 View를

가로 Stack으로 위치시키면 

하단과 같은 모습으로 나오게 된다.

HStack {
            Rectangle()
                .fill(Color.green)
                .frame(width: 100, height: 100, alignment: .center)
            Rectangle()
                .fill(Color.red)
                .frame(width: 100, height: 100, alignment: .center)
        }

 

HStack

ZStack과 HStack의 inint을 잠시 보자면
Stack 안에 들어가있는
content들의 정렬 방식을 지정하는 alignment,
content 사이의 간격을 지정하는 spacing,
content로 들어가있는 실제 content 가 있다.

각자 기본값이 정해저 있어
필요한 것만 선택적으로 값을 할당해도 된다.

 

spacing with VStack

VStack(spacing: 50) {
            Rectangle()
                .fill(Color.green)
                .frame(width: 100, height: 100, alignment: .center)
            Rectangle()
                .fill(Color.red)
                .frame(width: 100, height: 100, alignment: .center)
        }

 

VStack spacing 50

 

ZStack은 레이어 층을 생각하면 된다.

아래와 같이 녹색 View가 아래 

적색 View가 위에 놓인걸 보면 이해하기 쉽다.

 

또한 조금전 두개의 Stack과

조금 차이가 있다.

 

init에서도 HStack과 VStack은 

Stack 제약 특성상 하나의 alignment를 설정해주었다면

ZStack은 가로 정렬, 세로 정렬 두개다 설정 해줄수 있다.

 

ZStack

ZStack(alignment: Alignment(horizontal: .center, vertical: .center), content: {
            Rectangle()
                .fill(Color.green)
                .frame(width: 200, height: 200, alignment: .center)
            Rectangle()
                .fill(Color.red)
                .frame(width: 100, height: 100, alignment: .center)
        })

 

Stack은 View를 배치하는 데
사용하는 ContainerView이자
하나의 View 이므로
Stack에서도 아래와 같이

View 프로토콜이 가진
수식어들을 적용시킬 수 있다.

 

padding, border

HStack(spacing: 20) {
            Rectangle()
                .fill(Color.green)
                .frame(width: 100, height: 100, alignment: .center)
            Rectangle()
                .fill(Color.red)
                .frame(width: 100, height: 100, alignment: .center)
        }
        .padding()
        .border(Color.black)

 

 

 

또한 Stack 내부에 Text들의 font를

일괄적으로 적용시킬 수 있다.

다만 이같은 상황에서 

Placeholder1 과 같이

독립적으로 내부에서 font를 지정해준 이력이 있다면

stack을 통한 일괄적 적용범위에 속하지 않아 

.title 폰트를 적용하게 된다.

 

일괄 적용 & 우선순위

HStack(spacing: 20) {
            Text("Placeholder1")
                .font(.title)
            Text("Placeholder2")
            Text("Placeholder3")
        }
        .padding()
        .border(Color.black)
        .font(.caption2)

 

 

Spacer는 View 사이의 간격을 설정하거나
View의 크기를 확장할 용도로 사용되는
레이아웃을 위한 view이다.

Spacer를 Stack 외부에서
단독으로 사용할경우
SuperView가 제공하는 공간 내에서
가능한 최대 크기로 확장되며
보여지는 하나의 View로 사용된다.

하지만 HStack이나 VStack에서 사용될때는
보여지는 View가 아닌
공간만 차지해주는 역할을 수행하며
content 없이 단독으로 사용되면 Spacer는
아무역할을 하지 않는다.

 

 

HStack이나 VStack에서 단독 사용 ->  역할 X

var body: some View {
        HStack() {
            Spacer().background(Color.red)
        }
    }

 

Stack 외부에서 단독 사용 ->  최대 확장

var body: some View {
        Spacer().background(Color.yellow)
    }

 

 

아래와 같이 Stack 내부에서

단독 사용이 아닌 Text와 같이 사용 하게 된다면

View 사이의 공간을 채워 주는 역할만 수행한다.

(Spacer의 color를 지정해주었음에도 불구하고 시각적인 요소는 무시)

HStack() {
            Text("Placeholder2").background(Color.red)
            Spacer().background(Color.red)
            Text("Placeholder2").background(Color.blue)
        }

 

 

spacer의 frame도 적용이 가능하다.

HStack() {
            Text("Placeholder2").background(Color.red)
            Spacer().background(Color.red).frame(width: 100)
            Text("Placeholder2").background(Color.blue)
        }