iOS SwiftUI, GridView 레이아웃 속성 GridItem 개발자문서 읽기

 

GridItem 정의

구조체로 정의되어 있는 GridItem은 SwiftUI에서 lazy grid를 표현할때 사용되는 놈입니다. SwiftUI의 LazyHGrid, LazyVGrid는 각각 rows, columns 라는 인자를 넣어서 생성, 사용하게 되는데요. 이떄 rows, columns의 타입이 [GridItem]입니다. GridView 생성 시에 필수적으로 사용해야 하는 놈인 것입니다.

SwiftUI를 사용 가능한 iOS 14 이상에서 GridView 레이아웃 속성으로 사용되는 GridItem을 지원하고 있습니다.

 

---

GridItem Overview

LazyHGrid, LazyVGrid의 레이아웃을 지정할때 GridItem의 배열, [GridItem]을 사용할 수 있습니다. GridItem에서는 size, spacing, alignment 등의 세부 옵션 지정이 가능한데, size 옵션으로는 adaptive, fixed, flexible 세가지가 있습니다. 

보통 LazyHGrid의 경우 rows로, LazyVGrid는 columns로 [GridItem]을 지정해서 레이아웃을 설정할 수 있습니다. 이때 일반적으로 LazyHGrid는 ScrollView(.horizontal)과, LazyVGrid는 ScrollView(.vertical)과 사용하게 되는데, 위 코드는 전자의 예시가 되겠네요.

좌우 스크롤이 가능한 GridView이며, LazyHGrid의 rows 설정에 따라 위에서부터 차례대로 30, 60, 90, 10의 크기, 1, 10, 20, 50의 spacing 값을 갖게 됩니다. 위 코드의 결과를 이어서 보겠습니다~!

 

 

GridItem 배열로 지정했던 대로, row 행을 보면, 위에서 아래로 갈수록 spacing이 커지는 것을 볼 수 있어요. 크기도 제각각이죠. 하지만 column 열로 보면, 일관적인 크기를 보여줍니다. LazyVGrid의 경우 이와 반대라고 보면 되고요.

지금은 size를 .fixed 옵션으로 지정했는데 flexible, adaptive로 지정하는 경우, 빈 영역을 필요에 따라 채우거나 최대 크기를 제한하는 레이아웃을 구현할 수도 있습니다.

LazyVGrid는 일반적으로 내부의 모든 View를 접근할 수 없습니다. 스크롤이 될때 새롭게 보여져야할 Cell을 생성하는 원리이기 때문입니다. 또한 LazyVGrid에 정의된 Sub View의 순서에 맞는 데이터를 참조해서 그에 맞는 UI를 보여줍니다. UIKit의 스크롤뷰, 컬렉션뷰와 유사한 UI를 구현해야할때 사용될 수 있는 UI로 많이 익숙해져야 겠습니다.

지금까지 GridView 레이아웃 속성으로 사용되는 GridItem에 대해 개발자 문서를 읽으며 알아보았습니다~!

 

---

개발자 문서 Reference

GridItem | Apple Developer Documentation