Swift - ModernCollectionView

안녕하세요. 지난 포스팅에서는 CollectionView의 CompositionalLayout에 대해서 포스팅해봤습니다.

이번 포스팅에서는 ModernCollectionView에 대해서 공부하고 정리해 보겠습니다!

 

 

공식 문서부터 한번 살펴보겠습니다!

---

728x90

https://developer.apple.com/documentation/uikit/views_and_controls/collection_views/implementing_modern_collection_views

Implementing Modern Collection Views | Apple Developer Documentation

 

CollectionView를 이용하면 복잡했던 뷰들을 간단히 만들 수 있는데요. Diffable 데이터 소스를 이용해 이 CollectionView를 효율적으로 관리할 수 있습니다.

 

Diffable은 화면이 보일 아이템이 업데이트될 때마다 collectionView가 자동으로 업데이트가 됩니다.

 

 

마찬가지로

"Compositional layout, a type of collection view layout that’s composable, flexible, and fast, letting you build any kind of visual arrangement for your content."

 

이전 포스팅에서 정리했던 컴포지셔널 레이아웃을 이용해서 레이아웃을 만들고 Modern Collection View를 다룰 수 있습니다!

 

1. Compositional Layout 생성

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2),
                                     heightDimension: .fractionalHeight(1.0))
let item = NSCollectionLayoutItem(layoutSize: itemSize)


let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                      heightDimension: .fractionalWidth(0.2))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                 subitems: [item])


let section = NSCollectionLayoutSection(group: group)


let layout = UICollectionViewCompositionalLayout(section: section)
return layout

 

위와 같이 아이템, 그룹의 사이즈, 섹션 및 레이아웃을 정의해 줍니다.

 

2. 항목 주위 간격 추가

items의 inset 항목 주위에 간격을 추가해 균일한 간격을 적용합니다.

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2),
                                     heightDimension: .fractionalHeight(1.0))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
item.contentInsets = NSDirectionalEdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5)

 

 

그 후, CollectionView를 사용하는 방법 그대로 해당 레이아웃을 추가해 사용하시면 됩니다!

 

CollectionView에 대한 추가 정보는

https://swfitman.tistory.com/56

IOS - UICollectionView

 

이전 포스팅을 참고해 주세요!

 

# Collection View 데이터 업데이트

func performQuery(with filter: String?) {
    let mountains = mountainsController.filteredMountains(with: filter).sorted { $0.name < $1.name }


    var snapshot = NSDiffableDataSourceSnapshot<Section, MountainsController.Mountain>()
    snapshot.appendSections([.main])
    snapshot.appendItems(mountains)
    dataSource.apply(snapshot, animatingDifferences: true)
}

 

PerformQuery(with:) 메서드는 데이터와 사용자 인터페이스를 업데이트합니다. 이 메서드는 현재 입력된 필터 텍스트를 가져와 이름에 해당 텍스트가 포함된 목록을 생성합니다. 그런 다음 스냅샷을 사용해 새로 필터링된 데이터의 표현을 구성합니다. 그 후, apply 메서드를 호출하여 스냅샷의 데이터를 비교 가능한 데이터 소스에 저장합니다. 

 

 

diffable 데이터 소스는 스냅샷의 데이터를 데이터의 새 상태로 저장하고, 이전 상태와 새 상태 간의 차이를 계산하고, 사용자 인터페이스를 Trigger해 새로운 상태를 나타냅니다.

 

*SnapShot

https://developer.apple.com/documentation/uikit/uitableviewdiffabledatasource/3255156-snapshot

snapshot() | Apple Developer Documentation

여기서! 스냅샷이란? 

테이블 뷰, 컬렉션 뷰에 있는 데이터의 현재 상태에 대한 표현을 반환하는 것입니다. 

 

이 처럼, 레이아웃을 구성하고 컬렉션뷰를 나타낼 수 있습니다. 데이터도 지속적인 업데이트를 통해 복잡한 뷰를 구성할 수 있습니다.

 

그럼 오늘 포스팅은 여기서 마무리하겠습니다. 잘못된 오류에 대한 지적은 언제든지 환영입니다! 감사합니다.