How to change the order of view layering using Z index

 

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

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-change-the-order-of-view-layering-using-z-index]

 

How to change the order of view layering using Z index

 

기본적으로, ZStack는 페인터(painter)의 뷰의 깊이를 결정하는 알고리즘을 사용해서 뷰를 계층화(layers) 합니다: ZStack에 먼저 넣은 것을 먼저 그리고나서, 다음 뷰를 그 위에 겹쳐집니다.

 

이것이 종종 원하는 것이지만, 가끔식 다른 제어가 필요합니다 - 예를들어, 앱이 실행하는 동안에 하나의 뷰를 다른 뷰 뒤로 넣고 싶을 수 있거나, 탭 할때 특정 뷰를 앞으로 가져오고자 할 수도 있습니다. 

 

이를 위해서 단일 ZStack 내부에 뷰가 어떻게 겹쳐지는지 정확하게 지정할 수 있는, zIndex() modifier을 사용해야 합니다. 뷰는 기본적으로 0의 Z 인덱스를 가지지만, 다른 뷰의 위나 아래로 배치하는 양수나 음수 값을 제공할 수 있습니다. 

 

예를들어, 해당 ZStack은 2개의 겹쳐진 사각형을 포함하고 있지만, 녹색 사각형은 1의 Z 인덱스 값을 사용하기 때문에 여전히 보일 것입니다. 

ZStack {
    Rectangle()
        .fill(Color.green)
        .frame(width: 50, height: 50)
        .zIndex(1)

    Rectangle()
        .fill(Color.red)
        .frame(width: 100, height: 100)
}

 

주의: zIndex() modifier는 현재 ZStack 내부의 그리는 순서에만 영향을 줍니다. 이는 2개의 겹치는 스택을 사용하는 경우에 스택 내부의 뷰처럼 스택의 Z 인덱스도 고려해야 하는 것을 의미합니다.