[IOS - Swift] ZStack & Overlay

서프로·2023년 5월 2일

ZStack 과 Overlay는 무엇일까? 🤔

SwiftUI를 사용하다 보면 ZStack과 Overlay를 마주친 경험이 있을 것이다.
먼저 ZStack과 Overlay는 뷰를 겹치는데 사용하는 공통점이 있다.
하지만 동작방식에 있어서 차이점이 있다.

Overlay

오버레이는 현재뷰를 기준으로 하위뷰를 얹어준다.
다시말해, 현재뷰와 하위뷰가 연관이 있다고 말할 수 있고, 다른 뷰에는 영향을 끼치지 않는다고 한다.
이 말은 상위뷰를 꾸며준다고 생각하면 될 것 같다.

Overlay 사용법

struct ContentView: View {
    
    var body: some View {
        VStack {
            Circle()
                .fill(.gray)
                .frame(width: 80, height: 80)
                .overlay(
                    Image(systemName: "camera.circle")
                        .resizable()
                        .frame(width: 24, height: 24)
                        .foregroundColor(.blue)
                        .offset(x: 30, y: 30)
                )
        }
    }
}

ZStack

ZStack은 Overlay와 비슷하지만 직접적으로 다른 뷰와 연관성이 없도록 UI를 구성할 때 좋다고한다.
다만 자신의 하위 뷰를 기준삼아 오버레이되는 것이라 하위 뷰에 크기에 따라 ZStack 뷰의 크기도 변한다.
그리고 ZStack의 하위뷰들은 상위뷰와는 상관없이 독립적으로 구성된다.
아래의 코드와 예시 사진을 보면 이해하기 쉬울 것 같다.

ZStack 사용법

아래와 같이 Overlay와 같은 코드를 구성해 보았다.

struct ContentView: View {
    
    var body: some View {
        ZStack {
            Circle()
                .fill(.gray)
                .frame(width: 80, height: 80)
            
            Image(systemName: "camera.circle")
                .resizable()
                .frame(width: 24, height: 24)
                .foregroundColor(.blue)
                .offset(x: 30, y: 30)
        }
        .background(.red)
    }
}

ZStack의 백그라운드 컬러를 빨간색으로 주었다.
Circle의 크기에 따라 가로 80, 세로 80 만큼의 크기를 가지게 된것을 확인할 수 있다.
Circle의 크기를 더 크게 늘려 보면 어떻게 될까 ?

위 사진은 가로를 그대로 두고 세로길이를 150만큼 늘린 사진이다.
사진과 같이 ZStack의 세로길이가 150만큼 더 커진걸 볼 수 있다.

이렇게 하위 뷰들의 크기에 따라 ZStack의 크기가 변한다는 점이 Overlay와 다른 부분이다!

ZStack과 Overlay의 차이

위의 설명가지고 명확하게 ZStack과 Overlay의 차이점을 모를수 있을것 같다라는 생각이 들어
좀 더 예시를 들어보려고 한다.

SwiftUI에는 어떠한 뷰를 앞에 둘지 설정할 수 있는 zindex가 있다.
zindex를 사용하면 좀 더 명확하게 설명이 될 것 같다.

struct ContentView: View {
    
    var body: some View {
        Circle()
            .fill(.gray)
            .frame(width: 80, height: 80)
            .zIndex(1)
            .overlay(
                Circle()
                    .fill(.blue)
                    .frame(width: 80, height: 80)
                    .offset(x: 20, y: 20)
            )
    }
}

Overlay를 사용했을 때는 zindex(1)값을 주어도 회색 뷰 위에 파란색 뷰가 얹어 지는걸 볼 수 있다.

struct ContentView: View {
    
    var body: some View {
        ZStack{
            Circle()
                .fill(.gray)
                .frame(width: 80, height: 80)
                .zIndex(1)
            
            Circle()
                .fill(.blue)
                .frame(width: 80, height: 80)
                .offset(x: 20, y: 20)
        }
    }
}