Collection View 공부하기 - 1 (이론)

Collection View에 대해서 공부해보겠습니다.

Collection View는 데이터의 나열이 자유롭습니다. 또한 UICollectionViewLayout 객체를 상속받아서 나만의 레이아웃도 만들 수 있습니다.

UICollectionViewLayout : 컬렉션 뷰의 레이아웃을 전문적으로 관리하는 객체

또한 테이블 뷰와 마찬가지로 구현할 때는 DataSource와 Delegate 프로토콜을 채택해야 합니다.

 

Data Source

Collection View는 DataSource 오브젝트 (CollectionView.dataSource 프로퍼티에 저장되어 있음)로부터 데이터 정보를 받습니다.

UICollectionViewDiffableDataSource 객체를 사용하면 collection view의 데이터와 user interface 사이의 업데이트를 효율적으로 관리해줍니다.

기본적으로는 UICollectionViewDataSource 프로토콜을 채택하여 커스텀하게 데이터를 관리합니다.

apple developer 문서 사진

Collection View의 데이들은 item으로 이루어져 있는데, 이 item을 section으로 묶어서 보여줍니다.

하나의 item은 가장 작은 data unit이고 사진첩의 경우 하나의 사진을 의미합니다.

Collection view는 이 item을 cell을 사용해서 보여줍니다. 이 cell은 UICollectionViewCell 클래스의 인스턴스입니다.

 

collection view는 cell 뿐만 아니라 다른 타입의 뷰도 제공합니다. 이것을 supplementary view라고 합니다.

section header와 footer가 그 예인데 이것들도 정보를 포함하고 있습니다.

cell과는 다르게 옵셔널이고 collection view의 layout 객체에 의해서 정의됩니다. layout 객체는 이 뷰의 위치를 정합니다.

 

Delegate

Collection View 객체는 delegate 객체를 가지고 선택된 아이템들도 관리할 수 있습니다.

 

Layouts

레이아웃 객체는 컬렉션 뷰 내의 요소들의 시각적인 배열을 정의합니다.

UICollectionViewLayout 클래스를 상속 받은 레이아웃 객체가 모든 셀과 supplementary view들의 구성과 위치를 정의합니다. (하지만 데이터 정보는 가지고 있지 않음)

기본적으로 컬렉션 뷰를 생성하면 레이아웃 객체는 생성되지만 원하는 대로 레이아웃을 바꾸는 것도 가능합니다.

레이아웃 객체는 collectionViewLayout 프로퍼티로 있고, 이 프로퍼티를 직접 설정하면 레이아웃을 바로 업데이트할 수 있습니다. (하지만 애니메이션은 없음). 애니메이션을 포함해서 레이아웃을 바꾸고 싶다면 setCollectionViewLayout(_: animated:completion:) 메서드를 사용합니다.

제스처나 터치 이벤트에 의한 transition을 적용하고 싶으면 startInteractiveTransitino(to:completion:) 메소드를 사용합니다.

이 메소드는 intermediate layout object를 만들어서 gesture recognizer나 event-handling 코드와 함께 transition을 추적합니다.

만약 event-handling 코드가 transition이 끝났다고 알려주면 finishInteractiveTransition()이나 cancelInteractiveTransition() 메서드를 호출합니다. 이 메서드들을 intermediate layout object를 제거하고 의도했던 target layout object를 설치? 합니다.

 

Cells and Supplementary Views

collection view가 처음 데이터를 로드할 때 data source에게 보일 데이터의 정보를 물어봅니다.

컬렉션 뷰는 재사용할 view object의 리스트 또는 큐를 가지고 있습니다. 그래서 새로운 뷰를 계속해서 만드는 것보다 큐를 사용하여 뷰들을 재사용합니다.

여기서 사용하는 메서드는 다음과 같습니다.

• dequeueReusableCell(withReuseIdentifier:for:) : item에 대한 cell 얻는 메소드
• dequeueReusableSuppementaryView(ofKind:withReuseIdentifier:for:) : supplementary view를 얻기 위한 메소드

만약 코드로 컬렉션 뷰를 추가한다면 원하는 뷰의 class 또는 nib파일을 컬렉션 뷰에 등록을 해야 합니다.

셀을 등록할 때는 register(_:forCellWithReuseIdentifier:) 메서드를 사용합니다.

 

 

[Collection View 공부 출처 : 애플 공식 문서] https://developer.apple.com/documentation/uikit/uicollectionview/

Apple Developer Documentation