Overview
이번 포스트에서는 공식문서를 바탕으로 UICollectionView의 개념에 대해 알아보겠습니다.
UICollectionView는 UITableView랑 매우 비슷하다. dataSource객체가 뷰 내의 데이터를 관리하는 역할을 하며, UITableViewCell처럼, UICollectionViewCell에 데이터를 넣어 뷰를 채운다.
테이뷸 뷰에서는 하나의 행(Row)에 하나의 cell이 들어간다. 하지만, 컬렉션 뷰에서는 하나의 Item에 하나의 cell이 들어간다. 이 때, Item의 레이아웃은 Layout객체를 통해 관리할 수 있다.
Layout
컬렉션 뷰에서는 하나의 로우에 하나의 셀이 들어있는 테이블 뷰와 달리, 사용자가 커스텀해 컬렉션 뷰의 레이아웃을 설정할 수 있다. 물론, 레이아웃 객체는 항상 컬렉션 뷰에 정확하게 들어맞지는 않는다(공식문서에서, 컬렉션 뷰 셀의 데이터 객체와도 상호작용이 있기때문이라고 함)
컬렉션 뷰의 레이아웃 프로퍼티에 레이아웃 객체를 할당해 즉시 적용할 수도 있지만, 동적으로 할당하고자 한다면 setCollectionViewLayout(_:animated:completion:) 메소드를 이용하면 된다.
Reordering Items Interactively
컬렉션 뷰에서는 사용자와의 상호작용으로 인한 아이템의 업데이트를 제공한다. (순서를 바꾸기, 데이터 변경 등등..)
이를 위해서는 컬렉션 뷰 컨트롤러에서 기본적으로 제공하는 프로퍼티인 installsStandardGestureForInteractiveMovement 를 true로 해주어야한다.
이후에, 사용자의 제스쳐가 인식되면 beginInteractiveMovementForItem(at:) 를 호출하고, 사용자의 제스쳐가 Tracking 중일때는 updateInteractiveMovementTargetPosition(_:) 를 호출해 사용자의 제스쳐 위치를 업데이트한다.
제스쳐가 종료되면 endInteractiveMovement() 나 cancelInteractiveMovement() 메소드를 호출해 사용자의 제스쳐가 종료되었음을 알린다.
UICollectionViewLayout
레이아웃 객체는 컬렉션 뷰 내부의 셀 객체, 보조 뷰, 장식 뷰의 정보를 바탕으로 셀 배치 레이아웃을 결정하고,
이를 컬렉션 뷰 객체에 알린다. 컬렉션 뷰는 이를 바탕으로 Content 를 나타낸다.
레이아웃 객체를 서브클래싱할때는 아래의 3가지 항목을 유의하자.
- 컬렉션 뷰의 메인 객체인 셀은 레이아웃 객체에 의해 정렬된다.
- 섹션의 헤더 뷰나, 푸터 뷰의 경우에도 레이아웃 객체에 의해 정렬된다.
- 뱃지와 같은 데코레이션 뷰의 경우에도 레이아웃 객체에 의해 구성되고 정렬된다.
추가적으로, 레이아웃 객체는 컬렉션 뷰의 화면내에서만 보이는 객체들에 대해 레이아웃을 구성한다
애플 개발자 아카이브에서 찾은 컬렉션 뷰의 관계도다.
- 레이아웃 객체는 구성한 속성에 따라, 컬렉션 뷰에게 레이아웃을 제공한다.
- 데이터 소스 객체는 Cell에 들어갈 내용을 구성한다.
- 컬렉션 뷰는 레이아웃 객체에게 받아온 레이아웃 구성 정보를 바탕으로, Cell을 배치한다.
UICollectionViewFlowLayout
UICollectionViewLayout 객체는 row 레벨의 레이아웃(레이아웃 업데이트, 애니메이션 등등)에 대한 메소드를 제공하는 반면, 플로우 레이아웃 객체는 구체적으로 컬렉션 뷰의 레이아웃을 설정할 수 있다.
그리드(격자) 방식으로, 스크롤의 방향, 셀의 크기, 섹션의 헤더와 푸터의 크기 등등을 구체적으로 설정할 수 있다.
UICollectionViewDelegateFlowLayout
컬렉션 뷰의 Delegate 인스턴스를 UICollectionViewDelegateFlowLayout 프로토콜을 따르게 구현하면, 메소드의 구현만으로 컬렉션 뷰의 레이아웃을 구성할 수 있다. 만약, 구현하지 않은 레이아웃 속성이 있다면 플로우 레이아웃 객체는 적절하게 Default 값으로 레이아웃을 구성해 전달한다.
참고자료
