SwiftUI - LazyVGrid & LazyHGrid

안녕하세요. 그린입니다🍏

이번 포스팅에서는 SwiftUI에서의 LazyVGrid와 LazyHGrid에 대해 알아보겠습니다🙌

 

우선 UIKit 세상에서는 CollectionView라는것이 있습니다.

SwiftUI에서도 쉽게 컬렉션뷰라고 생각하면 됩니다.

Grid라는 의미 자체는 2차원의 행과 열을 구성하는 레이아웃이라는 뜻을 내포합니다.

 

그럼 SwiftUI에서 Grid를 나타내는 LazyVGrid와 LazyHGrid를 하나씩 보시죠!

 

LazyVGrid

VStack과 같이 세로 즉, 열이 우선되게 뷰가 정렬되고 싸이는 컨테이너 뷰입니다.

Lazy가 붙은 이유는 필요할때만 해당 SubView를 정렬해 생성하기에 Lazy가 붙었습니다.

struct LazyVGrid<Content> where Content : View

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

2차원의 행과열의 레이아웃으로 정렬되고 세로 스크롤이 되는것이 특징이죠😀

여기서 행은 무수히 증가해 구성될 수 있고 열에 최대 몇개의 View가 담길지는 특정하게 지정할 수 있습니다.

바로 GridItem 타입을 이용해 인스턴스를 만들어 사용할 수 있어요.

(요 부분은 곧 사용할때 바로 보시죠!)

import SwiftUI

struct ContentView: View {
  let columns = [GridItem(.flexible()), GridItem(.flexible())]
  let colors: [Color] = [.black, .blue, .brown, .cyan, .gray, .indigo, .mint, .yellow, .orange, .purple]
  
  var body: some View {
    LazyVGrid(columns: columns) {
      ForEach(colors, id: \.self) { color in
        RoundedRectangle(cornerRadius: 10)
          .frame(width: 150, height: 100)
          .foregroundColor(color)
      }
    }
    .padding()
  }
}

둥근 사각형을 VGrid로 보여주는 간단한 뷰입니다.

담겨질 SubView는 ForEach로 돌려줍니다.

VGrid이니 행으로 쌓이고 열에 최대 몇개를 나타내줄지는 GridItem으로 지정해줍니다.

여기서 GridItem을 살펴보고 가시죠!

 

GridItem

그리드의 행 혹은 열에 대한 디스크립션이라고 보면 됩니다.

Grid를 만들때 GridItem 타입의 컴포넌트를 만들어야합니다.

초기화 시 넘겨줄 수 있는 파라미터는 alignment(정렬 방법), spacing(item 간격), size(크기)가 있어요.

여기서 우선 size를 보면 GridItem.Size라고 Size enum 타입으로 케이스가 선언되어 있습니다.

총 3개의 케이스가 있어요🙋🏻

 

adaptive(minumum: CGFloat, maximum: CGFloat)

최소값과 최대값을 정하고 이 사이의 사이즈로 가장 많이 배치 가능하게 할때 사용합니다.

 

flexible(minimum: CGFloat, maximum: CGFloat)

최소/최대값을 정해두고 뷰 크기에 따라 사이즈를 조절할 수 있습니다.

인자에 아무것도 주어지지 않는다면 해당 뷰의 크기를 아이템의 수로 나눠 계산해 그려줍니다.

 

fixed(CGFloat)

고정된 사이즈로 아이템을 지정해줍니다.

 

그 다음으로 spacing을 통해 각 아이템 사이 간격을 줄 수 있어요.

 

그럼 이렇게 통해서 그려진 위의 LazyVGrid 형태의 뷰를 보시죠!

보시는것처럼 GridItem을 flexible하게 2개를 만들었으니 Vertical 형태에서 열은 최대 2개까지만 나타나고 행으로 쭉 쌓이는걸 볼 수 있어요.

만약 위 코드에서 GridItem의 Spacing을 아래와 같이 줘봅시다.

GridItem(.flexible(), spacing: 50)

그럼 이렇게 간격이 벌어진걸 볼 수 있어요!

 

이어서 LazyHGrid도 거의 유사하니 빠르게 봐봅시다🙌

 

LazyHGrid

Horizontal, 즉 수평으로 늘어나는 그리드에 SubView를 정렬하여 나타낼 수 있는 컨테이너 뷰입니다.

Lazy가 붙은 이유는 위 LazyVGrid와 동일해요.

struct LazyHGrid<Content> where Content : View

선언은 위와 같구요🥸

또한 LazyVGrid와 차이는 열은 무수히 증가해 구성될 수 있고 행에 최대 몇개의 View가 담길지는 특정하게 지정할 수 있습니다.

즉 반대죠ㅎㅎ

colums와 row의 차이로 인식하면 편합니다.

 

그럼 바로 사용해보죠!

코드는 위와 동일한걸 보여주는데 V -> H로 탈바꿈만 하는거에요ㅎㅎ

import SwiftUI

struct ContentView: View {
  let rows = [GridItem(.flexible())]
  let colors: [Color] = [.black, .blue, .brown, .cyan, .gray, .indigo, .mint, .yellow, .orange, .purple]
  
  var body: some View {
    ScrollView(.horizontal) {
      LazyHGrid(rows: rows) {
        ForEach(colors, id: \.self) { color in
          RoundedRectangle(cornerRadius: 10)
            .frame(width: 50, height: 450)
            .foregroundColor(color)
        }
      }
    }
    .padding()
  }
}

Horizontal하게 많이 쌓일테니 스크롤뷰로 감싸 주는것의 방법도 많이 사용됩니다.

주로 배너나 앨범들에서도 사용되죠.

자 이렇게 Horizontal하게 뷰가 그리드로 나타납니다.

 

마무리

자 이렇게 간단하게 알아봤어요!

아주 기본적인 SwiftUI에서 제공하는 뷰니 기본적으로 활용을 넘어서 커스텀하게도 활용해본다면 아주 좋겠네요🙌

해당 예제 코드들은 아래 제 깃헙 레포에 있습니다!

https://github.com/GREENOVER/playground/tree/main/GridView

GitHub - GREENOVER/playground: 학습을 하며 간단한 예제들을 만들어 보는 작고 소중한 놀이터

 

[참고 자료]

https://developer.apple.com/documentation/swiftui/lazyvgrid

Apple Developer Documentation

https://developer.apple.com/documentation/swiftui/lazyhgrid

Apple Developer Documentation

https://developer.apple.com/documentation/swiftui/griditem

Apple Developer Documentation