UIKit의 CollectionView를 설명해주세요.

[kmh5038]

• CollectionView의 특징 및 주요기능
• CollectionView의 구성요소를 설명해주세요.
• CollectionView의 DataSource, Delegate를 설명해주세요.

[kmh5038]

1. Collection View 란?

• UICollectionView는 여러 데이터를 관리하고 커스텀 가능한 레이아웃을 사용해서 사용자에게 보여줄 수

  있는 객체이다.

2. 언제 사용하는가?

• 앱의 성격과 디자인을 고려하여 다양한 방식의 리스트로 나타내기 적합하다.

  (예시 : 인스타그램 게시물, 유튜브 뮤직 가로 스크롤 리스트)

• 다수의 열과 행을 사용해 데이터를 표시해야 할 때.

3. 주요특징 및 주요기능

• 서로 다른 Cell을 하나의 뷰 화면에서 구현하면 다채로운 UI를 구성할 수 있다.
• 간단한 리스트 형식보다는 다소 복잡한 커스텀 리스트가 필요할 때 사용을 권장한다.
• 셀 재사용을 통해 효율적으로 사용 가능하다.
• 데이터를 섹션으로 구성하여 구조화된 레이아웃을 만들 수 있다.

4. 구성 요소

• UICollectionView : CollectionView의 전체적인 뷰를 나타낸다. 데이터를 표시하는 주요 컨테이너 역할.
• UICollectionViewLayout : 셀의 배치 및 모양을 결정하는 클래스. 서브 클래스를 사용하여 CollectionView의 레이아웃을 설정하고 사용자 지정할 수 있다.
• UICollectionViewCell : 데이터 항목을 표시하는 단일 셀.서브 클래스를 만들어 각 셀의 모양과 동작을 사용자 지정할 수 있다.
• UICollectionViewDelegate, UICollectionViewDataSource : UICollectionView의 동작을 관리하고 데이터 소스를 제공하기 위한 프로토콜. 셀 구성, 선택된 항목 처리 등을 관리한다.

5. 필수 메서드 및 주요 메서드

CollectionView의 셀 구성 및 선택된 항목 처리를 하기 위해 UICollectionViewDelegate, UICollectionViewDataSource 프로토콜을 준수하여 필수 메서드를 구현하고 필요에 따라 메서드를 선택해서 사용할 수 있습니다.

5-1. UICollectionViewDataSource 필수 메서드 및 선택 메서드

5-2 UICollectionViewDelegate 주요 메서드 (필수 메서드는 없음)

이미지 출처 : https://www.zehye.kr/ios/2020/03/15/iOS_collectionView_datasource_delegate/

6. 간단 예제

우선 CollectionView를 구성하기 위한 필수 과정을 순서대로 설명 드리겠습니다.

6-1. CollectionView에 들어갈 CollectionViewCell을 정의합니다.

• UICollectionViewCell을 상속 받는 클레스 생성
  

• 셀을 초기화 해줍니다.

• 셀에 표시해줄 imageView를 정의합니다.

• 정의 해줄 imageView의 제약조건을 설정해준 후 함수를 초기화 부분에 호출 해줍니다.

6-2. CollectionView를 정의해줍니다.

• UICollectionViewController를 상속하는 클레스를 만듭니다.

  (UICollectionViewController는 UICollectionViewDelegate, UICollectionViewDataSource 프로토콜을 준수하고 있습니다.)

• CollectionView에 사용할 셀을 추가하는 메서드를 viewDidLoad에 작성합니다.

  self.collectionView!.register(CollectionViewCell.self(위에 커스텀한 셀을 사용), forCellWithReuseIdentifier: reuseIdentifier)

• 필수 메서드를 구현해줍니다. (numberOfItemsInsection, cellForItemAt)

그러면 가장 기본적인 CollectionView는 완성이 되었습니다.

6-3. CollectionViewFlowLayout으로 레이아웃 조절.

• CollectionView의 줄 간격, 행 간격을 5로 지정하고, 한 행에 3개씩 들어가게 사이즈를 조절해줍니다.

• FlowLayout 메서드를 viewDidLoad에서 호출합니다.

FlowLayout 메서드를 참고하면 좋은 링크를 첨부하겠습니다.

(https://ios-daniel-yang.tistory.com/88)

• Layout까지 조절한 완성된 CollectionView입니다.