EunHee-Jeong/TIL

UICollectionViewCompositionalLayout

Closed this issue · 0 comments

EunHee-Jeong commented

도입

  • 복잡한 layout을 가진 collectionView를 구현할 때의 퍼포먼스 저하 및 코드 길이 문제 등을 개선하고, 좀 더 간편하며 직관적인 layout의 구현을 위해 iOS13 버전부터 도입되었다.

특징

  1. 구성 가능하게

    • UI 요소들을 구성하는 방식
    • 복잡한 결과 → 단순한 것으로 구성

  2. 유연하게

    • compositionalLayout 하나만으로도 모든 layout을 구성할 수 있도록 함
    • 변경과 응용이 자유로움
      • 기존: frowLayout, custom 등을 사용

  3. 빠르게

    • framework에서 자체 성능 최적화를 수행함
      • 퍼포먼스를 framework단에서 알아서 수행할 수 있도록
    • 개발자가 성능에 대한 고민을 하는 것을 덜어주며, layout이라는 목적 자체에만 집중할 수 있도록 해줌

구성

let size = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.3),
				  heightDimension: .fractionalHeight(0.75))
let item = NSCollectionLayoutItem(layoutSize: .size) // 위에서 설정한 size 넣어줌
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
						subitem: item, count: 3) // 방향 설정, item 넣어줌
let section = NSCollectionLayoutSection(group: group) // group 넣어줌
let layout = NSCollectionViewCompositionalLayout(section: section) // section 넣어줌
  • 각각의 구성 요소들이 사다리 형식으로 들어감
  • 메인 구성요소 ⇒ item, group, section

item

  • collectionView에서의 개별 크기, 공간, 정렬 방식에 대한 청사진임
  • 화면에 랜더링되는 단일 뷰에 해당함
    • cell, 헤더, 푸터, supplimentary뷰 (데코레이션 뷰)
  • 치수 (너비, 높이) 를 가지는 고유한 사이즈를 지정함
    • 런타임 시에 변경될 수 있는 추정값에 해당함 (= 상대적임)

size

  • item의 치수에 해당함

  • 종류

    a. absolute

    • 절대적인 값

    b. estimate

    • 추정값, 예상값
    • 시스템이 나중에 실제값을 반영함

    c. fractional

    • 분수값, 비율값
    • item container를 기준으로 값을 정의

group

  • item들이 서로 관련하여 배치되는 방식을 결정하고 결합함
  • 항목을 가로, 세로 또는 사용자 지정 배열로 배치함
  • 각각의 item들을 layout의 형태에 따라 그룹화함
  • absolute, estimate, fractional 로 표현함 ⇒ 복잡하게 custom 할 수 있음
    • group은 item의 하위 class이기 때문임

section

  • group들로 이루어짐
  • 하나 이상임
  • layout을 각각의 영역으로 분리하는 법을 제공함
  • 각각의 section들은 다른 section과 layout이 같거나 다를 수 있음
    • section을 만드는 데 사용되는 group의 속성에 의해 결정되기 때문임
  • 다른 section과의 구분을 위해 고유한 background, header, footer를 넣을 수 있음

layout

  • 지금까지의 구성 요소들을 반영함
  • item → group → section → layout 순