[iOS - swift] 5. UICollectionViewCompositionalLayout - 응용 (유튜브 뮤직 앱 레이아웃 구현)

1. UICollectionViewCompositionalLayout - 개념 (section, group, item)

2. UICollectionViewCompositionalLayout - 개념 SupplementaryView, Header, Footer)

3. UICollectionViewCompositionalLayout - 개념 (DecorationView, Badge)

4. UICollectionViewCompositionalLayout - 개념 (orthogonalScrollingBehavior,  수평 스크롤, visibleItemsInvalidationHandler)

5. UICollectionViewCompositionalLayout - 응용 (유튜브 뮤직 앱 레이아웃 구현)

가장 중요한 개념

• Section과 Item은 일반적으로 아는 개념이지만, Group은 CompositionalLayout에서 새로 생겨난 개념
  • Group은 Item들이 한 단위로 묶어서 보여질 레이아웃을 의미
  • 즉, Group의 갯수는 Item의 갯수에 따라 달라지는 특성이 존재

주요 Section

• 공통 사항
  • Header는 HeaderView를 하나 만들어넣고 공통으로 사용
  • Section은 2가지 형태로 사용
• 첫 번째 Section)
  • header부분: stackView 2개 사용하여 썸네일이 없는 헤더와 제목이 하나만 있는 Mode를 구분하여 구현
  • group부분: item이 2개 보이고 3개는 오른쪽에 걸쳐서, 수평 스크롤을 암시해주는 UI
    • 스크롤을 명시해야하므로, 첫 번째 그룹 오른쪽에 두 번째 그룹이 보여야하므로, group의 width를 1.0으로 주지 않고 0.9와 같은 값으로 지정

<레이아웃 코드>

private func getLayoutConceptSection() -> NSCollectionLayoutSection {
  // item
  let itemSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(0.5),
    heightDimension: .fractionalHeight(1.0)
  )
  let item = NSCollectionLayoutItem(layoutSize: itemSize)
  item.contentInsets = NSDirectionalEdgeInsets(top: 12, leading: 8, bottom: 12, trailing: 8)
  
  // group
  let groupSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(0.9),
    heightDimension: .fractionalHeight(0.3)
  )
  let group = NSCollectionLayoutGroup.horizontal(
    layoutSize: groupSize,
    subitems: [item]
  )
  
  // section
  let section = NSCollectionLayoutSection(group: group)
  section.orthogonalScrollingBehavior = .continuous
  section.boundarySupplementaryItems = [header, footer]
  return section
}

• 두 번째 Section)
  • header부분: 위에서 만든 HeaderView 사용
  • group부분: 수직으로 아이템이 4개 존재하고, 오른쪽에 나머지 스크롤할 수 있는 영역이 보이도록 구현
    • item이 4개가 존재하므로, NSCollectionLayoutGroup.vertical()로 주고, count값을 4로 주어서 한 그룹 당 4개의 아이템을 표출되도록 구현

<레이아웃 코드>

private func getLayoutMusicSection() -> NSCollectionLayoutSection {
  // item
  let itemSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0),
    heightDimension: .fractionalHeight(1.0)
  )
  let item = NSCollectionLayoutItem(layoutSize: itemSize)
  item.contentInsets = NSDirectionalEdgeInsets(top: 12, leading: 8, bottom: 12, trailing: 8)
  let groupSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(0.9),
    heightDimension: .fractionalHeight(1.0/4.0)
  )
  
  // group
  let group = NSCollectionLayoutGroup.vertical(
    layoutSize: groupSize,
    subitem: item,
    count: 4
  )
  
  // section
  let section = NSCollectionLayoutSection(group: group)
  section.orthogonalScrollingBehavior = .continuous
  return section
}

 

* 전체 코드 (편의를 위해 SnapKit과 Then프레임워크 사용): https://github.com/JK0369/ExYoutubeMusic