[iOS 개발] Compositional Layout이란?

Compositional Layout이란?

 

요즘 앱들을 보면 단순히 TableView, CollectionView 하나로 이루어져 있는 경우보다 섹션별로 각각 다른 레이아웃으로 구성되어 있는 경우가 대부분이다.

과거에 나 또한 TableView에 CollectionView를 넣어서 화면을 구성했던 기억이 나는데, 기억상 데이터 전달을 할 때 어지러웠던 기억이 난다. 이러한 경우 Compositional Layout을 사용하게 된다면 유연하고 편리하게 화면을 구성할 수 있다.

 

 

Compositional Layout 구성

Compositional Layout은 Layout, Section, Group, Item으로 구성된다

Layout안에는 Section들이, Section안에는 Group들이, Group안에는 Item들이 존재한다.

우리는 해당 요소들의 Size들을 설정해주기만 하면 된다.

 

각각의 요소들의 size를 정해주는 방법은 다음과 같이 3가지가 존재한다.

 

1. fractionalWidth / fractionalHeight

- 컨테이너의 높이와 넓이 비율

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5),
                                     heightDimension: .fractionalHeight(1.0))
let item = NSCollectionLayoutItem(layoutSize: itemSize)

앞서 말했다시피 Layout안에는 Section들이, Section안에는 Group들이, Group안에는 Item들이 존재한다.

Item을 예로 들어 Group 안에는 Item들이 존재한다. 

해당 코드를 보면 .fractionalWidth(0.5) 즉 Group 크기의 1/2만큼 너비, .fractionalHeight(1.0) Group 크기와 높이가 같은 아이템 사이즈가 결정된다.

Group, Section도 이와 마찬가지로 사이즈를 설정해주면 된다.

 

2. absoulute

- 포인트 값으로 지정

 

3. estimated

- 동적으로 컨텐츠 사이즈가 변경할 가능성이 있어 크기가 정확히 정해지지 않은 경우

 

 

Compositional Layout 간단한 예시

 

코드

private func createLayout() -> UICollectionViewLayout {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2),
                                              heightDimension: .fractionalHeight(1.0))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        item.contentInsets = NSDirectionalEdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5)
        
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                               heightDimension: .fractionalWidth(0.2))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        
        let section = NSCollectionLayoutSection(group: group)
        
        let layout = UICollectionViewCompositionalLayout(section: section)
        
        return layout
}

다시 한번 말하자면  Layout안에는 Section들이, Section안에는 Group들이, Group안에는 Item들이 존재한다.

 

현재 이 코드에는 Layout이 하나가 존재, Layout 안에는 Section이 하나가 존재, Section 안에는 group이 하나가 존재, group안에는 여러개의 item이 존재하는 형식이다.

 

여기서 주의 깊게 살펴봐야 할 부분은 itemSize와 groupSize이다. 

 

groupSize의 width는 .fractionalWidth(1.0)으로 지정함으로써 섹션과 동일한 즉, 화면 넓이와 동일한 넓이를 가지고 있다.

그리고 height는 .fractionalWidth(0.2)으로 지정되어있다. (fractionalHeight가 아닌 fractionalWidth이다 height 0.2인데 왜 그룹이 10개가 나오나 한참 생각했네요.. )

따라서 그룹의 높이는 섹션 넓이의 1/5이다. 화면 넓이 1/5 사이즈가 그룹의 높이인것이다.

 

itemSize의 width는 .fractionalWidth(0.2)로 그룹의 1/5이다. 그룹은 화면 넓이와 동일한 넓이였으므로 아이템은 화면의 1/5의 넓이를 갖게 된다.

그리고 height는 .fractionalHeight(1.0)으로 그룹과 동일한 높이이다. 아까 groupSize의 높이가 화면 넓이의 1/5 사이즈였으므로 아이템의 높이 또한 그룹과 동일하게 화면 넓이의 1/5사이즈가 된다. 이렇게 설정함으로써 item들이 정사각형으로 나오게 된다.(말을 잘 못해서 죄송합니다..) 

 

결론적으로 groupSize의 height를  .fractionalHeight가 아닌 .fractionalWidth로 설정한 이유는 아이템을 정사각형으로 만들기 위함이다.

 

오늘은 이렇게 간략하게 CompositionalLayout의 예제를 살펴보았고, 다음에 이어서 header, footer와 section별로 다른 cell을 가진 CompositionalLayout에 대해 살펴보도록 하겠다.

 

참고:

https://velog.io/@sopt_official/iOS1

Compositional Layout에 대하여

https://developer.apple.com/documentation/uikit/uicollectionviewflowlayout/1617709-estimateditemsize

estimatedItemSize | Apple Developer Documentation