Modern UIKit Collection, TableView #2-1

Advances in Collection View Layout - 1

Advances in Collection View Layout - WWDC19 - Videos - Apple Developer

💡 Collection View Layout을 사용하면 풍부한 interactive 컬렉션을 쉽게 만들 수 있습니다.기본 목록부터 다차원 탐색 환경까지 동적이고 반응이 빠른 레이아웃을 만드는 방법을 알아보세요.

기존 UICollectionViewFlowLayout 방식의 문제점

1. 단순한 그리드 형식에는 큰 도움이 된다.
2. Line based → 단일 gird만 지원한다.
3. 현재는 수많은 복잡한 커스텀 레이아웃을 지원해야한다.

애플은 기존 Collection Layout 방식으로 새로운 "앱 스토어" 앱을 만드는 것을 포기했다...

기존 커스텀 레이아웃 제작의 문제점

1. Boilerplate code
   ⇒ 단순 반복되는 코드
2. 퍼포먼스 고려사항의 증가
3. Supplementary and decoration view challenges
   ⇒ 셀 및 섹션의 추가되는 뷰 (섹션 헤더, 푸터, 아이템 뱃지 등등…) 만들기 복잡함
4. Self-sizing challenges
   ⇒ 셀 및 섹션이 자체적인 사이즈를 설정하게 만드는 것에 대한 어려움

Compositional Layout의 특징

제작 목적

1. Composable (구성 가능함) ⇒ 각각의 영역별로 자체적인 (예: 앱스토어의 추천 앱 리스트) 레이아웃 구성 가능..?
2. Flexible (유연함) ⇒ 앱스토어 정도의 다양한 레이아웃을 유연하게 적용 가능
3. Fast (빠름) ⇒ 뭐가 빠르다는 것인지는 모르겠다.

💡 기존에는 다양한 형태의 CollectionView를 만드려면 WrapperCell을 만들어서 WrapperCell 내부에 CollectionView를 다시 정의하는 계층 구조를 가져야한다. 하지만 Compoisional Layout의 개념과 구조를 이루는 컴포넌트를 사용한다면 다양한 레이아웃을 표현하기 위한 WrapperCell를 만들 필요가 없다..!

기존 방식으로 앱스토어를 만들면 발생하는 문제를 표현하는 예시 코드

class CollectionVC: UIViewController{
    let collectionView = UICollectonView()
    ...
    override func viewDidLoad(){
        collectionView.register(BannerSectionWrapperCell.self)
        ...
    }
}
class BannerSectionWrapperCell: UICollectionViewCell{
    let bannerCollectionView = UICollectionView() // <- 여기가 문제..!
// Why? 추가적인 Delegate 코드와 DataSource 코드 작성 성능 문제
// + 데이터를 ViewController에 넘기는데 복잡한 문제 등등...
    ...
    func configureView(){
            bannerCollectionView.register(BannerItemCell.self) // <- 여기도 문제..!
    }
}
class BannerItemCell:UICollectionViewCell{
}

구현 특징

• Composing small layout groups together
  ⇒ 작은 레이아웃 그룹을 함께 구성한다.
• Layout groups are line-based
  ⇒ 하나의 수직선, 수평선 기준으로 그룹을 표시한다.
• Composition instead of subclassing
  ⇒ 서브클래스 대신 콜렉션 뷰 레이아웃 구성 가능

최소 구현 구성 요소 5가지

1. NSCollectionLayoutSize
2. NSCollectionLayoutItem
3. ⭐ NSCollectionLayoutGroup
4. NSCollectionLayoutSection
5. UICollectionViewCompositionalLayout

• 구현 예시 코드

    func createBasicListLayout() -> NSCollectionViewLayout {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                             heightDimension: .fractionalHeight(1.0))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
      
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                              heightDimension: .absolute(44))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                         subitems: [item])
      
        let section = NSCollectionLayoutSection(group: group)
    
        let layout = NSCollectionViewCompositionalLayout(section: section)
        return layout
    }

기본 매커니즘 이해 및 정리

재귀적이고 반복적인 구성

1. 계층 구조와 MainTree

• Layout의 크기는 CollectionView의 크기를 Bounds로 받는다.
• Section은 Layout에서 설정한 크기에 Bounds로 갖는다.
• Group은 Section에서 설정한 크기를 Bounds로 갖는다.
• Item은 Group에서 설정한 크기를 Bounds로 갖는다.
• NSCollectionLayoutSize로 이들의 크기를 조절할 수 있다.

✅ 이 계층 관계를 MainTree라고 생각하자
+  각각의 Layout,Section,Group,Item들을 MainTree를 이루는 컴포넌트라고 생각하자
+  컴포넌트 자신의 Bounds로 영향을 받는 것들을 하위 컴포넌트라고 하자

2. Supplementary & Configuration

• MainTree에 직접 관여하진 않지만 MainTree의 컴포넌트 인스턴스들을 꾸미거나 커스텀하기 위한 자체적인 Configuration을 갖고 있다.
  • 이 커스텀은 주로 MainTree의 하위 컴포넌트들 간격을 주거나, 스크롤 방향을 설정하는 정도
• MainTree 컴포넌트가 자체적인 SubView의 영역을 할당하기 위해 Supplementary 개념을 사용한다.
  • 이 Supplementary는 주로 컴포넌트의 Header, Footer, Badge를 담당

3. Provider with ElementKind & SubItems(Array)

하나의 컴포넌트에 단일 하위 컴포넌트가 아닌 다양한 하위 컴포넌트를 갖기 위해서 사용하는 개념