[UIkit] CollectionView 알아보기 🔎 !!

CollectionView가 뭘까?

스위프트 공식 문서에서의 설명

 

Coordinates with a data source and delegate to display a scrollable collection of cells. Each cell in a collection view is a UICollectionViewCell object.
Collection views support flow layout as well a custom layouts, and cells can be grouped into sections, and the sections and cells can optionally have supplementary views.

스위프트 공식 문서에서는 여러 개의 데이터를 관리하고 커스텀 레이아웃으로 표현하는 객체라고 나와있다. 덧 붙여서 스크롤 가능한 셀 컬렉션을 표시하기 위한 개체라고 한다.  내 생각이지만? 스크롤 가능하다고 하니 이 친구도 ScrollView를 상속 받고있나보다.

궁금해서 찾아보니까 스크롤 뷰를 상속 받고 있다.

신기하구만

 

뭐 아무튼 넘어가서 그래서 테이블 뷰랑 뭐가 다른데?

테이블 뷰는 단일 열에 여러 개의 행을 갖기 때문에 수직으로만 스크롤이 가능하다 또 기본적으로 제공되는 스타일이 존재한다. 하지만! 컬렉션 뷰는 기본적으로 제공되는 스타일이 없다보니까 직접 커스터마이징 해야한다. 그래서 갤러리나 그리드 형태의 좀 더 유연한 디자인을 만들 수 있다!! 또 테이블 뷰와 다르게 물론 옆으로도 스크롤 가능하다. (수평,수직 스크롤 둘 다 가능)

 

컬렉션 뷰를 이용해서 무언가를 나타낼 때는 UIColletionView에 3가지 필요한 정보를 주면 된다.

1. 어떤 데이터를 쓸지, 2. 셀을 어떻게 표현할지, 3. 표현 할 셀들의 레이아웃을 어떻게 할건지 !

 

이러한 정보를 제공하기 위해서는

UICollectionViewDataSource, UICollectionViewDelegate 프로토콜을 추가하면 된다.

출처 : https://k-elon.tistory.com/25

위의 사진은 컬렉션 뷰의 작동원리라고 할까? 뭐 아무튼 Delegate와 DataSource를 이용해서 셀을 구성하고 컬렉션 뷰에게 넘겨주고, 넘겨 받은 셀들을 모아서 뷰를 구성하는 그런 원리인 것 같다. 

 

UICollectionViewDataSource

UICollectionViewDataSource는 컬렉션 뷰에 있어서 가장 중요한 객체다. 그래서 꼭 필수로 제공해야 한다. 일단 이 친구는 이름처럼 컬렉션 뷰의 데이터를 관리하고 컬렉션 뷰를 표현하는 셀을 만드는 역할을 한다. 필수 메소드 두 가지가 있는데, 첫번째는 몇 개의 아이템을 표시할지를 묻는 메소드, 두번째는 컬렉션 뷰에 표시할 셀을 요청하는 메소드이다.

// 표현할 아이템의 개수를 묻는 메소드
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int

// 켤렉션 뷰를 구성(표시) 할 셀을 요쳥하는 메소드
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell

 

UICollectionViewDelegate

UICollectionViewDelegate는 컬렉션 뷰에 있어서 셀의 선택을 관리하고 작업을 수행할 수 있는 메소드를 정의한다. 이 친구는 UICollectionViewDataSource 이 친구와 다르게 필수가 아닌 선택 사항이다. 메소드가 엄청 많은데 내가 몇개 읽어보고 중요하다고 생각한 메소드는 아무래도 셀의 선택의 관리하는 객체니까 셀의 선택에 관한 메소드이지 않을까 싶다.

// 셀이 선택 될 수 있는지? 선택 가능 : true, 불가능 : false
func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool

// 셀이 선택 됐음을 알린다.
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)

// 셀이 해제될 수 있는지? 해제 가능 : true, 불가능 : false
func collectionView(_ collectionView: UICollectionView, shouldDeselectItemAt indexPath: IndexPath) -> Bool

// 셀이 해제 됐음을 알린다.
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath)

 

 

자 이제 DataSource와 Delegate에 대해서 간단하게 알아봤다. 마지막 남은 녀석이 있다. 바로 UICollectionViewFlowLayout이라는 녀석인데, 이 친구는 컬렉션 뷰를 구성하는 각 셀들을 원하는 형태로 정렬하게 해주는 아주 친절한 친구이다. 일단 이 친구의 특징은 행에 최대한 많은 셀을 채우는게 특징인데, 만약 현재 행에서 레이아웃 객체의 공간이 부족하면 새로운 행을 생성하고 생성한 행에서 레이아웃 프로세스롤 계속 진행한다!!

출처 : https://k-elon.tistory.com/26

출처 : https://k-elon.tistory.com/26

자 그럼 최종적으로 컬렉션 뷰가 작동하는 원리는 DataSource와 Delegate로 Cell을 만들어 컬렉션 뷰에 제공하고, 컬렉션 뷰는 FlowLayout에게 셀을 제공하여 레이아웃 속성을 적용 시킨 후 다시 컬렉션 뷰로 반환하여 최종적으로 완성한다. (이게 맞나? 흠)

 

자 그럼 FlowLayout은 어떻게 만드는데?

Delegate와 DataSource처럼 만들면 된다.

UICollectionViewDelegateFlowLayout

UICollectionViewDelegateFlowLayout이 친구를 통해 FlowLayout을 구성하면 된다. 이 친구도 Delegate와 마찬가지로 선택 사항이다. 내가 생각하는 중요한 메소드는 크기나 여백, 패딩 관련된 메소드가 중요할 것 같다. 직접 써보면서 느껴봐야하겠지만 말이지..

// 1. 셀의 라인 사이 최소 간격을 반환하는 메소드
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {}
// 2. 셀끼리의 최소 간격을 반환하는 메소드
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {}
// 3. 셀의 크기를 반환하는 메소드
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {}

다른 메소드도 더 많지만 일단 기본이 가장 중요하지 않나 싶다. 나중에 차차 공부하도록 하고! 넘어가자

---

자 이제 어느정도 컬렉션 뷰에 대해서 알게 됐다. 그럼 한번 컬렉션 뷰를 이용한 간단한 예제를 만들며 공부 해야겠다.