UICollectionView 🍎

1️⃣ 정의

정렬된 데이터 항목 컬렉션을 관리하고 사용자 지정 가능한 레이아웃을 사용하여 표시하는 뷰

@MainActor
class UICollectionView : UIScrollView

2️⃣ 설명

• 컬렉션 뷰는 데이터 소스 객체에서 데이터를 가져와서 컬렉션 뷰의 dataSource 프로퍼티에 저장
• dataSource의 경우 컬렉션 뷰의 데이터 및 사용자 인터페이스에 대한 업데이트를 간단하고 효율적으로 관리하는 데 필요한 동작을 제공하는 UICollectionViewDiffableDataSource 객체를 사용
• 또는 UICollectionViewDataSource 프로토콜을 채택하여 사용자 지정 데이터 소스 객체를 만들 수 있음
• 컬렉션 뷰의 데이터는 개별 항목으로 구성되며, 이를 섹션으로 그룹화하여 프레젠테이션할 수 있음
• item은 표시하려는 데이터의 가장 작은 단위
• 예를 들어 사진 앱에서 item은 단일 이미지일 수 있음
• 컬렉션 뷰는 데이터 소스에서 구성하고 제공하는 UICollectionViewCell 클래스의 인스턴스인 셀을 사용하여 화면에 항목을 표시
• 컬렉션 뷰는 셀 외에도 다른 유형의 뷰를 사용하여 데이터를 표시할 수 있음
• 이러한 supplementary view 들은 각 셀과 별개로 섹션 헤더와 푸터를 포함할 수 있으며 정보를 전달함
• supplementary view 구현은 선택적이며 컬렉션 뷰의 레이아웃 객체에 의해 정의되며 또한 해당 뷰들의 배치를 정의하는 역할을 수행
• 사용자 인터페이스에 UICollectionView를 임베드하는 것 외에도 컬렉션 뷰의 메서드를 사용하여 항목의 시각적 표시가 데이터 소스 객체의 순서와 일치하도록 할 수 있음
  UICollectionViewDiffableDataSource 개체가 이 프로세스를 자동으로 관리함
• 사용자 지정 데이터 소스를 사용하는 경우 컬렉션에서 데이터를 추가, 삭제 또는 재정렬할 때마다 UICollectionView의 메서드를 사용하여 해당 셀을 삽입, 삭제 및 재정렬함
• 컬렉션 뷰 객체를 사용하여 선택한 항목을 관리할 수도 있지만, 이 동작의 경우 컬렉션 뷰는 연결된 델리게이트 개체와 함께 작동함

📌 Layouts

• 레이아웃 객체는 컬렉션 뷰에서 콘텐츠의 시각적 배열을 정의함
• UICollectionViewLayout 클래스의 하위 클래스인 레이아웃 객체는 컬렉션 뷰 내의 모든 셀 및 보조 보기의 구성과 위치를 정의함
• 레이아웃 객체는 해당 위치를 정의하지만 실제로 해당 정보를 해당 뷰에 적용하지는 않음
• 셀 및 보조 뷰를 만들려면 컬렉션 뷰와 데이터 소스 개체 간의 조정이 필요하기 때문에 컬렉션 뷰는 해당 뷰에 레이아웃 정보를 적용함
• 레이아웃 객체는 항목 데이터 대신 시각적 정보를 제공한다는 점을 제외하면 다른 데이터 소스와 비슷함
• 일반적으로 컬렉션 뷰를 만들 때 레이아웃 객체를 지정하지만 컬렉션 뷰의 레이아웃을 동적으로 변경할 수도 있음
• 레이아웃 객체는 collectionViewLayout 프로퍼티에 저장됨
• 이 프로퍼티를 설정하면 변경 사항에 애니메이션을 적용하지 않고 레이아웃이 즉시 업데이트됨
• 변경 사항에 애니메이션을 적용하려면 대신 setCollectionViewLayout(_:animated:completion:) 메서드를 호출하면 됨
• gesture recognizer 또는 touch events에 의해 구동되는 인터랙티브 트랜지션을 만들려면 startInteractiveTransition(to:completion:) 메서드를 사용하여 레이아웃 객체를 변경해야함
• 이 메서드는 gesture recognizer 또는 event-handling code와 함께 작동하여 전환 진행 상황을 추적하는 중간 레이아웃 객체를 설치함
• 이벤트 처리 코드가 전환이 완료되었다고 판단하면 finishInteractiveTransition() 또는 cancelInteractiveTransition() 메서드를 호출하여 중간 레이아웃 객체를 제거하고 의도한 대상 레이아웃 객체를 설치함

📌 Cells and supplementary views

• 컬렉션 뷰의 데이터 소스 객체는 아이템의 콘텐츠와 해당 콘텐츠를 표시하는 데 사용되는 뷰를 모두 제공
• 컬렉션 뷰가 처음 콘텐츠를 로드할 때, 각 가시적인 아이템에 대해 데이터 소스에게 뷰를 제공하도록 요청
• 컬렉션 뷰는 데이터 소스가 재사용을 위해 표시한 뷰 객체들의 큐나 리스트를 유지함
• 코드에서 새로운 뷰를 명시적으로 생성하는 대신에, 항상 뷰를 재사용 대기 큐에서 dequeue 함
• 뷰를 dequeue하는 데에는 두 가지 방법이 있는데, 어떤 유형의 뷰가 요청되었는지에 따라 다음과 같은 두 가지 메서드를 사용함

  뷰를 dequeue하는 메서드

  • dequeueReusableCell(withReuseIdentifier:for:) : 이 메서드는 컬렉션 뷰의 아이템(셀)에 대한 뷰를 가져오는 데 사용됨
  • dequeueReusableSupplementaryView(ofKind:withReuseIdentifier:for:) : 이 메서드는 레이아웃 객체가 요청한 보충 뷰(예: 섹션 헤더 또는 푸터)를 가져오는 데 사용됨

