[SwiftUI] GeometryReader를 사용했을 때 중앙에 배치하는 방법

문제점 발견

아래와 같이 GeometryReader를 사용하여 VStack안의 모든 내용들을 frame을 나눴을 때 좌표 (0, 0)에 위치해 버리는 문제가 발생한다.

import SwiftUI

struct ContentView: View {
    var body: some View {
            GeometryReader { geometry in
                VStack{...}
    }
}

 

아래와 같이 왼쪽으로 하고 싶었던 뷰가 오른쪽처럼 왼쪽 위쪽에 붙어버린다!

왜 이럴까? 왜냐하면 iOS의 View 계층 구조에서 좌측 상단이 기준이기 때문이다. iOS에서 View의 위치는 좌측 상단에서 시작하여 오른쪽으로 갈수록 x좌표가 증가하고, 아래로 갈수록 y좌표가 증가하는 방식으로 정의된다.

 

흠 어쨌든, GeometryReader를 쓰면 좌측상단을 기준으로 되는구나라고 생각했다. 그래서 나는 두 가지 해결책을 생각했다. 이 전체에 frame을 씌워버리는 거, offset으로 이동시키는 것.

강제로 이동

import SwiftUI

struct ContentView: View {
    var body: some View {
            GeometryReader { geometry in
                VStack{...}
                .offset(x : geometry.size.width * 0.05 - 9)
    }
}

GeometryReader바로 안쪽의 모든 것의 위치를 offset으로 치밀한 계산을 통해 중간으로 이동시킨다. 그나마 덜 치밀하게 계산하기 위해 geometry.size를 썼다. 추천하지 않는 방법이다..

프레임 씌우기

import SwiftUI

struct ContentView: View {
    var body: some View {
            GeometryReader { geometry in
                VStack{...}
                .frame(width: geometry.size.width, height: geometry.size.height)
    }
}

GeometryReader안의 frame에 있는 친구들은 중앙정렬을 기본으로 한다는 것을 알았다. 그러면 전체 VStack에도 전체 프레임을 씌워버리자!라고 생각했고 결과는 성곡적으로 중간정렬을 할 수 있게 되었다. 현재로서는 이 방법을 적극 추천!

 

이 이외에도 Spacer나 Padding을 사용하는 방법도 있을 것 같다. 하지만 내가 전체에 프레임을 씌워서 정렬하는 게 좋다고 생각했던 이유는 모든 디바이스 상황에서 중간으로 위치시키고 싶었기 때문이다. 내가 특수한 값을 정해준다면 어떠한 디바이스에서는 중앙이 아닐 수 있기 때문이다. 그리고 offset은 억지로 욱여넣는 기분이라 선호하지 않는다.

 

아무튼 빠르게 해결하게 되어 너무 좋다 ^~^!!