How to layer views on top of each other using ZStack

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-layer-views-on-top-of-each-other-using-zstack]

 

How to layer views on top of each other using ZStack

[동영상 강좌 : https://youtu.be/ps16HZU3SnA]

SwiftUI는 중첩된 컨텐츠를 만들기 위한 전용 스택 타입이 있으며, 예를들어 그림 위에 텍스트를 위치하고자 하는 경우에 유용합니다. 이를 ZStack이라 하고, 다른 2개의 스택 타입과 동일하게 동작합니다. 

 

예를들어, 다음과 같이 큰 이미지를 텍스트 아래에 배치할 수 있습니다.

ZStack {
    Image("example-image")
    Text("Hacking with Swift")
        .font(.largeTitle)
        .background(Color.black)
        .foregroundColor(.white)
}

 

다른 스택 타입들 처럼, ZStack은 정렬로 만들수 있으므로 언제나 내부에 중앙에 배치하지는 않습니다.

ZStack(alignment: .leading) {
    Image("example-image")
    Text("Hacking with Swift")
        .font(.largeTitle)
        .background(Color.black)
        .foregroundColor(.white)
}

 

하지만, 의미가 없기 때문에 spacing 프로퍼티가 없습니다. 대신에, How to adjust the position of a view using its offset에서 보는 것처럼 offset() modifier을 사용해야 합니다.