SwiftUI Geometry Reader

SwiftUI Geometry Reader

 

오늘은 Swift UI에서 View의 크기 비율을 정할 수 있게 해주는 Geometry Reader에 관하여 알아보겠습니다.

 

우선 저희가 SwiftUI에서 하나의 View를 만들어봅시다.

 

예를 들어 아래와같은 코드로 아래의 화면을 만들었습니다.

 

struct GeometryReader : View {
    var body: some View {
        
        HStack(spacing: 0) {
                Text("A")
                    .frame(width : 50)
                    .background(Color.red)
                Text("B")
                    .frame(width : 50)
                    .background(Color.green)
                Text("C")
                    .frame(width : 50)
                    .background(Color.yellow)
            }
            .foregroundColor(Color.white)
            .font(.largeTitle)
        
        }
}

 

각 Text들의 frame을 50으로 다 동일하게 고정시켰기 때문에 A,B,C 각각 텍스트들이 동일한 크기를 가지고 있습니다.

 

여기서 A만 B,C보다 2배 크게하고싶다면 아래처럼 하시면 됩니다.

 

struct GeometryReader : View {
    var body: some View {

        HStack(spacing: 0) {
                Text("A")
                    .frame(width : 100)
                    .background(Color.red)
                Text("B")
                    .frame(width : 50)
                    .background(Color.green)
                Text("C")
                    .frame(width : 50)
                    .background(Color.yellow)
            }
            .foregroundColor(Color.white)
            .font(.largeTitle)
        
        }
}

 

A Text의 frame만 100으로 고정하고 나머지 B,C의 frame은 그대로 50이기 때문에 A텍스트의 크기가 위와같이 변하였습니다.

 

근데 이렇게 항상 고정된 frame값으로만 바꾸게 되면 문제가 무엇이냐

 

일단 위에 PreView에 사용된 기기말고 다른 기기로 PreView를 돌려봅시다.

 

아래 기기 : i-Pad 프로

 

화면에 비율이 이렇게 박살이 나버립니다.

 

frame값을 고정해 두었기 때문이죠!!

 

그렇다면 어떻게하면 비율을 유지할 수 있을까요?

 

위에서 알아보기로한 Geometry Reader를 사용하면 됩니다.

 

SwiftUI에서 늘 그랬듯 원하는 영역을 GeometryReader안에 감싸 주시면됩니다.

 

struct MyGeometryReader: View {
    
    var body: some View {
        
        // file명이 GeometryReader이면 소스코드가 GeometryReader 키워드와 구조체명이랑 헷갈려해서 바꾸었습니다
        GeometryReader { geometry in
            HStack(spacing: 0) {
                Text("A")
                    .frame(width: geometry.size.width / 3)
                    .background(Color.red)
                Text("B")
                    .frame(width: geometry.size.width / 3)
                    .background(Color.blue)
                Text("C")
                    .frame(width: geometry.size.width / 3)
                    .background(Color.green)
                }
            .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
                .foregroundColor(Color.white)
                .font(.largeTitle)
            }
           
        }
        
}

 

GeometryReader { } 뒤에

 

.position으로 전체 GeometryReader에 위치를 잡아주시지 않는다면

 

위 사진처럼 가운제 정렬된 상태로 View가 나오지는 않습니다.

 

정상적으로 position을 잡아주었다면 아래와 같이 나오게됩니다.

 

 

위 코드에서는 GeometryReader의 범위가 전체 View이기 때문에 

 

width를 기준으로 1/3 범위씩 텍스트 3개가 나눠가지기때문에 꽉차보입니다.

 

비율을 바꾸면 어떻게 될까요?

 

struct MyGeometryReader: View {
    
    var body: some View {
        
        GeometryReader { geometry in
            HStack(spacing: 0) {
                Text("A")
                    .frame(width: geometry.size.width / 3)
                    .background(Color.red)
                Text("B")
                    .frame(width: geometry.size.width / 4)
                    .background(Color.blue)
                Text("C")
                    .frame(width: geometry.size.width / 5)
                    .background(Color.green)
                }
                .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
                .foregroundColor(Color.white)
                .font(.largeTitle)
            }
           
        }
        
}

 

 

해당 비율에 맞게 크기가 자동으로 조율됩니다.

 

이렇게 View를 잡아주는 GeometryReader는 많이 쓰면 좋을것같지만 너무 남발할 경우 alignment등

 

갑자기 예기치못한 오류가 많이 발생할 수도 있으니 반드시 필요한 부분에 사용해주셔야합니다.