[SwiftUI] ZStack, overlay, background

안녕하세요 지호구 입니다~
 
오늘은 SwiftUI에서 View를 Z축으로 쌓는 방법에 대해 알아보려고 합니다
SwiftUI에서는 3가지 방법이 있습니다
 
1. ZStack
2. overlay
3. background
 
 
순서대로 알아가봅시다
 

1. ZStack

공식 문서 - ZStack
 
VStack, HStack과 마찬가지로 Stack 안에 View를 원하는 순서대로 배치하면 됩니다

ZStack의 경우 순서가 밑으로 갈수록 앞으로 옵니다

ZStack {
    Rectangle()
        .fill(.blue)
        .frame(width: 100, height: 100)

    Text("안녕하세요")
        .foregroundStyle(.white)
}

 

Rectangle 위에 Text가 올라온 것을 확인할 수 있습니다.
 
 
 

2. overlay

공식 문서 - overlay
struct인 ZStack과는 다르게 ViewModifier입니다.
ViewModifier에 대해선 추후에 다루겠습니다!

쉽게 설명하면, .foregroundStyle()이나, .padding()과 같이 View에 점으로 달리는 녀석들입니다.
사용법은 크게 다르지 않습니다.

Rectangle()
    .fill(.blue)
    .frame(width: 100, height: 100)
    .overlay {
        Text("안녕하세요")
            .foregroundStyle(.white)
    }

 
 

똑같은 결과가 나오는 것을 확인할 수 있습니다.

그렇다면 의문이 하나 생길 수도 있습니다.
 

"그럼 무슨 기준으로 ZStack을 쓰고 overlay를 쓰죠?.."

저도 혼동이 왔었는데요, 한 가지 큰 차이점이 있습니다.
ZStack은 자식 View들 중 가장 큰 frame 값을 기준으로 frame이 맞춰지는 것이고,
overlay는 부모 View의 frame이 SubView에 영향을 받지 않습니다.

또한 overlay는 부모 View의 앞으로만 View를 배치할 수 있습니다.

 

즉, overlay는 View를 앞으로만 쌓는 frame이 고정된 ZStack 입니다.

ZStack으로 나열하는 것 보다는 어느 View의 앞에 있는지 명시되어서 가독성이 좋은 것 같습니다.
 

이를 확인하기 위해 ZStack에서 Text의 width를 200으로 늘려보겠습니다.

ZStack {
    Rectangle()
        .fill(.clear)
        .frame(width: 100, height: 100)

    Text("안녕하세요")
    	.foregroundStyle(.white)
        .frame(width: 200)
}
.background(.gray)
.padding()

 

 

ZStack의 width가 Text의 width에 맞춰져서 넓어진 것을 확인할 수 있습니다.
 
 

이번엔 overlay에 대해서 확인해 볼까요?

VStack {
    Rectangle()
        .fill(.clear)
        .frame(width: 100, height: 100)
        .overlay {
            Text("안녕하세요")
                .foregroundStyle(.white)
                .frame(width: 200)
        }
}
.background(.gray)
.padding()

 

 

 

ZStack과 다르게 아무런 변화가 없습니다.
좀 더 자세한 확인을 위해 Text에 배경색을 넣어보겠습니다.

 

Text의 width가 넓어졌음에도 상위 View의 frame이 Text에 맞춰지지 않고, Rectangle에 맞춰져 있음을 확인할 수 있습니다.
 

 

3. background

overlay와 마찬가지로 ViewModifier입니다.
이름에서 유추할 수 있듯이 View의 뒤에 View를 추가해 줄 수 있습니다.

Rectangle()
    .fill(.blue)
    .frame(width: 100, height: 100)
    .background {
        Text("안녕하세요")
            .foregroundStyle(.white)
            .frame(width: 200)
    }

 

 

background 도 overlay와 같이 부모 View의 frame이 자식 View의 frame에 영향을 받지 않습니다

 
 

 

정리

ZStack

View를 앞뒤로 배치할 수 있는 Stack.

frame을 지정해주지 않으면 frame이 자식 View의 frame에 영향을 받는다.

overlay

View를 앞으로만 배치할 수 있는 Stack.

부모 View의 frame이 자식 View의 frame에 영향을 받지 않는다.
항상 부모 View의 앞에 자식 View를 띄워준다. (zIndex로 부모 View와 순서 변경 불가능)
 

background

View를 뒤로만 배치할 수 있는 Stack.

부모 View의 frame이 자식 View의 frame에 영향을 받지 않는다.
항상 부모 View의 뒤에 SubView를 띄워준다. (zIndex로 부모 View와 순서 변경 불가능)
 
 
 
 
여기까지 ZStack, overlay, background에 대해 알아보았습니다.
부족한 글솜씨지만 읽어주셔서 감사합니다.
즐거운 하루 보내세요.