[iOS] Collection View Guide

Collection View Programming Guide for iOS의 내용을 일부 요약한 글입니다.

Collection View Basics 👋

Reusable Views Improve Performance

컬렉션뷰는 효율성 향상을 위해 뷰를 재사용합니다.

• Supplementary views: header, footer (optional)
• Cells
• Decoration views

The Layout Object Controls the Visual Presentation

레이아웃 객체는 위치, 사이즈, 디자인을 표현하는 속성을 결정하는 것이지 그 자체로 뷰를 갖는 것은 아닙니다.

it generates attributes that describe the location, size, and visual appearance of the cells, supplementary views, and decoration views in the collection view.

delegate를 이용하거나 layout 객체를 이용해서 flow layout의 cell or supplementary views 의 size를 결정할 수 있습니다.

Designing Your Data Source and Delegate

Data source object (required)

• collection view는 data source 객체를 필수로 가져야 합니다.
• data source 객체는 collection view에 나타낼 content 입니다.
• data source 객체는 UICollectionViewDataSource protocol를 준수해야 합니다.

    collectionView.dataSource = self
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // section 당 item 수
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // dequeue해서 보여줄 cell
    }

Delegate object (optional)

• delegate 객체는 선택 사항이지만 권장됩니다.
• delegate 객체는 content의 표현과 interactions을 관리합니다.

Registering Your Cells and Supplementary Views

cell과 view를 storyboard와 code로 다음과 같이 configure할 수 있습니다.

• storyboard

  1. collection view 위에 collection view cell을 drag n drop
  2. custom class 설정, collection reusable identifier 지정

• programmincally

    // 부모 view controller의 init process에서 call 할 수 있다.
    
    // cells
    register(Class:forCellWithReuseIdentifier:) or register(Nib:forCellWithReuseIdentifier:)
    
    // supplementary views
    register(_:forSupplementaryViewOfKind:withReuseIdentifier:)
    //supplementary views는 kind(String)라는 추가 identifier를 지정해야 한다. (header인지 footer인지)
    // string constant를 사용하면 된다.
    // UICollectionElementKindSectionHeader and UICollectionElementKindSectionFooter

Dequeueing and Configuring Cells and Views

collection view가 data source object에게 cells and supplementary views를 요구합니다.
UICollectionViewDataSource protocol이 이와 관련한 method를 포함하고 있습니다.

    // cell
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
    }
    
    // supplementary view
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        
    }

method simple pattern:
1. Dequeue a cell or view of the appropriate type using the dequeueReusableCellWithReuseIdentifier:forIndexPath: or dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath: method.
2. Configure the view using the data at the specified index path.
3. Return the view.

Using the Flow Layout

UICollectionViewFlowLayout class를 이용해서 cell의 size와 layout을 정의할 수 있습니다.

Important: At a minimum, you must specify the width and height of cells. If you don’t, your items are assigned a width and height of 0 and will never be visible.
cell의 width, height를 정의하지 않으면 0으로 할당되어 view에 보이지 않는다.

Customizing the Flow Layout Attributes

item spacing or size를 동적으로 조정하고 싶다면 UICollectionViewDelegateFlowLayout의 메서드를 이용할 수 있습니다.

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: pageCollectionView.frame.width, height: pageCollectionView.frame.height)
    }

Note

cell의 사이즈를 지정하는 방법 3가지

• UICollectionViewflowLayout class를 이용해서 itemSize 지정한다. (cell이 모두 같은 사이즈로 지정됨)
• UICollectionViewDelegateFlowLayout protocol을 채택해서 메서드로 cell size를 지정할 수 있다. collectionView.delegate가 되는 view controller가 채택해야 한다. (cell마다 동적으로 사이즈 지정 가능)
• cell에 오토레이아웃을 지정하고(셀 스스로 크기를 결정), UICollectionViewflowLayout 객체에 estimatedItemSize를 지정하는 방법
  (1번, 3번은 생성한 UICollectionViewflowLayout의 인스턴스를 collectionView.collectionViewLayout 레이아웃 객체에 할당해야 함)

// UICollectionViewflowLayout 클래스를 사용
let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: 100, height: 100)

// UICollectionViewDelegateFlowLayout 프로토콜을 채택
func collectionView(_ collectionView: UICollectionView, 
			layout collectionViewLayout: UICollectionViewLayout, 
			sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: 100, height: 100)
}

// estimatedItemSize 지정
layout.estimatedItemSize = CGSize(width: 100, height: 100)

// layout 객체 할당
collectionView.collectionViewLayout = layout