[iOS] UICollectionView 기초 정리(1)

우리가 iOS 앱 개발을 하면서 정말 많이 쓰는 뷰중 한가지가 콜렉션뷰 아닐까 싶은데요! 그래서 오늘은 UICollectionView를 정리하려 합니다. 

먼저 당연한 말이지만, UICollectionView가 뭔지 알아야 겠죠? 

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

보시면, UITableView처럼 UIScrollView를 상속받고 있는 것을 볼 수 있네요 ㅎㅎ 

컬렉션뷰는 테이블뷰와 마찬가지로, UICollectionViewCell을 사용하여 데이터를 화면에 표현합니다. 그 외에 Supplementary view(Section header, footer)를 지원 함으로써 다음과 같이 셀을 구분하여 표현 가능 합니다

애플 공식 문서 참고

 

부스트 코스 참고

 

Cell - 컬렉션 뷰의 콘텐츠 표시

Supplementary Views - 섹션에 대한 정보 표시(헤더, 푸터), 꼭 구현하지 않아도 됨.

UICollectionViewDataSource, UICollectionViewDelegate - 컬렉션뷰에 표시할 콘텐츠 정보 관리 및 제공, 사용자와 콜렉션뷰 간의 상호작용 관리

UICollectionReusableView - 테이블뷰 같은경우 헤더에 그냥 UIView를 올려도 됐는데, 컬렉션 뷰같은 경우 무조건 UICollectionReusableView클래스의 인스턴스여야만 합니다!! (뷰를 재사용하여 성능을 향상시킨다네요??)

 

● Layouts

컬렉션 뷰에는 레이아웃이 존재하는데요. 이 레이아웃은 컬렉션뷰의 셀들이 나열되는 방식을 결정합니다. 

이 레이아웃에는 두가지가 존재합니다.

1. UICollectionViewLayout   2. UICollectionVeiwFlowLayout

부스트 코스 참고

 

● UICollectionViewDataSource 필수 메서드

이 UICollectionViewDataSource 프로토콜의 경우 필수로 채택하여 제공해야 합니다. 그래야 콜렉션뷰에 우리가 보여주고자 하는 데이터를 보여주 겠죠? 

// 섹션에 표시 할 셀 갯수를 묻는 메서드
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int

// 콜렉션 뷰의 특정 인덱스에서 표시할 셀을 요청하는 메서드
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell

 

● UICollectionViewFlowLayout

UICollectionViewFlowLayout는 UICollectionViewLayout을 상속받는 객체로 격자형태의  레이아웃을 구성합니다. 이 flow layout은 열 또는 행에 따라 최대한 많은 셀을  선형 경로에 배치하고, 셀의 사이즈는 같을수도 다를수도 있습니다. 

flow layout은 아이템, 헤더, 푸터들의 사이즈를 결정하기 위해 컬렉션뷰의 딜리게이트와 함께 동작합니다. 이 딜리게이트가 바로 UICollectionViewDelegateFlowLayout인데 이 프로토콜을 반드시 채택해줘야 합니다! 이 딜리게이트를 사용하면 layout 정보를 다양하게 적용 가능합니다. (ex. 각각의 다른 사이즈의 아이템들)

부스트 코스 참고

 

위와 같이 컬렉션뷰는 플로우 레이아웃을 통해 뷰에 아이템들을 어떻게 보여줄지 정하게 되고, 델리게이트와 데이터소스를 통해 셀을 보여주고 관리(?)합니다. 

부스트 코스 참고

부스트코스 참고

위 두개의 그림을 보시면 아시겠지만, 수직 스크롤, 수평스크롤 모두 정해진 레이아웃 안에서 최대한 셀을 많이 채워 넣는 것을 볼 수 있습니다.

FlowLayout 구성 단계

1. 플로우 레이아웃 객체를 컬렉션뷰의 레이아웃 객체로 지정

2. 셀의 높이 및 너비 설정 (default 는 각각 0, 0 이기 때문에, 크기 지정하지 않을경우 셀이 화면에 보이지 않을 수 있음)

3. 셀의 간격 조절

4. 필요할 경우 섹션 헤더 푸터 크기 지정

5. 레이아웃 스크롤 방향 설정

 

셀 및 행사이의 간격( minimumLineSpacing & minimumInteritemSpacing)

행 사이, 셀 사이 최소 간격을 설정 가능 (여기서 주의해야 할 것이 최소간격!! 입니다.) 만약 다음 그림과 같이 모든 셀이 동일한 사이즈라면 셀 간의 실제 간격이 셀간의 최소간격과 일치하지만

각각의 셀 크기가 다른 경우 셀 간의 최소간격은 셀간의 실제 간격과 다를 수 있습니다. 

 

추가로, 다음과 같이 셀간의 간격 외에 섹션자체에 인셋(공간)을 줄 수 있습니다.

 

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
       return UIEdgeInsets(top: 30, left: 30, bottom: 30, right: 30)
    }

 

참고)

developer.apple.com/documentation/uikit/uicollectionview

Apple Developer Documentation

https://developer.apple.com/documentation/uikit/uicollectionviewflowlayout

Apple Developer Documentation

www.edwith.org/boostcourse-ios/lecture/16906/ 

[LECTURE] 1) 컬렉션뷰란? : edwith