[iOS] Compositional Layout & Sticky Header를 적용하면서(UIKit)

 

새로운 사이드 프로젝트의 MainPage의 뷰를 맡아서 구현해보려고 합니다.

UIKit으로 구현해야할 뷰의 대략적인 모습은 아래와 같습니다.

 

가로 방향의 카드 리스트 형태의 뷰, 세로방향의 판매품목 리스트 형태의 뷰, 가로 방향의 유저 프로필 리스트 등의 다양한 특징을 가진 셀들이 하나의 리스트 뷰 안에 들어가야합니다.

또한 중간에 Sticky Header형태의 탭바가 들어가 있어서 해당 섹션의 리스트가 보일때 탭바는 스크롤시 사라지지 않고 상단에 유지되어야합니다. 

 

처음엔 UIKit으로 구현하게 된다면 NestedScrollView로서  UITableView를 사용하였고 그 안에 각각의 셀의 뷰에 UICollectionView, TableView를 배치하여 구현하였습니다. 

 

하지만 일반 TableView와 CollectionView를 중첩해서 사용하는 것에 대한 부담을 피하기 위해 Compositional Layout을 사용하기로 하였습니다.

 

Compositional Layout의 정식 명칭은 UICollectionViewCompositionalLayout으로 CollectionViewLayout 타입이라고 합니다.

쉽게 말해 다양한 셀 뷰들이 더 유연하게 결합할 수 있도록 도와주는 객체라고 합니다.

 

 

예를 들어 이미지 앨범을 만드는 상황을 가정해보겠습니다.

기존 방식으로 접근하면 아래 코드처럼 UICollectionViewDelegateFlowLayout과 같은 Delegate를 채택하여 컬렉션뷰 셀의 크기, 위치 및 간격을 수고스럽게 설정해주어야했습니다.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
  let width = collectionView.bounds.width / 3 - 10
  return CGSize(width: width, height: width)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
  return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
  return 10
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
  return 10
}

 

이는 컴포지셔널 레이아웃에서 제공하는 선언적인 메소드들을 통해 더 직관적인 코드를 작성할 수 있습니다.

아래 코드는 각 셀이 화면 너비의 3분의1을 차지하는 세개의 열이 있는 그리드 레이아웃을 정의합니다.

let layout = UICollectionViewCompositionalLayout { (sectionIndex, layoutEnvironment) -> NSCollectionLayoutSection? in
  let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/3), heightDimension: .fractionalHeight(1))
  let item = NSCollectionLayoutItem(layoutSize: itemSize)
  
  let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalWidth(1/3))
  let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 3)
  
  let section = NSCollectionLayoutSection(group: group)
  section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
  
  return section
}

 

 

CollectionView TableView와 마찬가지로 Section을 가지고 있습니다만

Compositional Layout부터는 섹션 안에서 구별되는 Group개념이 도입되어 더 세분화된 뷰를 쉽게 구현할 수 있습니다.

각 셀의 Horizental, Vertical 스크롤 방향을 Group에서 설정할 수 있습니다.

 

 

우선 컴포지셔널 레이아웃을 사용하기 위해 CollectionView를 만들어줍니다.

 

그리고 collectionView의 각 셀에 보여줄 Nib파일을 등록해줍니다.

 

그리고 각 셀의 아이템들을 구분해줄 Enum타입을 정의해줍니다.

사용할 Section과 Item을 명시하여 UICollectionViewDiffableDataSource를 typealias로 생성합니다.

UICollectionViewDiffableDataSource는 컬렉션뷰의 컨텐츠를 관리해주는 객체입니다. 

datasource의 스냅샷을 아래 코드를 통해 초기화해줍니다. 

먼저 NSDiffableDataSourceSnapShot 클래스를 통해 빈 스냅샷을 만들고 원하는 섹션에 해당 아이템들을 append해주는 모습입니다.

 

createCompositionalLayout() 메서드는 컬렉션뷰에서 섹션의 레이아웃을 정의하는 UICollectionViewCompositionalLayout 객체를 생성하고 반환합니다.

 

 

'createHotItemSection()' 및 'createHotSellerSection()' 메서드를 사용하여 각각 섹션의 레이아웃을 정의합니다.

 

createHotItemSection() 및 createHotSellerSection() 메소드는 각각 Hot Item 및 Hot Seller 섹션의 레이아웃을 정의하는 NSCollectionLayoutSection 객체를 생성하고 반환합니다.

Hot Seller 섹션에서 그룹의 레이아웃을 정의하기 위해 'createGroupsOfTabbarSection()' 메서드를 사용합니다.

createHeader() 메서드는 Hot Seller 섹션에 대한 고정 헤더 보기를 정의하는 NSCollectionLayoutBoundarySupplementaryItem 객체를 생성하고 반환합니다.

 

 

configureDataSource() 메소드는 셀을 등록하고 셀 프로바이더와 supplementary view 프로바이더를 설정하여 collection view의 datasource를 구성합니다.

// 데이터 소스 초기화
    private func configureDataSource() {
        // dataSource 값 정의
        dataSource = HomeDataSource(collectionView: mainpageCollectionView, cellProvider: { collectionView, indexPath, item in
            //cell 구성
            switch item {
            case .hotItem:
                let cell: HotItemSectionCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: HotItemSectionCollectionViewCell.reuseIdentifier , for: indexPath)
                as! HotItemSectionCollectionViewCell
                return cell

            case .hotSeller:
                let cell: HotSellerSectionCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: HotSellerSectionCollectionViewCell.reuseIdentifier , for: indexPath)
                as! HotSellerSectionCollectionViewCell
                return cell
                
            case .soldOut:
                let cell: SoldOutSectionCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: SoldOutSectionCollectionViewCell.reuseIdentifier , for: indexPath)
                as! SoldOutSectionCollectionViewCell
                return cell
                
            case .recentNFT:
                let cell: RecentNFTSectionCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: RecentNFTSectionCollectionViewCell.reuseIdentifier , for: indexPath)
                as! RecentNFTSectionCollectionViewCell
                return cell
            
            case .activity:
                let cell: ActivitySectionCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: ActivitySectionCollectionViewCell.reuseIdentifier , for: indexPath)
                as! ActivitySectionCollectionViewCell
                return cell
            
                
            default :
                let cell: TabbarSectionCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: TabbarSectionCollectionViewCell.reuseIdentifier , for: indexPath)
                as! TabbarSectionCollectionViewCell
                return cell
           
            }
        })
        
        dataSource?.supplementaryViewProvider = { collectionView, kind, indexPath in
                if kind == UICollectionView.elementKindSectionHeader {
                    let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: TabbarSectionCollectionViewCell.reuseIdentifier, for: indexPath) as! TabbarSectionCollectionViewCell
                    header.backgroundColor = .yellow // TODO: 커스텀 탭바 완료 후 적용
    
                    return header
                } else {
                    return nil
                }
            }
    }