[UiKit] UICollectionViewCompositionalLayout 을 알아보자!

eung7_·2022년 2월 11일

iOS

목록 보기

8/17

이번에는 UICollectionViewCompositionalLayout에 대해 알아보려고 한다. '아니 UICollectionViewFlowLayout이 있는데 CompositionalLayout이 또 뭐지?' 라고 생각할 수 있다. 대체 이 객체는 무엇이고 FlowLayout과 차이점은 무엇일까? 기존 FlowLayout의 단순하고 일반적인 CollectionView에서 오늘날 많은 앱들이 구현하고 있는 더 복잡하고 디자인이 겸비된 Layout으로 탈피할 수 있는 객체라고 말할 수 있다.

UICollectionViewCompositionalLayout은 왜 쓰는거야?

@MainActor class UICollectionViewCompositionalLayout : UICollectionViewLayout

우선 Compositonal Layout은 CollectionViewLayout을 상속받고 있다. 레이아웃의 한 유형이라는 뜻이다. Apple은 이 객체를 사용하면 Flexible(유연하고), Fast(빠르고), Composable(구성가능한) 장점을 지니고 있다고 설명하고 있다.

그러니까 쉽게 말하자면 각각의 구성요소들을 따로 만드는 것이다. 여기서 Section, Group, Item이 보일 것이다. 구성된 레이아웃은 거시적으로 섹션을 기준으로 나뉘게 된다. 그리고 각 섹션은 또 Item의 모임인 Group으로 나뉘게 되고, 가장 작은 단위는 역시 Item이라고 말할 수 있다. 이 그룹들은 사용자 지정으로 여러 가지 방향으로 배치할 수 있다.

Item -> Group -> Section

그러면 가장 작은 구성요소로 부터 순서가 Item -> Group -> Section이라는 메커니즘을 이해할 수 있을 것이다. 이런 순서로 결합해주는 것이 바로 UICollectionViewCompositionalLayout이라고 말할 수 있다.

func createBasicListLayout() -> UICollectionViewLayout { 
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),                                  
                                         heightDimension: .fractionalHeight(1.0))    
    let item = NSCollectionLayoutItem(layoutSize: itemSize)  
  
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),                                          
                                          heightDimension: .absolute(44))    
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,                                                   
                                                     subitems: [item])  
  
    let section = NSCollectionLayoutSection(group: group)    

    let layout = UICollectionViewCompositionalLayout(section: section)    
    return layout
}