[UIKit]UICollectionViewCompositionalLayout (iOS 13.0 +)

📄

목차

Compositional Layout

구성

Item cell 구현

SupplementaryView의 구현

전체 코드

Reference

Compositional Layout

iOS 13.0에 도입된 UICollectionView의 새로운 레이아웃. 다음과 같은 특징이 있다고 한다.

• 기존의 UICollectionViewFlowLayout보다 더 확장된 레이아웃 제공

• Item 정의 -> Group 정의 -> Section 정의 순으로 순으로 진행해 간다.

• 아래의 그림과 같이 여러 섹션으로 나누어 각 섹션끼리 관리 가능. 섹션별로 다른 레이아웃을 구성하기 쉬워진다. : 요즘 많이 보이는 다음과 같은 뷰를 View를 구현하기 편해진다.

구성

Collection view의 구성

Supplementary view가 위치할 수 있는 자리

UICollectionView는 크게 3가지로 구성된다.

• item cell: 전달할 핵심 내용이 담긴 cell

• Supplementary view: 메인 데이터를 수식하는 view. header, footer

• Decoration view: 데이터가 담기지 않은 단순 UI. 배경, 섹션 하이라이트 등

Item cell 구현

• 기존의 cell 구현과 똑같다.

SupplementaryView의 구현

• UICollectionReusableView를 상속받은 뷰를 구현한다.

final class AlbumHeader: UICollectionReusableView { ... }

• collectionView에서 아래 메소드를 사용하여 view를 등록한다.

// 메소드
func register(_ viewClass: AnyClass?, 
							forSupplementaryViewOfKind elementKind: String, 
							withReuseIdentifier identifier: String
							)

// 사용 예
lazy var collectionView: UICollectionView = {
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: self.setupLayout())
    collectionView.isScrollEnabled = true
    collectionView.showsHorizontalScrollIndicator = false
    collectionView.showsVerticalScrollIndicator = true
    collectionView.contentInset = .zero
    collectionView.clipsToBounds = true
    
    collectionView.register(AlbumHeader.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "AlbumHeader")

    return collectionView
  }()

• UICollectionViewDataSource 프로토콜의 메소드로 data를 설정한다.

// 메서드 
func dequeueReusableSupplementaryView(
    ofKind elementKind: String,
    withReuseIdentifier identifier: String,
    for indexPath: IndexPath
) -> UICollectionReusableView

// 사용 예
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    if case let Music.music(musics) = dataSource[indexPath.section] {
      let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Album", for: indexPath) as! Album
      let item = musics[indexPath.item]
      cell.setupContent(albumArt: item.albumArt, descText: item.desc, title: item.title)
      
      return cell
    }else {
      ...
    }
  }

• compositionalLayout에 item, group, section 뿐만 아니라 header에 대한 레이아웃도 정의하고(NSCollectionLayoutSection), section 에 인스턴스를 주입한다.(section.boundarySupplementaryItems)

private func setupAlbumLayout() -> UICollectionViewCompositionalLayout {
    UICollectionViewCompositionalLayout{ (section, env) -> NSCollectionLayoutSection? in
        //item
		    ...
        // group
				...
        
        // header
        let headerSize = NSCollectionLayoutSize(
          widthDimension: .fractionalWidth(0.95),
          heightDimension: .absolute(48)
        )
        let header = NSCollectionLayoutBoundarySupplementaryItem(
          layoutSize: headerSize,
          elementKind: UICollectionView.elementKindSectionHeader,
          alignment: .top
        )
        
        // section
        let section = NSCollectionLayoutSection(group: group)
        section.orthogonalScrollingBehavior = .continuous
        section.boundarySupplementaryItems = [header]      // <- header를 등록하는 부분
        
        return section
    }
  }

전체 코드

https://github.com/LeeTaek/UIKit-PracticeCodeBasedUI

Reference

Apple Developer Documentation

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

[iOS - swift] 1. UICollectionViewCompositionalLayout - 개념 (section, group, item)

1. UICollectionViewCompositionalLayout - 개념 (section, group, item) 2. UICollectionViewCompositionalLayout - 개념 SupplementaryView, Header, Footer) 3. UICollectionViewCompositionalLayout - 개념..

https://ios-development.tistory.com/945

Uploaded by N2T