나는야 모든 사람들이 CompositionalLayout을 적용할 때 꿋꿋이 FlowLayout을 사용했던 사람

이번에 장소 검색 결과화면을 만들면서 CompositionalLayout을 처음 사용하게 된 김에 정리를 해보고자 한다!

CompositionalLayout 만들어보기


Compositional Layouts

순차적으로 만들다보면 어느새 생성되는 마법

  1. UICollectionViewCompositionalLayout 만들어서 리턴해야지~ 냅다 init!
  2. 엥 섹션이 필요하네? 섹션 냅다 init!
  3. 엥 그룹이 필요하네? 그룹 init!
  4. layoutSize? subitems? 필요하면 만들어야지 init!
  5. 그 외 비슷한 과정들

참 쉽죠?

func configureCompositionalLayout() -> UICollectionViewCompositionalLayout {
  let itemSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0),
    heightDimension: .fractionalHeight(1.0)) // 4~5
  let subitem = NSCollectionLayoutItem(layoutSize: itemSize) // 4

  let groupSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0),
    heightDimension: .fractionalWidth(2/3)
  ) // 4

  let group = NSCollectionLayoutGroup.horizontal(
    layoutSize: groupSize, 
    subitems: [subitem],
  ) // 3

  let section = NSCollectionLayoutSection(group: group) // 2
  let layout = UICollectionViewCompositionalLayout(section: section) // 1

  return layout
}

하지만 결론적으로 (컬렉션뷰를 테이블 뷰 형식으로 만드는 것에 한해서는) 나는 FlowLayout과 드라마틱한 차이는 못 느꼈다😅 반전..

FlowLayout으로 구현했을 때도 width를 collectionView.frame.width와 동일하게 만들어서 리스트 형태로 구현했는데 CompositionalLayout도 비슷하다는 느낌?