UICollectionView

UICollectionView

• 구성 및 커스텀이 가능한 레이아웃의 집합된 뷰들을 보여줌
  • Cell : 각 컨텐츠의 각 부분에 대한 시각적 요소(item)
  • Layout : 컨텐츠의 시각적 배열을 정의
  • Data Source 객체 : 데이터를 제공
  • Delegate 객체 : 컨텐츠와 사용자 간의 선택, 강조 표시와 같은 상호 작용을 관리
  • CollectionViewController
• 정렬된 데이터 아이템들을 관리하고, Custom 가능한 레이아웃 사용하여 표시하는 객체
• CollectionView는 추가하면 앱의 주요 작업은 CollectionView와 관련 데이터를 관리하는 것
• DataSource에서 객체 데이터를 가져온다
  • UICollectionViewDiffableDataSource를 사용가능하게 됨
  • UICollectionViewDataSourc를 채택하여 custom DataSource 객체를 생성
• CollectionView의 데이터는 개별 item으로 구성되고, section으로 그룹화할 수 있음
• Supplementary View : 다른 타입 뷰를 사용하여 데이터를 표시할 수 있음→ 이는 선택 사항이며, CollectionView의 레이아웃 객체에 의해 위치가 결정됨CollectionView의 메소드를 사용하여 보여지는 item과 데이터 소스 객체가 일치하는 지 확인함
• → 보여지는 item과 데이터 소스 객체 일치여부를 DiffableDataSource는 자동으로 관리함
• → user Interface에 CollectionView를 넣는 것 뿐만 아니라
• → 이러한 뷰는 개별의 셀들과 별개이지만, 정보를 알리는 section의 header와 footer의 역할
• Custom Data Source를 사용하는 경우 Collection에서 데이터 추가, 삭제, 재정렬할 때마다 CollectionView 메소드 사용 - insert, delete, rearrange

Layouts

• UICollectionViewLayout은 추상클래스라서 메소드가 선언만 되어 있다
• CollectionView의 컨텐츠 배열을 정의
• UICollectionViewLayout의 하위 클래스로, CollectionView의 모든 셀과 Supplementary View의 구성과 위치를 정의
• 위치를 정의하지만 레이아웃에서 뷰에 위치를 적용하진 않음
• → 셀 생성 시 데이터 소스와 컬레션 뷰 간 레이아웃 정보가 적용됨
• collectionViewLayout 프로퍼티를 사용하면 동적 효과를 줄 수 있다
• 이때 애니메이션 적용은 setCollectionViewLayout(_:animated:completion:)메서드 호출

FlowLayout

• 아이템을 그리드 안에서 옵셔널 header와 footer뷰를 정렬하는 객체
• 단순한 레이아웃 작업을 할 때 사용 - 제한된 커스터 마이징
• 선형 레이아웃에 적합
• 수직 스크롤
• 수평 스크롤
• 단일행 스크롤

UICollectionViewCompositionalLayout

• 복잡한 유형의 레이아웃을 조합 가능
• 다중 스크롤 방향을 만들 수 있다

Cell & Supplementary View

• CollectionView의 컨텐츠를 처음 로드할 때 데이터를 각 item에 뷰를 제공하도록 요청
• 새로은 뷰를 만들어서 사용하는 것이 아닌, 뷰를 dequeue하여 사용함

응답성을 향상시키기 위해 데이터를 미리 부르는 2가지 방법

Data prefetching

• 셀에 대한 요청보다 먼저 데이터 요수사항을 알림
• 네트워크 요청과 같은 비용이 많이 드는 데이터 수신 프로세스를 사용하는 경우 유용함

Cell prefetching

• 다수의 셀을 사용하는 경우 필요시간보다 미리 셀을 불러 놓아 준비 - default = enabled
• 사용자가 항목을 재정렬하도록 허용한 경우 항목의 위치를 업데이트하도록 Gesture Recognizer를 구성 가능

