SwiftUI) LazyGride 대한 경험 정리

송도 어딘가

 

안녕하세요 후르륵짭짭입니다.

이번에는 처음으로 SwiftUI에 대해 작성해보려구 합니다.

SwiftUI를 차근차근 공부하고 있지만, 잘 모른 상태라 자세한 설명은 쉽지 않겠더라구요.

좀 더 공부해보고 좀 더 자세한 내용이 필요하면 작성하도록 하겠습니다!

 

** SwiftUI의 TableView, CollectionView!! LazyGride **

SwiftUI에서는 LazyGride를 통해서 Table(Collection)View 손쉽게 구현 할 수 있게 됐습니다.

(정말,,,, 처음에 UITable(Collection)View를 학습 했던 시간 보다 훨씬 쉽게,,,)

사실 LazyGride는 CollectionView랑 더 가깝다고 할 수 있지만,,,,

struct VGrideView: View {

	 var body: some View {
     	ScrollView{}
     }

}

위와 같이 body 안에 ScrollView를 넣어줍니다!

TableView도 ScrollView를 상속 받은 형태 입니다!

따라서 LazyGride를 사용할 때도 ScrollView 내부에 사용해줘야 합니다.

그리고 LazyGride를 넣어줄 겁니다!

그런데 LazyGride는 수직(Vertical)과 수평(Horizontal) 두가지로 나눠져 있습니다.

(저는 Vertical를 기본으로 설명하겠습니다!)

LazyVGrid(columns: 형태 , spacing: Cell의 상하간격, pinnedViews: [섹션])

이렇게 LazyVGride는 3가지를 중심으로 구현 할 수 있습니다!

여기서 가장 중요한것은 columns(수직 LazyGride이기 때문에 열을 나타내는 column이 들어갑니다.)의 형태값 입니다!

 

형태는 fix(고정), flexible(자유로움), adaptive(적응용) 이렇게 세개로 나눠져 있습니다.

- Flexible GrideItem - 

   //정확히 화면을 3등분 하여 보여줌 
   private let layouts : [GridItem] = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

- Adaptive GrideItem - 

//3등분으로 나누고 한 등분에 들어가는 최소값 만큼 Cell을 채웁니다.
private let layouts : [GridItem] = [
        GridItem(.adaptive(minimum: 50)),
        GridItem(.adaptive(minimum: 50)),
        GridItem(.adaptive(minimum: 100))
    ]

 

- 다양한 GrideItem 활용 - 

//3등분으로 나누고 각 표준에 맞게 Cell을 구성하게 됩니다
private let layouts : [GridItem] = [
        GridItem(.fixed(100)),
        GridItem(.flexible()),
        GridItem(.adaptive(minimum: 50))
    ]

 - 나의 주석 처리 - 

     1. GrideView 연습
     -> LazyVGrid라고 한다면 수직으로 생긴다.
     따라서 컬럼이 생기게 된다. 직 아이템들이 세로로 생기게 되는데,
     만약 GridItem이 세개라고 한다면
     1 2 3
     4 5 6
     순서로 생긴다.
     
     여기서 중요한 건 flexible이라는 건데, flexible은 값을 주지 않는다면
     만약 GrideItme이 세개라면
     화면을 세개로 나눠서 자신이 가질 수 있는 최대 화면 크기를 가지게 된다.
     
     adpative는 두개 이상 이라면 본인이 가질 수 있는 min값으로 공간을 채운다
     즉, GridItme이 세개라고 한다면
     하나의 GridItme이 100이라는 공간을 가질 수 있다면
     adaptive를 50으로 한다면 하나의 gridItem에 두개의 아이템이 생기게 된다.

 

** 참고 사이트 **

      - ObservableObject

     https://nsios.tistory.com/145

[SwiftUI] 뷰 상태변경 @State @Binding @ObservedObject @StateObject

     https://nsios.tistory.com/120

[SwiftUI] Published, ObservableObject

     

     - GridItem

     https://swiftwithmajid.com/2020/07/08/mastering-grids-in-swiftui/

Mastering grids in SwiftUI

     https://seons-dev.tistory.com/58

SwiftUI : Lazy V(H)Grid

     

     - ForEach에서 index 가져오는 방법

     https://stackoverflow.com/questions/57244713/get-index-in-foreach-in-swiftui

Get index in ForEach in SwiftUI