How to adjust the position of a view using its offset

 

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

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-adjust-the-position-of-a-view-using-its-offset]

How to adjust the position of a view using its offset

 

모든 뷰는 계층구조 내부에 기본(natural) 위치를 가지지만, offset()modifier는 기본 위치에서 상대적으로 이동하도록 합니다. 이는 뷰가 겹치는 방법을 제어하는 곳인, ZStack 내부에서 특히 유용합니다.

 

중요 : offset()을 사용해서 뷰를 기본 위치에서 상대적으로 이동하지만, 다른 뷰의 위치에는 영향을 주지 않습니다. 이는 원하는게 아닐수도 있는, 뷰를 일반적으로 바로 옆에 배치할때, 다른 뷰와 겹쳐질(overlap) 수 있다는 것을 의미합니다. 

 

예를들어, VStack에서 offset()을 사용해서 두번째 항목을 15포인트 아래로 이동해서 세번째 항목과 겹쳐지게(overlap) 할 수 있습니다.

VStack {
    Text("Home")
    Text("Options")
        .offset(y: 15)
    Text("Help")
}

 

offset과 함께 padding()을 사용해서 하나의 뷰를 이동하는 동안, 해당 뷰를 일치하도록 조정함으로써, 원하는 결과를 얻을 수 있습니다.

 

예를들어, 두번재 항목을 15 포인트 아래로 이동하지만, 하단 모서리에 여백(padding)이 15 포인트 추가되므로, 아래에 있는 텍스트 뷰와 겹치지 않게 됩니다. 

VStack {
    Text("Home")
    Text("Options")
        .offset(y: 15)
        .padding(.bottom, 15)
    Text("Help")
}

 

ZStack과 결합해서 사용할때, offset은 다른 뷰 내부에 뷰 1개를 배치하며, ZStack의 정렬을 제어할때 특히 유용합니다. 예를들어, 사진작가의 이름과 함께 사진을 보여주는 ZStack이 있는 경우에, 이미지가 우측 하단의 모서리에서 사용가능한 모든 공간을 차지하도록 bottomTrailing 정렬을 사용하고, 5포인트 뒤로 잡아당기기 위해서 offset(x: -5, y: -5)를 사용합니다.

ZStack(alignment: .bottomTrailing) {
    Image(item.mainImage)
    Text("Photo: \(item.photoCredit)")
        .padding(4)
        .background(Color.black)
        .foregroundColor(.white)
        .offset(x: -5, y: -5)
}