SwiftUI로 iOS에서 그리드 레이아웃을 마스터하는 방법

그리드 레이아웃을 사용하면 수직 또는 수평으로 확장되는 그리드에 보기를 표시할 수 있습니다. 예를 들어 iOS 사진 애플리케이션에서 모두 본 적이 있습니다. UIKit으로 작업한 사람들은 UICollectionView 으로 인식할 수 있습니다.

SwiftUI는 LazyVGrid 및 LazyHGrid 두 가지 뛰어난 옵션을 제공합니다. 이번에는 이러한 구성 요소를 더 깊이 파고들어 어떻게 사용할 수 있는지 이해할 것입니다. 이 두 구성 요소의 가장 큰 장점은 사용법입니다. 뷰는 느리게 로드됩니다. 즉, 뷰가 화면에 나타날 때를 의미합니다.
HStack 및 VStack는 iOS 14 이상에서 사용할 수 있음을 지적하고 싶습니다. iOS 13에서 그리드 레이아웃을 사용하려면 HStack 및 VStack 를 살펴봐야 하지만 지연 로딩을 지원하지 않는다는 단점이 있습니다.

그리드 레이아웃 만들기

그리드 레이아웃 생성에는 세 가지 단계가 포함됩니다. 즉, 데이터를 표시하도록 설정하고, 그리드 시스템을 구성하고, 그리드 레이아웃 자체를 초기화합니다. 우리는 마지막 두 가지를 살펴볼 것입니다. 데이터를 제공하는 방법은 광범위한 주제이며 이 게시물의 범위를 벗어납니다.
LazyVGrid의 초기화는 열, 항목 정렬, 항목 간 간격, 바닥글 또는 머리글에 고정된 보기 및 콘텐츠 자체를 제공하여 수행됩니다.

var columns = [
  GridItem(.flexible()),
  GridItem(.flexible()),
  GridItem(.flexible()),
  GridItem(.flexible())
]

var body: some View {
  ScrollView {
    LazyVGrid(columns: columns, spacing: 20, pinnedViews: .sectionHeaders) {
      Section(header: Text("Smilies").font(.title),
              footer: Text("Emoji smilies").font(.subheadline)) {
        ForEach(Emoji.smilies, id: \.self) { emoji in
          Text(emoji)
            .font(.largeTitle)
        }
      }

      Section(header: Text("Animals").font(.title),
              footer: Text("Emoji animals").font(.subheadline)) {
        ForEach(Emoji.animals, id: \.self) { emoji in
          Text(emoji)
            .font(.largeTitle)
        }
      }

      Section(header: Text("Food").font(.title),
              footer: Text("Emoji food").font(.subheadline)) {
        ForEach(Emoji.food, id: \.self) { emoji in
          Text(emoji)
            .font(.largeTitle)
        }
      }

    }
    .padding(.horizontal)
  }
}

LazyHGrid 와 꽤 비슷합니다. columns 매개변수를 `rows'로 교환하기만 하면 됩니다.

그리드 레이아웃 구성

그리드 레이아웃을 초기화할 때 세로 스타일 및 가로 스타일 그리드 레이아웃의 행과 같이 표시되는 방식을 지정하는 것이 가장 중요합니다.

SwiftUI에는 단일 그리드 항목GridItem을 설명하는 구성 요소가 있습니다. 그리드 항목은 행 또는 열입니다.
GridItem,를 초기화할 때 다음 세 매개변수가 중요합니다.

size - 항목의 크기;

spacing - 항목 사이의 간격;

alignment - 각 그리드 항목 배치 시 정렬.

그리드 항목 크기

그리드 항목의 크기를 지정하는 세 가지 옵션이 있습니다.

flexible(minimum: CGFloat, maximum: CGFloat) - 최소 및 최대 크기에 대한 선택적 매개변수가 있는 사용 가능한 공간의 유연한 단일 항목입니다.

adaptive(minimum: CGFloat, maximum: CGFloat) - 사용 가능한 공간에 여러 항목이 있습니다.

fixed(CGFloat) - 사용 가능한 공간에서 크기가 고정된 단일 항목입니다.

LazyVGrid 및 LazyHGrid 에서 각 사례가 실제로 어떻게 작동하는지 살펴보겠습니다.

유연한

유연한 그리드 항목 크기를 사용하여 최소값과 최대값을 제공할 수 있지만 그것이 없어도 훌륭하게 작동합니다. 항목 크기는 사용 가능한 공간을 항목 수로 나누어 계산합니다.
swift
[
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible())
]


Vertical

Horizontal

적응형

Adaptive grid layout size is the most suitable and appropriate 'GridItem` size. We need to provide the minimum and optionally maximum size, and the SwiftUI layout guide will take all the heavy-duty work away from us.

[
  GridItem(.adaptive(minimum: 50))
]

Vertical

Horizontal

결정된

Fixed GridItem 레이아웃 크기는 항목 크기를 알고 있고 일정할 때 사용하기 위한 것입니다.

[
  GridItem(.fixed(100)),
  GridItem(.fixed(100)),
  GridItem(.fixed(100))
]

수직의




수평의

TL; DR

그리드 레이아웃 또는 이전에 알려진 UIKit 시간의 UICollectionView는 그리드 시스템에서 데이터를 표시하는 중요한 구성 요소입니다. SwiftUI는 게으른 방식으로 수직 또는 수평으로 그리드 레이아웃을 구축할 수 있는 구성 요소를 제공합니다. 항목이 필요할 때만 로드됨을 의미합니다. 이 두 구성 요소는 LazyVGrid 및 LazyHGrid 입니다.

SwiftUI로 그리드 레이아웃을 생성하려면 데이터 세트, 열 또는 행, 항목 간 간격, 선택적으로 고정된 보기(머리글 및 바닥글)를 제공해야 합니다.

연결

Sample code

LazyVGrid Documentation

LazyHGrid Documentation

GridItem documentation

Section documentation

How to position views in a grid using LazyVGrid and LazyHGrid

Mastering grids in SwiftUI

https://swiftui-lab.com/impossible-grids/