UICollectionView?
- 데이터 항목들의 정렬된 컬렉션을 관리하고, 커스텀한 레이아웃을 이용해 표시하는 객체
- 슬라이드, 리스트 등 다양한 형태로 표현 가능
- UIScrollView를 상속받음
구성 요소
- Cell: 컬렉션 뷰의 컨텐츠를 표시
- Supplementary View: 섹션에 대한 정보를 표시
- Decoration View: 컬렉션 뷰에 대한 배경을 꾸밀 때 사용
컬렉션 뷰 구현을 위한 클래스 및 프로토콜
- Top Level Containment
UICollectionView: 컬렉션 뷰의 컨텐츠가 보이는 영역을 정의
UICollectionViewController: 컬렉션 뷰를 관리하는 뷰 컨트롤러 - 컨텐츠 관리
UICollectionViewDataSource protocol: 컬렉션 뷰의 컨텐츠를 관리하고, 해당 컨텐츠를 표시하기 위한 뷰를 제공
UICollectionViewDelegate protocol: 사용자와의 상호작용과 셀 강조 표시 및 선택을 관리 - Presentation
UICollectionReusableView: 뷰 재사용 매커니즘을 지원
UICollectionViewCell: UICollectionView 인스턴스에 제공되는 데이터를 화면에 표시하는 역할 - Layout
UICollectionViewLayout의 서브클래스는 레이아웃 객체라고 하며, 컬렉션 뷰 내부의 셀 및 재사용 가능한 뷰의 위치, 크기, 시각적 속성 정의
UICollectionViewLayoutAttribute: 컬렉션 뷰에 셀과 재사용 가능한 뷰를 표시하는 위치와 방법 알려줌.
UICollectionViewUpdateItem: 레이아웃 객체 아이템이 삽입, 삭제, 혹은 컬렉션 뷰 내에서 이동할 때마다 UICollectionViewUpdateItem 클래스의 인스턴스를 받음. - FlowLayout
UICollectionViewFlowLayout/UICollectionViewDelegateFlowLayout protocol: 그리드 혹은 라인 기반 레이아웃을 구현하는 데 사용.
DataSource & Delegate
DataSource
- 컬렉션 뷰와 관련하여 가장 중요한 객체
- 데이터소스 객체를 구현하려면 UICollectionViewDataSource 프로토콜을 준수하는 객체를 만듦
- 컬렉션 뷰의 컨텐츠를 관리하고 해당 컨텐츠를 표현하는 데 필요한 뷰를 만듦
- collectionView(:numberOfItemsInSection:) & collectionView(:cellForItemAt:)가 필수 메서드
- numberOfItemsInSection: 지정된 섹션에 표시할 항목의 개수
- numberOfSection: 섹션의 개수
- cellForItemAt: 컬렉션 뷰의 지정된 위치에 표시할 셀을 요청
- canMoveItemAt: 지정된 위치의 항목을 컬렉션 뷰의 다른 위치로 이동할 수 있는지를 물음
- moveItemAt: 지정된 위치의 항목을 다른 위치로 이동하도록 지시
Delegate
- 컬렉션 뷰에서 셀의 선택 및 강조 표시를 관리하고, 해당 셀에 대한 작업을 수행
- 메서드는 모두 선택사항
- shouldSelectItemAt: 지정된 셀이 사용자에 의해 선택될 수 있는지 물음
- didSelectItemAt: 지정된 셀이 선택됨을 알림
- shouldDeselectItemAt: 지정된 셀의 선택이 해제될 수 있는지 물음
- didDeselectItemAt: 지정된 셀의 선택이 해제되었음을 알림
UICollectionViewLayout
- 컬렉션 뷰의 Layout 정보를 생성하는 추상적인 base class
- 추상적이기 때문에 직접 사용할 수 없음
UICollectionViewFlowLayout
- 그리드 혹은 라인 기반 레이아웃을 구현하는 데 사용됨
- 컬렉션 뷰의 셀을 원하는 대로 정렬
- UICollectionViewLayout을 상속받음
FlowLayout 수직 스크롤
FlowLayout 수평 스크롤
FlowLayout 단일 행
FlowLayout 구성 단계
- FlowLayout 객체를 작성하고 컬렉션 뷰에 이를 할당한다.
- 셀의 width, height를 정한다.
- 필요한 경우 셀들 간의 좌우 최소 간격, 위아래 최소 간격을 설정한다.
- 섹션에 header와 footer가 있다면 이것의 크기를 지정한다.
- Layout의 스크롤 방향을 설정한다.
셀 및 행 사이 간격 지정하기
- 같은 행의 셀 사이의 최소 간격 지정
- 연속하는 행 사이의 최소 간격 지정
- 셀의 크기가 동일한 경우 셀의 간격
- 셀의 크기가 다른 경우 셀의 간격
UICollectionViewDelegateFlowLayout
- UICollectionViewFlowLayout 객체와 상호작용하여 레이아웃을 조정할 수 있는 메서드 정의
- 셀의 크기와 셀간 사이 간격 정의
- 메서드는 모두 선택사항
- sizeForItemAt: 지정된 셀의 크기를 반환
- insetForSectionAt: 지정된 섹션의 여백을 반환
- minimumLineSpacingForSectionAt: 지정된 섹션의 행 사이 최소 간격을 반환
- minimumInteritemSpacingForSectionAt: 지정된 섹션의 셀 사이의 최소 간격 반환
- referenceSizeForHeaderInSection: 지정된 섹션의 header 뷰의 크기를 반환
- referenceSizeForFooterInSection: 지정된 섹션의 footer 뷰의 크기를 반환
출처)
https://www.boostcourse.org/mo326/lecture/16908/?isDesc=false
https://developer.apple.com/
