Collection View

안녕하세요. 그린입니다!

이번 포스팅에서는 Collection View (컬렉션 뷰)에 대해 알아보겠습니다.

 

컬렉션 뷰는 테이블 뷰와 비슷한 개념으로 데이터들을 형태로 나타낼 수 있는 뷰입니다.

그러나 테이블 뷰와는 차이점도 있고 공통점도 많습니다. 컬렉션 뷰에 대해 더 자세히 알아보도록 하죠!

 

1. 정의 및 특징

 1) 데이터 (아이템)을 그리드 형태로 나타내는 뷰

  -. 그리드란? 격자무늬라는 사전적 단어의 의미로 표와 같은 형태

 2) 테이블 뷰에 비해 데이터 나열이 프리하여 테이블 뷰보다 많은 아이템을 보여줄때 유리함

 3) 유연하고 변경 가능한 레이아웃의 사용

 

2. 구성

 : 컬렉션 뷰에는 아래 3가지 요소의 뷰로 구성됨

 1) Supplementary View (보충 뷰): Section Header, Footer 지원함으로 필수 구현사항은 아님

 2) Cell (셀): Content View

 3) Decoration View (데코레이션 뷰): 백그라운드 설정

 

3. 컬렉션 뷰 생성 방법

 : 기본적으로 테이블 뷰와 생성 라이프 싸이클이 비슷하다.

 1) Collection View 생성

 2) 뷰에 Collection View Cell을 이용하여 셀 생성

 3) Cell ID 지정 (추후 셀의 재사용을 위함)

 4) Collection View에 대해 컨트롤러 클래스를 연결하여 Delegate / DataSource를 설정 (self)

 5) Cell을 다룰 클래스 파일 생성 및 구현

 6) 컨트롤러 클래스를 extension (확장)하여 UICollectionViewDelegate / UICollectionViewDataSource 상속

 7) 세부 구현

 

4. 컬렉션 뷰 필수 및 주요 메서드

 1) collectionView(_:numberOfItemsInSection:) // 아이템 개수 지정

 2) collectionView(_:cellForItemAt:) // 셀 생성

 3) collectionView(_:layout:minumumLineSpacingForSectionAt:) // 셀 레이아웃 위 아래 지정 설정

 4) collectionView(_:layout:minimumInteritemSpacingForSectionAt:)  // 셀 레이아웃 양 옆 지정 설정

 

5. 테이블 뷰와 차이점

 1) 테이블 뷰는 cell만 재사용하지만, 컬렉션 뷰의 경우 cell뿐만 아니라 supplementary View도 재사용 대상

 2) 테이블 뷰는 목록 형태로 세로 스크롤만 가능하며 static content layout들을 제공

 3) 컬렉션 뷰는 다양한 형태로 생성 가능하며 static content layout을 제공하지 않는다. 

 4) IndexPath에서 테이블 뷰는 세로 리스트 형식으로만 표현할 수 있음으로 row를 받아오지만

     컬렉션 뷰는 가로로도 표현이 가능함으로 row라는 표현이 맞지 않는다. (때에 따라 column/row로 표현되기에) 

     그래서 item이라는 네이밍을 사용한다.

 

6. Flow Layout

 : Flow Layout을 통해 아이템들을 어떻게 나타낼 지 구성합니다.

1) Flow Layout 객체 -> 컬렉션뷰의 레이아웃 객체 지정

2) 셀 높이 / 너비 / 간격 설정

3) Header / Footer 크기 설정 (필요 시)

4) 스크롤 방향 설정

 

7. 컬렉션 뷰의 추가 정보

 1) UICollectionViewFlowLayout으로 row에 가능한 많은 cell이 배치될 수 있도록 권장

 2) UICollectionViewDelegateFlowLayout을 채택하여 delegate로 동적인 레이아웃을 구성할 수 있음

 3) 상하 스크롤 안에 상하 스크롤을 중복으로 넣는것은 권장하지 않음

 4) 컬렉션 뷰에서 앞으로는 리스트를 표현할 방법이 생겼음!

 

 

[컬렉션 뷰와 논지를 벗어난 알게된 사실]

 1. HTTPS 기본포트 443 / HTTP 기본포트 80

 2. HTTPS는 HTTP 프로토콜에서 TLS / SSL 프로토콜을 사용하여 세션 데이터를 암호화함 (TLS는 SSL의 확장/현대판 버전)

 3. 테이블뷰 셀의 재사용 큐에 재사용 대기중인 셀의 수는 제어할 수 없음

 4. 테이블뷰 셀은 재사용 전에 자동으로 초기화하기전에 스스로 초기화 하지 않음 (prepareForReuse 사용해야함)

 

이상으로 컬렉션 뷰에 대해 간략히 알아보았습니다..!

더 이번 포스팅에 대해 보충을 해보면서 학습을 하여 완성도 있게 보완하겠습니다😏

감사합니다 :D

 

[참고자료]

https://ios-development.tistory.com/103

https://greatpapa.tistory.com/54

https://sylii.tistory.com/10

http://labs.brandi.co.kr/2018/05/02/kimjh.html