[SwiftUI] AutoLayout의 Center Y 처럼 비율 위치를 구현하는 방법

  UI를 구현할 때, 오토레이아웃(AutoLayout) 방식으로 디자인 가이드를 구현해왔다면 SwiftUI를 처음 맞닥뜨리게되면 조금 당황스러울 수 있습니다. UI 그리는 개념이 완전히 다르기 때문입니다. 뭔가 안드로이드에서 UI를 그리는 방식과 닮은 느낌이 납니다. 오늘은 제가 받은 디자인 가이드에서 조금 난해했던 부분을 공유하고자 합니다.

 

디자인 가이드 예시는 다음과 같습니다.

 

비율로 위치를 잡는 가이드

 

초록색 원의 Y 위치가 고정값(pt)이 아닌 비율(%)로 나타내어져 있습니다.

AutoLayout을 사용했다면 아래 처럼 간단하게 해결했을 것입니다.

 

Center Y Alignment Constraint

하지만 SwiftUI 에서는 이런 방식이 불가능 합니다. 어떻게 하면 그나마 간단하게 구현할 수 있을지 고민 하였습니다.

 

해결 방법은 GeometryReader, VStack, Spacer를 사용하여 해결하였습니다. 좀 더 좋은 방법이 있다면 댓글로 알려주세요!

 

GeometryReader { metrics in
    VStack(spacing: 0) {
        Spacer().frame(height: metrics.size.height * 0.44 - 100 / 2)
        Circle()
            .frame(width: 100, height: 100)
            .foregroundColor(.green)
        Spacer().frame(height: metrics.size.height * 0.56 - 100 / 2)
    }
}