[SwiftUI] SwiftUI의 Stack, Frame, GeometryReader

귀신같이 일주일만에 돌아온 블로그 ㅋㅋ

오늘은 SwiftUI에서 필수로 쓰이는 스택과 프레임, 그리고 GeometryReader라는 것을

정리해볼 것이다람쥐 !! 🐿️

 

---

 

컨테이너의 자식 뷰 제한

 컨테이너 뷰는 직접적인 하위 뷰를 10개로 제한한다. 만약 스택 컨테이너가 10개 이상의 자식 뷰를 담으면 다음과 같은 구문 오류가 표시된다.

Argument passed to call that takes no argument

 만약 스택에 포함된 직접적인 자식 뷰가 10개를 넘어야 한다면 뷰들은 여러 컨테이너로 나눠서 담겨야 할 것이다. 이때 사용할 수 있는 방법은 2가지다.

1. 하위 뷰로 스택을 추가하기
2. Group 뷰 사용하기

아래 코드는 12개의 Text 뷰가 Group 컨테이너로 나눠져서 VStack에는 단 2개의 직접적인 자식 뷰만 포함하게 한다.

VStack {
    Group {
    	Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
    }
    
    Group {
    	Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
        Text("Sample Text")
    }
}

 이것은 10개의 하위 뷰 제한을 피하게 할 뿐만 아니라, Group은 여러 뷰에서 작업을 수행할 때에도 유용하다. 예를 들어, Group 뷰들을 포함시키고 숨기는 명령을 주면 하나의 명령으로 모든 뷰를 숨길 수 있다.

 

텍스트 줄 제한과 레이아웃 우선순위

📍 텍스트 줄 제한

• lineLimit 수정자
  
  • 예) .lineLimit(1)

📍 레이아웃 우선순위

• layoutPriority 수정자
  • 예) .layoutPriority(1)

 

SwiftUI 프레임

 Default로, 뷰는 자신의 콘텐트와 자신이 속한 레이아웃에 따라 자동으로 크기가 조절된다. 대부분은 뷰의 크기와 위치는 스택 레이아웃을 사용하여 조절할 수 있지만. 때로는 뷰 자체가 특정 크기나 영역에 맞아야 하기도 한다. 이를 위해 SwiftUI는 조절 가능한 frame 수정자를 제공한다. 사용 예는 아래와 같다.

.frame(minWidth: 100, maxWidth: 300, minHeight: 100, maxHeight: 100, alignment: .center)

 

frame과 GeometryReader

 프레임은 뷰들을 담고 있는 컨테이너의 크기에 따라 조절되도록 구현할 수도 있다. 이 작업은 GeometryReader로 뷰를 감싸고 컨테이너의 크기를 식별하기 위한 리더(reader)를 이용하여 할 수 있다. 이 리더는 프레임의 크기를 계산하는 데 사용된다. 다음의 예제는 두 개의 Text 뷰를 포함하고 있는 VStack의 크기를 기준으로 Text 뷰의 크기를 설정한다.

GeometryReader { geometry in
    VStack {
    	Text("Hello World, how are you?")
            .font(.largeTitle)
            .frame(width: geometry.size.width / 2, height: (geometry.size.width / 4) * 3)
        Text("Goodbye World")
            .font(.largeTitle)
            .frame(width: geometry.size.width / 3, height: geometry.size.width / 4)
    }
}

상단에 있는 Text 뷰는 VStack의 1/2의 폭과 3/4의 높이를 차지하고, 하단에 있는 Text 뷰는 VStack의 1/3의 폭과 1/4의 높이를 차지하기 위한 설정이다.

 

---

 

멋사 앱스쿨에서 돌림판을 만들 때 GeometryReader를 사용했었는데,

이렇게 개념을 잡고 가니 다음에 필요할 때가 생기면 까먹지 않고 응용할 수 있을 것 같다.

 

 

 

출처 : Swift 기반의 iOS 프로그래밍