Overlay & ZStack

안녕하세요. 그린입니다🟢

이번 포스팅에서는 Overlay와 ZStack에 대해 학습해보겠습니다🧑🏻‍💻

 

왜 알아야하죠?

SwiftUI로 뷰를 구성하다보면 Overlay와 ZStack이 비슷한 기능을 해준다는 인식을 받았습니다.

동일하게 뷰 위에 다른 어떠한 UI를 얹어주는것이죠.

그런데 분명한 두 방식의 차이가 있는데 알아보길 미루다가 이제야 알아보게 되었습니다🥲

그럼 어떤점에서 비슷하고 차이가 있는지 그리고 뷰가 어떻게 얹어져 보이게 되는지 알아보겠습니다!

 

Overlay

우선 오버레이에 대해 알아보겠습니다.

오버레이는 현재 뷰를 기준으로 하위 뷰를 얹어줍니다.

즉 바로 상위 뷰와 하위 뷰가 연관성이 있다고 볼 수 있으며 다른 뷰에는 영향을 끼치지 않습니다.

즉 전체적인 뷰의 요소로 자리잡아 구성되기 보다는 바로 상위 뷰를 꾸며주는 역할로 많이 쓰입니다.

요런식으로 초록색 둥근 사각형 뷰에 "오버레이 텍스트"가 오버레이 될 수 있습니다.

물론 해당 텍스트뷰의 백그라운드로 지정할 수 도 있지만 그렇게 할 수 없는 경우도 많기에 위와 같을때는

저는 주로 오버레이하여 사용합니다.

 

Overlay 사용법

오버레이 사용법은 간단합니다.

위의 뷰를 구성하려는 예시로 들때 아래와 같이 코드를 작성할 수 있습니다.

struct ContentView: View {
  var body: some View {
    Rectangle()
      .fill(Color.green)
      .frame(width: 150, height: 50)
      .cornerRadius(10)
      .overlay(Text("오버레이 텍스트"))
  }
}

만약 백그라운드 지정으로만 아래같이 해준다면 이렇게 됩니다.

Text("오버레이 텍스트")
  .background(Color.green)
  .cornerRadius(10)

원하는 그림이 아니죠? 이럴 경우 저는 Overlay를 사용합니다.

 

ZStack

ZStack은 Overlay와 비슷하지만 직접적으로 다른 뷰와 연관성이 없도록 UI를 구성할때 좋습니다.

다만 자신의 하위 뷰를 기준삼아 오버레이되는 것이라 하위 뷰에 크기에 따라 ZStack 뷰의 크기도 변합니다.

사실 오버레이와 백그라운드를 통해 ZStack을 구현해낼 수 있습니다.

그럼 어떻게 ZStack뷰의 크기가 변하는지 사용법을 보면서 같이 테스트 해보겠습니다.

 

ZStack 사용법

아래와 같이 ZStack을 선언하고 하위 뷰들을 구성해줄 수 있습니다.

struct ContentView: View {
  var body: some View {
    ZStack {
      Rectangle()
        .fill(Color.green)
        .frame(width: 150, height: 30)
        .cornerRadius(10)
      Text("오버레이 텍스트")
    }
  }
}

지금과 같이 하위 사각형 뷰의 높이를 30으로 지정해주고 텍스트를 얹어주어 아래와 같이 ZStack은 높이가 30일 겁니다.

저 사각형 테두리 보이시죠?

저게 ZStack의 프레임입니다.

하위 뷰들로 프레임 사이즈가 결정되죠?

그럼 height를 100으로 올려볼께요!

자 ZStack의 프레임 높이가 100으로 증가하죠?

이 부분이 Overlay와 다른점입니다.

하위 뷰들의 크기에 따라 ZStack의 크기가 변한다🤯

 

Overlay와 ZStack의 차이

아직 확연하게 차이를 모를 수 있어요.

그럼 단편적으로 사각형 뷰 2개를 올려서 상위 뷰의 프레임 차이를 확인해볼께요.

1. Overlay

Rectangle()
  .fill(Color.green)
  .frame(width: 100, height: 100)
  .cornerRadius(10)
  .zIndex(1)
  .overlay(
    Rectangle()
	  .fill(Color.yellow)
	  .frame(width: 100, height: 100)
	  .cornerRadius(10)
	  .offset(x: 20, y: 20)
  )

zIndex는 어떤 뷰를 프론트에 둘건지 정해줍니다.

이렇게 해줘도 오버레이는 아래와 같이 노란 하위 오버레이 뷰가 위에 올라옵니다.

2. ZStack

그렇다면 ZStack은 어떻게 될까요?

똑같이 가정해주겠습니다.

ZStack {
  Rectangle()
    .fill(Color.green)
    .frame(width: 100, height: 100)
    .cornerRadius(10)
    .zIndex(1)
  Rectangle()
    .fill(Color.yellow)
    .frame(width: 100, height: 100)
    .cornerRadius(10)
    .offset(x: 20, y: 20)
}

자 오버레이와 다르죠?

어떤 차이인지 감이 오시나요?

ZStack은 하위 뷰들이 독립적입니다!

 

자 그럼 이렇게 둘의 차이를 알아보았습니다.

이 차이를 가지고 더 질좋은 코딩이 되길 바랍니다!

 

[참고자료]

https://developer.apple.com/documentation/swiftui/zstack

Apple Developer Documentation

https://developer.apple.com/documentation/swiftui/slider/overlay(_:alignment:)/ 

Apple Developer Documentation