[ iOS ] CompositionLayout 방향 이해하기

 

 

📖 CompositionalLayout

CollectionView의 CompositionalLayout은 Section, Group, Item으로 구성되어있다. 여기에서 Group은 NSCollectionLayoutItem 의 하위 클래스이기 때문에 Group 안에 Group이 들어갈 수도 있다.

 

 

 

 

 

 

 

🚥 Section과 Group의 방향

CompositionalLayout에서는 Section의 방향과 Group의 방향을 설정할 수 있다. Group의 item 배치 방향은 .vertical과 .horizontal 메서드로 지정해줄 수 있고, Section의 scroll 방향은 UICollectionViewCompositionalLayoutConfiguration을 통해 설정할 수 있다.

 

 

위 그림을 통해 Section과 Group의 방향을 이해해보자. nested group은 2️⃣와 3️⃣을 item으로 가지며 정렬은 vertical 로 설정했고, Group은 1️⃣과 nested group을 item으로 가지며 정렬은 horizontal로 설정했다. 그리고 Section의 scroll 방향이 vertical이라서 Group 2개가 아래로 나열되어있다.

 

 

 

 

 

 

🧚🏻‍♀️ 사용 예시

한 Group에 두 개의 item을 넣어 세로로 정렬하고, Section의 scroll 방향을 가로로 하면 아래와 같은 코드와 UI가 나타난다.

func bookListLayout() -> UICollectionViewLayout {
        let estimatedHeight = CGFloat(100)
        let layoutSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(estimatedHeight))
        
        let item = NSCollectionLayoutItem(layoutSize: layoutSize)
        let group = NSCollectionLayoutGroup.vertical(layoutSize: layoutSize,
                                                       repeatingSubitem: item,
                                                       count: 2)
                                                       
        let section = NSCollectionLayoutSection(group: group)
        section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
        section.interGroupSpacing = CGFloat(15)
        
        let configuration = UICollectionViewCompositionalLayoutConfiguration()
        configuration.scrollDirection = .horizontal
        
        let layout = UICollectionViewCompositionalLayout(section: section, configuration: configuration)
        return layout
    }