[SwiftUI] GridView 그리기

서론

위의 이미지처럼 Grid 형태의 뷰를 그리는 방법을 알아보도록 하겠습니다.

두가지 옵션

SwiftUI 에서 Grid 뷰를 그릴 때 두 가지 옵션이 있습니다: LazyVGrid , LazyHGrid

무엇을 선택해야 하나

둘의 차이점은 아이템들이 쌓이는 방향에 있습니다. 위아래로 스크롤 하는 Grid 뷰를 원한다면 LazyVGrid 를 사용하면 되고 좌우로 스크롤 하는 Grid 뷰를 원한다면 LazyHGrid 를 사용하면 됩니다.

(Optional) Lazy ?

SwiftUI 에서는 LazyVStack , LazyHStack , LazyVGrid , LazyHGrid 와 같이 Lazy 라는 이름이 붙은 뷰 빌더들을 볼 수 있습니다. Swift에서 lazy 와 함께 선언된 프로퍼티는처음 호출될 때 값을 계산하기 때문에 필요하지 않는 시간 동안은 값을 생성하지 않습니다. SwifUI 에서 Lazy 라는 이름이 앞에 붙은 뷰 빌더들도 화면에 그려야할 필요가 있는 뷰들에 한해서만 body를 계산합니다. 때문에 화면에 굳이 나타낼 필요가 없는 데이터들을 계산하지 않기 때문에 많은 데이터를 다루는 경우효율적으로 사용될 수 있습니다.

여기서 LazyVGrid 의 경우 화면에 그릴 필요 없는 아이템들은 생성하고 있지 않다가 사용자가 스크롤을 하면서 화면에 그려야하는 시점에 아이템을 생성하게 됩니다.

사용예시

var columns: [GridItem] = [Grid(.fixed(20), Grid(.fixed(20)]
ScrollView {
    LazyVGrid(columns: columns) {
        ForEach(images) {
            Image($0)
        }
    }
}

GridItem ?

GridItem 의 인스턴스들은 LazyVGrid , LazyHGrid 뷰에서 그릴 아이템들의 레이아웃(간격, 정렬, 사이즈등)을 설정하는데에 사용됩니다. (VGrid 의 경우 columns, HGrid의 경우 rows)

.init(GridItem.Size, spacing: CGFloat?, alignment: Alignment?)

GridItem의 Size 에는 3가지 타입이 있습니다.

• adaptive: (LazyVGrid의 경우) minimum 값 이상의 사이즈로 열마다 가능한 많이 아이템들을 배치하고자 할 때 사용되는 사이즈 입니다.
• flexible: (LazyVGrid의 경우) minimum 값 이상의 사이즈로 column 수를 조절 하고 싶을 때 사용되는 사이즈 입니다. adaptive와 유사하나 열마다 배치되는 아이템 수를 조절할 수 있다는 점에서 다릅니다.
• fixed: (LazyVGrid의 경우) column 수와 크기를 직접 조절하고 싶을 때 사용하는 사이즈 입니다.