• 두 메서드 중 하나를 호출하기 전에, 해당 뷰가 존재하지 않을 경우 컬렉션 뷰에게 뷰를 어떻게 생성해야 하는지 알려주어야 함
• 이를 위해 컬렉션 뷰에 클래스(class) 또는 니브(NIB) 파일을 등록해야 함
• 셀을 등록할 때는 register(:forCellWithReuseIdentifier:) 메서드를 사용하여 클래스를 등록하거나 register(:forCellWithReuseIdentifier:) 메서드를 사용하여 니브 파일을 등록함
• 등록 과정에서 뷰의 재사용 식별자(reuse identifier)를 지정함
• 이 식별자는 나중에 뷰를 dequeue할 때 사용하는 문자열과 동일
• 데이터 소스 메서드에서 적절한 뷰를 dequeue한 후, 해당 뷰의 콘텐츠를 구성하고 컬렉션 뷰에 반환하여 사용함
• 레이아웃 객체로부터 레이아웃 정보를 가져온 후, 컬렉션 뷰는 이를 해당 뷰에 적용하고 화면에 표시함

📌 Data prefetching

• 컬렉션 뷰는 반응성을 향상시키기 위해 사용할 수 있는 두 가지 사전 가져오기(prefetching) 기술을 제공함

1️⃣ Cell prefetching

• 셀 사전 가져오기(Cell prefetching)는 해당 셀들이 필요한 시간 이전에 미리 준비하는 기술
• 예를 들어, 그리드 레이아웃에서 새로운 셀 행을 표시해야 할 때, 한 번에 많은 수의 셀이 필요하게 됨

  그리드 레이아웃

  • 요소들을 격자 형태로 배치하는 레이아웃 방식
  • 일정한 간격으로 행과 열을 형성하여 요소들을 정렬하는 방법

• 이때 셀들은 화면에 표시되기 전에 미리 요청됨
• 따라서 셀 렌더링은 여러 레이아웃 패스(layout pass)에 걸쳐 분산되며, 이로 인해 더 부드러운 스크롤링 경험이 이루어짐
• 셀 사전 가져오기는 기본적으로 활성화되어 있음

2️⃣ Data prefetching

• 데이터 사전 가져오기(Data prefetching)는 셀 요청이 발생하기 전에 미리 컬렉션 뷰의 데이터 요구 사항에 대해 알려주는 메커니즘을 제공
• 이는 셀의 콘텐츠가 비용이 많이 드는 데이터 로딩 과정(예: 네트워크 요청)에 의존하는 경우에 유용함
• 데이터 사전 가져오기를 위해 UICollectionViewDataSourcePrefetching 프로토콜을 준수하는 객체를 prefetchDataSource 속성에 할당하여 셀 데이터를 사전에 가져올 시점에 대한 알림을 받을 수 있음

📌 Reorder items interactively

• 컬렉션 뷰는 사용자 상호작용에 따라 항목들을 이동할 수 있도록 허용
• 일반적으로 컬렉션 뷰의 항목들의 순서는 데이터 소스에 의해 정의됨
• 하지만 항목들의 재정렬을 사용자에게 허용한다면, 제스처 인식기(gesture recognizer)를 구성하여 사용자의 컬렉션 뷰 항목과의 상호작용을 추적하고 해당 항목의 위치를 업데이트할 수 있음
• 항목의 상호작용적인 재배치를 시작하려면, 컬렉션 뷰의 beginInteractiveMovementForItem(at:) 메서드를 호출함
• 제스처 인식기(gesture recognizer)가 터치 이벤트를 추적하는 동안, updateInteractiveMovementTargetPosition(_:) 메서드를 호출하여 터치 위치의 변경 사항을 보고함
• 제스처 추적을 마치면, endInteractiveMovement() 또는 cancelInteractiveMovement() 메서드를 호출하여 상호작용을 마무리하고 컬렉션 뷰를 업데이트함
• 사용자 상호작용 중에 컬렉션 뷰는 항목의 현재 위치를 반영하기 위해 동적으로 레이아웃을 무효화함
• 아무 조치를 취하지 않으면, 기본 레이아웃 동작에 따라 항목들이 자동으로 재배치되지만, 원한다면 레이아웃 애니메이션을 사용자 정의할 수도 있음
• 상호작용이 끝나면, 컬렉션 뷰는 데이터 소스 객체를 새로운 항목 위치로 업데이트함
• UICollectionViewController 클래스는 관리하는 컬렉션 뷰에서 항목들을 재배치하기 위해 사용할 수 있는 기본 제스처 인식기를 제공함
• 이 기본 제스처 인식기를 설치하려면, 컬렉션 뷰 컨트롤러의 installsStandardGestureForInteractiveMovement 속성을 true로 설정하면 됨

---

출처📚

🍎Apple Docs: UICollectionView