CollectionView 알아보고 사용해보기

안녕하세요~ 오늘은 사진첩 같은 뷰인 UICollectionView에 대해 알아보고 사용해보도록 하겠습니다.

CollectionViewController도 있으니.. 우선 개발자 문서부터 확인해볼까요? (중요!)

애플 개발자문서 - CollectionViewController

collectionView를 관리하는 컨트롤러라고 하네요.. =_=.. 그럼 UICollectionView를 알아보면 되겠네요.

이니셜라이즈 부분을 보니 UICollectionViewLayout를 통해 layout을 설정해 줄 수 있네요.

크흠.. 그럼 collectionView는 뭔지 한번 문서에서 찾아볼까요?

애플 개발자문서 - CollectionView

오호.. UIScrollView를 받아오는군요??

순서가 지정된 데이터들을 관리하고 사용자 정의 가능한 레이아웃을 사용하여 표시하는 객체라고 하네요..(번역기 ㅋ..) 여기서 말하는 사용자 정의 레이아웃은 아까 collectionViewController 이니셜라이즈 부분에 있었던 UICollectionViewLayout를 얘기하는 것 같네용

음.. 제가 개발을 하면서 collectionView를 사용할 때 크게 4가지 정도??를 알고 있으면 어느정도 원하는 모양의 UI를 구현할 수 있다고 생각을 해요.

• UICollectionView의 구조
• delegate, dataSource의 추가적인 기능 (왜 사용하는지?)
• UICollectionViewCell의 크기 설정
• UICollectionView 구현

대략 이정도 인데, 오늘 포스팅에서 이부분에 대해 전체 다 설명은 못드리겠지만 꼭 필요한 부분들 위주로 설명을 드려보겠습니다.

UICollectionView 구조

크게 구조는 상단에 헤더 뷰를 넣을 수 있는 공간이 있고(헤더뷰 추가 안해도 되요.) cell은 컬렉션뷰를 사용하는 이유이니.. 패스하고.. 아래 푸터뷰도 넣을 수 있어요.

헤더뷰를 사용하는 대표적인 예가 목록을 표시한다던지.. 상단에 무언가를 띄워놓고 싶을 때 사용하는 것 같아요.

만약 헤더뷰가 따로 없더라면 cell을 따로 하나 정의를 해서 indexPath값이 0일 경우에 레이아웃을 따로 배치해주고.. 하는 로직을 짜줘야 겠죠?? 헤더뷰를 사용합시당.

이렇게 헤더뷰, 푸터뷰가 있고... 그 사이에 cell 이 바둑판 형식으로 정렬되어 있다고 생각하시면 될 것 같아요.

CollectionView의 delegate, dataSource

collectionView도 tableView처럼 delegate와 dataSource가 있어요. 특히 dataSource부분은 꼭 사용해줘야 하는 필수 메소드 2개가 있어요. 주로 사용하는 대표적인 메소드에 대해 간단히 알아볼게요.

• dataSource
  • cell을 띄워주기 위한 필수 메소드
  • cell을 몇개를 띄울지를 정하는 필수 메소드

• delegate
  • cell을 클릭시 발생하는 이벤트..

UICollectionViewCell의 크기 설정

collectionView에서 가장 까다로운 부분이 바로 Cell의 크기를 정하는 부분이에요. 왜냐하면 tableView와는 다르게 높이도 설정해 줘야 하기 때문에 그런 것 같아요. cell의 크기를 설정하는 방법은 flowLayout을 만들어서 cellSize를 정해주는 방법이 있고, UICollectionViewDelegateFlowLayout을 사용해서 정해주는 방법이 있어요. 편한건 flowLayout이 편하긴 한데, extension을 사용하는게 가독성이 좋다고 개인적으로 생각하기 때문에 UICollectionViewDelegateFlowLayout를 사용해서 cell의 크기를 설정하는 방법에 대해 설명해 볼게요.

우선 이런 collectionView를 만들어 본다고 생각해봅시다.

여기서 빨주노초파랑색의 네모칸 각 하나가 Cell인데, cell과 cell 사이에 흰색 라인의 공간이 있죠?? 이부분이 바로 minimumSpacing 란 값이에요. 이부분을 기억해주세요.

cell의 크기를 한 라인당 3개의 cell을 뿌려주고 싶다면, cell의 width 값을 collectionView의 width값을 3으로 나누면 될 것 같죠?? 그런데 여기서 저희가 생각해야 할 부분이 바로 minimumSpacing 에요. 만약 이 값이 0으로 초기화가 안된 상태에서 단순하게 3으로 나눈 값을 출력을 한다면 collectionView의 width값을 초과하기 때문에 한 라인당 2개의 cell이 나오고 가운데에 큰 공백이 생기게 될 거에요. 그래서 collectionViewCell의 크기 계산을 정확하게 해줘야 원하는 갯수를 띄워줄 수 있어요.

cellSize 공식: (collectionViewWidth - (Cell갯수 - 1) * minimumSpacing) / Cell갯수

이를 코드로 구현하면 이렇게 됩니다.

이렇게 한번 정의를 해두면 다음에 사용할 때 cell 갯수, minimumSpacing값만 입맛대로 바꾸면 되기 때문에 한번 정리해두면 collectionView를 만들때 자신감이 생겨요.

UICollectionView 구현

이제 지금까지 얘기한 걸 사용해서 CollectionView를 구현해보도록 하겠습니다.

크게 2개의 파일이 필요해요. 하나는 CollectionView를 사용할 뷰컨트롤러, 다른 하나는 Cell을 정의해 줄 CollectionViewCell 파일이 필요합니다. 저는 스토리보드를 사용하지 않고 코드로 구현을 해볼게요.

혹시 스토리보드 없이 사용하는 방법을 모르시는 분은 아래 포스팅을 참고해주세요.

[포스팅]스토리보드 없이 개발하기

우선 cell을 정의해 줄 파일 이름은 CustomCollectionViewCell.swift라고 네이밍 해보겠습니다. 그리고 간단하게 imageView를 추가해보겠습니다.

그 다음은 ViewController에 collectionView를 추가해주고, collectionView를 사용하기 위해 필요한 부분들을 추가해 줄 거에요.

1. View 추가(collectionView 등등..)
2. collectionView register 추가
3. delegate, dataSource 추가
4. UICollectionViewDataSource 에서 cell, cellCount 관련 필수 메소드 추가
5. 필요시 UICollectionViewDelegate 추가작성
6. UICollectionViewDelegateFlowLayout 를 사용해서 cellSize 설정

마지막으로..

사실 collectionView를 포스팅하면서 작성하면 할수록 설명해야 할 것이 너무 많아서 포스팅이 자꾸 늦어졌었어요.. 그러다 한 포스팅에 너무 무거워지는건 아닌가 싶기도 하고.. 해서 사용하는 방법을 초점으로 꼭 필요한 부분들 위주로 포스팅을 작성하게 되었던 것 같아요. collectionView나 tableView는 자주 사용하는 뷰이기 때문에 혹시 자신이 없다면 여러번 만들어보시면서 연습을 많이 해보시는 걸 추천드리고.. 추가적으로 headerView 고정하는 방법이라던지.. 등등 좋은 내용들이 생각나면 추가 포스팅을 작성해보도록 하겠습니다. 그럼 항상 코로나 조심하시고 좋은하루 되세요!

 

예제 프로젝트 repo

참고

• 애플 개발자문서 - CollectionViewController

• 애플 개발자문서 - CollectionView

• iOS 부스트코스 - 컬렉션 뷰