[Xcode] 새로운 방법으로 컬렉션뷰 만들기(1) - UICollectionViewDataSource + List Configuration

컬렉션뷰 개념은 iOS 6 버전에서 처음 등장했다.

그리고 기존의 개발 방식에서의
단점을 보완하고, 다양한 기능이 추가되어
iOS 13 버전과 iOS 14 버전에서 새로운 기능이 출시되었는데,

이에 대해서 알아보자.

 

컬렉션뷰는 아래의 3가지 측면으로 바라볼 수 있다.

1. 어떤 데이터가? (데이터 관리)
2. 어떤 레이아웃에? (컬렉션뷰의 레이아웃)
3. 어떻게 렌더링 되는지? (셀 관리)

그래서 iOS 6 버전 이후의 컬렉션뷰를 개발하는 방식은 다음과 같다.
1. 인덱스 기반 프로토콜인 UICollectionViewDataSource로 데이터를 관리
2. UICollectionViewLayout의 하위 클래스인 UICollectionViewFlowLayout으로 레이아웃을 관리
3. UICollectionViewCell/UICollectionReusableView을 통해 셀 내부 속성을 관리

이후 iOS 13 버전에서는

Diffable Data Source(데이터 관리), Compositional Layout(컬렉션뷰의 레이아웃)

iOS 14 버전에서는

Section Snapshopts(데이터 관리), List Configuration(컬렉션뷰의 레이아웃), List Cell/View Configuration(셀 내부 관리)
기능이 새롭게 출시되었다.

그렇다고, 각 버전에서 출시한 기능끼리만을 사용하지 않아도 된다.

그래서 이번 게시글에서는, 
기존 iOS 6 버전의 UICollectionViewDataSource(데이터 관리 기능)와
iOS 14 버전의 List Configuration(컬렉션뷰의 레이아웃 기능)과
iOS 14 버전의 List Cell/View Configuration(셀 관리 기능)을
종합하여 간단히 사용해보자.

 

우선, 컬렉션뷰에 표시할 데이터를 만든다.

struct User {
    let name: String
    let age: Int
}

class TestCollectionViewController: UICollectionViewController {

    var list: [User] = [
        User(name: "콩쥐", age: 15),
        User(name: "팥쥐", age: 16),
        User(name: "흥부", age: 44),
        User(name: "놀부", age: 50),
    ]    
}

 

 

전역변수로 cellRegistration를 선언하고 viewDidLoad에서 List Configuration와 View Configuration를 다룬다.

// 컨트롤러 클래스 내부

// cellForItemAt 전에 생성되어야 함 => register 코드와 유사한 역할
// CellRegistration의 두번째 제네릭 인자에는 각 cell에서 다룰 데이터를 대입
var cellRegistration: UICollectionView.CellRegistration<UICollectionViewListCell, User>!
    
    override func viewDidLoad() {
        super.viewDidLoad()

	// List Configuration(컬렉션뷰 레이아웃)
        // appearance 매개변수를 통해 테이블뷰에서만 사용 가능하던 레이아웃 기본 설정 가능
        var configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
        configuration.showsSeparators = false
        configuration.backgroundColor = .brown
        
        let layout = UICollectionViewCompositionalLayout.list(using: configuration)
        
        collectionView.collectionViewLayout = layout
        
        // View Configuration(셀 내부 관리)
        // cellForItem 메서드에서 실행될 클로져 설정
        cellRegistration = UICollectionView.CellRegistration { cell, indexPath, itemIdentifier in
            
            var content = UIListContentConfiguration.valueCell()
            
            content.text = itemIdentifier.name
            content.textProperties.color = .red
            
            content.secondaryText = "\(itemIdentifier.age)살"
            content.prefersSideBySideTextAndSecondaryText = false
            content.textToSecondaryTextVerticalPadding = 20
            
            content.image = itemIdentifier.age < 8 ? UIImage(systemName: "person.fill") : UIImage(systemName: "star")
            content.imageProperties.tintColor = .yellow
            
            cell.contentConfiguration = content
        }
    }

(cellRegistration 공식문서 참고: https://developer.apple.com/documentation/uikit/uicollectionview/cellregistration)

마지막으로 기존과 같이 numberOfItems 메서드와 cellForItem 메서드를 사용하여 마무리한다.

// 컨트롤러 내부

override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return list.count
}
    
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let item = list[indexPath.item]
    let cell = collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: item)

    return cell
}

 

 

이 게시물은 다음의 블로그를 참고하여 작성했다.

https://s2ung.tistory.com/29

iOS Collection View APIs

https://eun-dev.tistory.com/66

1018 새싹 72회차 정리 - Compositional Layout