SwiftUI - LazyVGrid & LazyHGrid

SwiftUI의 LazyVGrid와 LazyHGrid는 격자(Grid) 레이아웃을 만드는 컨테이너입니다. 오늘은 이 둘에 대해 알아볼 것이며 시작하기 앞서 일반 Grid View에 대해 알아보려고 합니다.

✅ Grid View

Grid View는 iOS 16 부터 가능한 기능으로 이전과 달리 Grid Layout을 좀더 편리하게 구현할 수 있도록 도와줍니다.

전통적인 Stack들과 달리 Grid는 상세한 열과 행의 정렬을 가능하게 하고 스프레드 시트 또는 대시보드 타입의 View를 쉽게 생성할 수 있도록 해줍니다.

Grid(horizontalSpacing: 30, verticalSpacing: 30) {
    GridRow {
        Text("(0, 0)")
        Text("(1, 0)")
        Text("(2, 0)")
    }
    
    GridRow {
        Text("(0, 1)")
        Text("(1, 1)")
        Text("(2, 1)")
    }
    
    GridRow {
        Text("(0, 2)")
        Text("(1, 2)")
        Text("(2, 2)")
    }
}

 

구현은 위와 같이 되며 반복되는 경우 ForEach를 사용해 구현할 수도 있습니다.

Grid View의 너비는 가장 많은 Columns을 가진 Row의 너비를 따르며 GridView의 초기화 시 Cell의 spacing과 alignment를 설정할 수 있습니다.

 

SwiftUI의 Grid View는 기본으로 Scroll 기능을 제공해주지 않으며 스크롤하고 싶은 경우 직접 ScrollView 안에 구현 해주어야 합니다.

 

그리고 관련 여러 속성들을 제공해주는데 예시로 만약 Cell을 병합하고 싶다면 .gridCellColums() 의 속성을, Divider을 추가한 뒤 Layout이 무한히 늘어나는 것을 방지하기 위해서는 .gridCellUnsizedAxes(.horizontal)을 제공합니다.

 

참고로 몇몇 속성들은 Lazy인 경우 적용되지 않으므로 사용시 확인이 필요합니다.

 

✅ LazyVGrid / LazyHGrid

	LazyVGrid	LazyHGrid
스크롤 방향	세로	가로
인자 이름	columns(열)	rows(행)
감싸는 ScrollView	.vertical	.horizontal

 

핵심 포인트는 V와 H는 자라는 방향을 의미한다는 것입니다.

Columns 또는 Rows의 개수를 지정하고 Cell을 늘려나가면 해당 개수가 넘어서는 순간 다음 Cell은 V 또는 H 방향으로 생성됩니다. 즉, LazyVGrid는 "열"을 정의하고 내용들은 왼쪽에서 오른쪽으로 채워지다 아래로 줄바꿈 됩니다.

 

Lazy의 경우 실제 사용하는 상황이 되어서야 SubView가 생성된다는 의미이며 수천개의 아이템이여도 메모리/랜더링 비용이 뷰포트 크기에 비례합니다.

 

선언은 아래와 같이 Content와 SubView들을 가진 컨테이너 뷰 입니다.

nonisolated
struct LazyVGrid<Content> where Content : View

 

 

GridItem

GridItem은 말 그대로 Grid에 담길 Item들을 의미하며 트랙 하나를 정의하는 설계도 입니다.

GridItem은 LazyVGri에 에서는 열 하나, LazyHGrid에서는 행 하나를 서술하는 구조체 입니다. 화면에 보이는게 아니라 레이아웃 레시피라고 생각하면 쉽습니다.

 

초기화는 아래와 같이 되어있습니다.

struct GridItem {
    var size: GridItem.Size
    var spacing: CGFloat?
    var alignment: Alignment?
}

 

배열로 넘기면 그게 곧 격자의 골격이 됩니다.

 

기본 원칙은 배열의 개수는 곧 열의 개수가 되지만 예외로 .adaptive는 혼자서 여러 열로 불어납니다.

 

GridItem의 사이즈를 정의하는 방법에는 세 가지 방법이 있습니다.

	의미	열 개수를 정하는 주체
.fixed(120)	정확히 120pt, 불변	나
.flexible(minimum: 10, maximum: .infinity)	남은 공간을 균등 분배	나
.adaptive(minimum: 80)	들어갈 수 있는 만큼 최대한 채움	SwiftUI

 

사이즈가 정해지는 순서는 .fixed -> .adaptive -> .flexible 순서입니다.

 

GridItem은 lazy 그리드 전용입니다. 일반 Grid의 경우 콘텐츠를 보고 스스로 크기를 정하기 때문에 설정할 GridItem 배열 자체가 없고 따라서 몇몇 속성이 Lazy에서는 사용이 불가능한 것 입니다.

 

오늘은 이렇게 LazyVGrid와 LazyHGrid에 대해 알아봤습니다.

 

감사합니다.