minimumLineSpacing - 위아래 간격(세로 스크롤), 좌우 간격(가로 스크롤)
minimumInteritemSpacing - 좌우 간격(세로 스크롤), 위아래 간격(가로 스크롤)

sectionInset

let sectionInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.frame.width
        let height = collectionView.frame.height
        let itemsPerRow: CGFloat = 2
        let widthPadding = sectionInsets.left * (itemsPerRow + 1)
        let itemsPerColumn: CGFloat = 3
        let heightPadding = sectionInsets.top * (itemsPerColumn + 1)
        let cellWidth = (width - widthPadding) / itemsPerRow
        let cellHeight = (height - heightPadding) / itemsPerColumn
        
        return CGSize(width: cellWidth, height: cellHeight)
}

UICollectionViewDiffableDataSource

• 데이터를 관리하고 CollectionView에 대한 셀을 제공하는 객체

@MainActor @preconcurrency
class UICollectionViewDiffableDataSource<SectionIdentifierType, ItemIdentifierType> : NSObject where SectionIdentifierType : Hashable, SectionIdentifierType : Sendable, ItemIdentifierType : Hashable, ItemIdentifierType : Sendable

• DiffableDataSource 객체는 CollectionView와 함께 작용하는 특수 유형 데이터 소스
• → DiffableDataSource : 변경 가능 데이터
• CollectionView의 데이터 및 UI를 업데이트를 효율적인 방식 관리에 필요한 동작을 제공
• UICollectionViewDataSource 프로토콜을 준수해야 사용 가능함
• CollectionView를 Data로 채우는 방법
  1. diffable data source를 CollectionView에 연결
  2. CollectionView의 셀을 구성하려면 Cell Provider를 구현해야 함
  3. Data의 현재 상태를 생성
  4. UI에 Data를 표시
• DiffableDataSource를 CollectionView에 연결하려면 init(collectionView:cellProvider:)을 활용하여 변경 가능한 데이터 소스를 만들고 지정된 CollectionView에 연결, UI에 데이터를 표시하는 방법을 결정하도록 셀을 구성하는 Cell Provider를 전달ㅌ
• diffable 데이터 소스로 구성한 후 CollectionView 데이터 소스를 변경하지 말아야함
• CollectionView를 초기화 한 후 새 데이터 소스가 필요한 경우에는 새로운 CollectionView와 새로운 diffable 데이터 소스를 만들어서 구성해야함

dataSource = UICollectionViewDiffableDataSource<Int, UUID>(collectionView: collectionView) {
    (collectionView: UICollectionView, indexPath: IndexPath, itemIdentifier: UUID) -> UICollectionViewCell? in
    // Configure and return cell.
}

---

NSDiffableDataSourceSnapshot

• 특정 시점에서 View의 데이터 상태를 표현한 것
• → 특정 시점의 데이터의 갯수
• Diffable data sources는 Snapshot을 사용하여 CollectionView 및 TableView에 데이터를 제공
• 데이터를 초기화하고, 변경사항을 반영할때 Snapshot을 사용
• SnapShot의 데이터는 사용자가 결정한 순서대로 section과 item으로 구성
• adding, deleting, moving 등으로 내용을 구성
• section과 item은 Hashable 프로토콜을 준수
• 식별자에 struct, enum, Int, String, UUID과 같은 값타입이 들어와야 한다
• → 객체별로 구분이 되어야하기 때문
• snapshot을 사용하여 View에 데이터를 표기하는 방법
  1. Snapshot을 만들고 디스플레이에 표시하려는 데이터의 상태로 채운다
  2. UI의 변경 사항을 반영하도록 Snapshot을 적용
• Snapshot 구성 방법
  1. 빈 snapshot을 만들고 section과 item을 넣는다
  2. diffable 데이터 소스의 snapshot() 메서드를 호출하여 현 snapshot을 가져와서 데이터를 수정하여 반영