SwiftUI로 불규칙적인 격자모양을 만들어보자!

안녕하세요!

이번에는 SwiftUI를 사용하여 스크롤뷰 안에
사진(데이터)들을 불규칙적으로
사진에 크기에 맞게 배치하도록 해보았습니다.

일단은 구현된 화면은 밑에 사진과 같습니다.

LazyVStack {
           HStack {
               Text("최신 이미지")
                   .font(.title2)
                   .fontWeight(.bold)
               Spacer()
           }
                    
           HStack {
                  VStack(alignment: .leading) {
     				 ForEach(unsplahStore.photos.indices, id: \.self) { index in
                     if index % 2 == 0 {
                     LatestPostsViewCell(bookmarkStore: bookmarkStore, unsplash: unsplahStore.photos[index])
                            .setSkeletonView(opacity: 0.5, shouldShow: isLoading)
                            }
                          }
                       }
                   VStack(alignment: .leading) {
 						 ForEach(unsplahStore.photos.indices, id: \.self) { index in
                     if index % 2 != 0 {
  					 LatestPostsViewCell(bookmarkStore: bookmarkStore, unsplash: unsplahStore.photos[index])
                     .setSkeletonView(opacity: 0.5, shouldShow: isLoading)
                                }
                            }
                        }
                    }
                    Spacer()
                    ProgressView()
                        .onAppear() {
                            if !unsplahStore.pageEnd {
                                DispatchQueue.main.asyncAfter(deadline: .now() + 5.0) {
                                    pageCount += 1
                                    print(pageCount)
                                    unsplahStore.fetchNextAllPhoto(page: pageCount, per_page: 10)
                                    if pageCount == 5 {
                                        print(self.unsplahStore.photos.count)
                                        self.unsplahStore.pageEnd = true
                                    }
                                }
                            }
                        }
                }

코드설명

이 코드의 최상단 뷰는 ScrollView입니다.

ScrollView(showsIndicators: false) 

이후에 LazyVStack으로 데이터가 렌더링 될 때 뷰에 나타납니다.

렌더링?

• 이미지 합성은 컴퓨터 프로그램을 사용하여 2D 또는 3D 모델에서 사실적인 이미지(photorealistic) 또는 사실적이지 않은 이미지(non-photorealistic)를 생성하는 프로세스이다.
  라고 하는데요.

솔직히 어렵게 느껴지기도 하지만 쉽게 생각하면 뷰에 그 이미지가 그려질 시점이라고 생각한다면 편합니다.

그리고 Hstack 안에 Vstack을 두개를 넣을겁니다.

위에 이미지처럼 왼쪽 Vstack에는 인덱스번호가 짝수인 데이터만 밑으로 나열이 되고 오른쪽은 홀수인 데이터가 나열이 되어서 밑에 이미지 처럼 됩니다.

이제 두개의 하나로 감싸놓았던 LazyVstack 밑에 프로그레스바를 배치하여 뷰가 onAppear 될 때 마다 새롭게 이미지를 갱신하도록 하였습니다.