iOS Collection View APIs

Collection View APIs

• Collection View API -> iOS 6에 처음 등장
• 무엇이(어떤 데이터가), 어디에(어떤 레이아웃에), 보여지는 지 (어떻게 렌더링 되는지) 관점으로 살펴봤을 때
• 지금까지 데이터는 인덱스 기반 프로토콜인 UICollectionViewDataSource로 관리되고 있었습니다.
• 레이아웃은 UICollectionViewLayout이 있었고, 주로 구체적인 하위 클래스(Concrete Subclass)인 UICollectionViewFlowLayout을 사용하고 있었습니다.

• iOS 13에서 DiffableDataSource, Compostional Layout인 최신 API가 도입되었습니다.
• iOS 14에서 이를 기반으로 새로운 기능(Section Snapshot, List Configuration, etC)를 만들어 냈습니다.
• List Configuration은 Compostional Layout을 기반으로 만들어졌고 컬렉션 뷰를 테이블 뷰처럼 사용할 수 있게 되었습니다.
• 섹션별로 다른 레이아웃 설정도 가능하고, 스와이프 등의 기능들을 컬렉션 뷰에서 구현 가능하게 되었습니다.

---

UICollectionLayoutListConfiguration

• List는 테이블뷰와 유사한 모양을 컬렉션뷰에서 구현할 수 있는 구조로, UICollectionViewCompostionalLayout과 NSCollectionLayoutSection을 기반으로 구성되어 있습니다.( NSCollectionLayoutSection는 섹션 별 레이아웃 설정을 별도로 할 때 사용됨)
• 따라서 유연한 레이아웃 대응이 가능 and Self-Sizing 기능을 통해 셀 높이를 수동으로 계산을 할 필요가 없음

• List 형태의 레이아웃을 만들기 위한 구조체로 모든 섹션에 동일한 configuration을 적용할 수도 있고 각 섹션마다 다른 레이아웃을 적용할 수 있음.
• plain, grouped, inset grouped와 같은 appearance 설정이 가능함.
• 그 외 separator, header, footer, swipe 등의 처리도 가능함

---

UICollectionLayoutListConfiguration

var configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
        configuration.showsSeparators = false
        configuration.backgroundColor = .brown
        let layout = UICollectionViewCompositionalLayout.list(using: configuration)
        collectionView.collectionViewLayout = layout

• 각 섹션에 모두 동일한 configuraiton을 설정할 수 있는 예시

 

---

UICollectionView.CellRegistration

• 14이상에서 등장한 Registeration API로 셀 재사용을 보다 쉽게 구현해두었습니다.
• 기존의 Cell Identifier나 XIB 등록하는 메서드 대신 제너릭 형태를 사용하고, 새 셀이 생성될 때마다 클로저가 호출됨

---

UICollectionView.CellRegistration

• cellRegisteration 선언

var list = [
        User(name: "뽀로로", age: 3),
        User(name: "에디", age: 13),
        User(name: "해리포터", age: 33),
        User(name: "도라에몽", age: 5),
    ]
    
    //cellForItemAt 전에 생성되어야 한다.
    var cellRegistration: UICollectionView.CellRegistration<UICollectionViewListCell, User>!

• cellRegisteration 등록

cellRegistration = UICollectionView.CellRegistration { cell, indexPath, itemIdentifier in
            var content = UIListContentConfiguration.valueCell()
            content.text = itemIdentifier.name
            content.secondaryText = "\(itemIdentifier.age)살"
            //default가 true secondarytext 위치 변경
            content.prefersSideBySideTextAndSecondaryText = false
            content.textToSecondaryTextVerticalPadding = 20
            content.textProperties.color = .red
            content.image = itemIdentifier.age < 8 ? UIImage(systemName: "person.fill") : UIImage(systemName: "star")
            content.imageProperties.tintColor = .yellow
            
            cell.contentConfiguration = content
        }

• cellRegisteration 호출

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let item = list[indexPath.item]
        // using: UICollectionView.CellRegistration<Cell, Item> 에서의 Cell은 Cell 타입, Item은 내용물으 의미한다.
        let cell = collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: item)
        return cell
    }

---

UIContentConfiguration

• contetnView에 configuration을 제공해주는 객체로, contentView에 대한 기본 스타일과 컨텐츠 구성에 대한 청사진을 제공해줌
• UIListContentConfiguration 구조체도 UIContentConfiguration 프로토콜을 채택하고 있음

---

UIListContentConfiguration

• list base의 컨첸트 뷰를 구성하는 configuration
• 시스템 기본 스타일을 설정해볼 수 있음.
• subtitleCell, valueCell, sideBarCell 등 기본 셀 설정부터 header와 footer style, 객체 속성 정의 등이 가능함

var content = cell.defaultContentConfiguration()
            content.image = itemIdentifier.age < 8 ? UIImage(systemName: "person.fill") : UIImage(systemName: "star")
            content.imageProperties.tintColor = .yellow
            
            cell.contentConfiguration = content