Swift - CompositionalLayout

안녕하세요 오늘 포스팅 해 볼 글은 CollectionView의 CompositionalLayout입니다!

 

 

저는 아직도 CollectionView를 다루는 게 어렵더라고요... 뷰를 볼 때 셀 하나하나를 다른 뷰로 만들어서 전체 뷰를 구성해야 하나..? 하면서 여러 가지 생각이 들곤 하답니다.

 

먼저 공식문서부터 살펴봅시다!

 

---

728x90

https://developer.apple.com/documentation/uikit/uicollectionviewcompositionallayout

UICollectionViewCompositionalLayout | Apple Developer Documentation

 

# UICollectionViewCompositionalLayout

공식문서 상에는 "적응력이 뛰어나고 유연한 시각적 배열로 항목을 결합할 수 있는 레이아웃 개체입니다."라고 되어있습니다.

이게 무슨 말인지... 이 글만 보고는 잘 이해가 안 되는데 좀 더 자세히 파해쳐 보겠습니다!

 

일단 컴포지션 레이아웃은 컬렉션 뷰 레이아웃의 한 유형입니다. 구성이 유연하게 설계되어 각각의 작은 구성 요소를 전체 레이아웃으로 결합하거나 여러 종류의 콘텐츠에 대한 시각적 배열을 만들 수 있습니다.

 

그러니까 우리가 사용하는 다양한 앱들 혹은 심지어 앱스토어에도 굉장히 복잡한 뷰로 되어있잖아요? 그런 앱들을 보면 무슨 생각이 드시나요. 저는 일단 저 각각의 뷰들을 나눠서 개발했나? 싶은데요 이 컴포지션 레이아웃을 쓰면 간편하게 구현이 가능합니다. 

 

공식문서에 나와있는 아래의 이미지를 참고하시면

 

먼저 Compositional Layout은 안에 Layout, Section, Group, Item으로 구성되어있습니다. 하나의 레이아웃 안에 섹션, 섹션 안에 그룹, 그룹 안에 아이템들이 있습니다. 각 요소들의 크기를 지정해 주기만 한다면 이런 복잡한 레이아웃들이 깔끔하고 간단하게 만들 수 있습니다.

 

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
}

 

위의 코드와 같이 각 아이템의 사이즈, 그룹 사이즈, 섹션 및 레이아웃을 선언해 주면 복잡한 레이아웃을 쉽게 만들 수 있습니다!

 

Compositional Layout을 이용해 복잡한 뷰를 만들어 보기 위해 차근차근 순서대로 작업해 보겠습니다.

 

1. Configure Section

첫 번째로, UICollectionViewCompositionalLayout에 각 섹션 별로 column의 개수를 할당해주어야 합니다.

 

private func makeCollectionView() {
      let layout = UICollectionViewCompositionalLayout { (sectionIndex,_) -> NSCollectionLayoutSection? in
        return self.createSection(for: sectionIndex)
    }
}

private func createSection(for sectionIndex: Int) -> NSCollectionLayoutSection {
    switch sectionIndex {
        case 0:
            return createTwoColumnSection(weightConstant: sectionIndex)
        case 1:
            return createSingleColumnSection()
        case 2:
            return createTwoColumnSection(weightConstant: sectionIndex)
        case 3:
            return createHorizontalScrollingSection()
        default:
            return createSingleColumnSection() 
    }
}

 

위에서 섹션 별 column의 개수를 할당해준 후, 앞서 말한 것처럼 아이템, 그룹 사이즈를 지정해줘야 합니다.

private func createTwoColumnSection(weightConstant :Int) -> NSCollectionLayoutSection {
        let weight = (Double(weightConstant) * 0.05)
        
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.48), heightDimension: .fractionalHeight(0.98))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.1 + weight))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        group.interItemSpacing = NSCollectionLayoutSpacing.flexible(10.0)
        
        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = 15.0
        
        return section
    }
    
    private func createSingleColumnSection() -> NSCollectionLayoutSection {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.7))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.05))
        let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])
        
        let section = NSCollectionLayoutSection(group: group)
        
        return section
    }
    
    private func createHorizontalScrollingSection() -> NSCollectionLayoutSection {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.3))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        
        let section = NSCollectionLayoutSection(group: group)
        return section
    }

 

위의 간단한 코드로 복잡한 레이아웃을 가진 뷰가 완성됩니다.

 

각 요소들의 크기를 설정하는 방법은 3가지가 존재합니다.

 

1. fractionalWidth & fractionalHeight - 컨테이너와의 너비&높이 비율

2. absolute - 포인트값으로 지정

3. estimated - 후에 content의 크기가 바뀌어 크기가 정확하지 않을 때는 estimate 값으로

 

크기를 지정하는 방법을 예를 들면,

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

 

item은 그룹 안에 존재하기 때문에, item 크기는 그룹의 비율로 존재합니다. 즉, item의 너비는 group의 20%, 높이는 group과 같은 100%로 설정할 수 있습니다.

 

그 후, 지정된 방식에 따라 item들을 배치가 가능합니다. 이 방법 또한 3가지가 존재합니다.

 

1. horizontal

2. vertical

3. custom

 

매 WWDC를 보면 새롭고 간편한 것들이 많이 나오는 거 같은데요! 이렇게 새로운 방법들이 많이 나오게 되면 저도 모르게 두근두근 설레는 것 같아요..ㅎㅎ 

 

 

이번 주차에서는 CompositionalLayout에 대한 이론을 살펴보았습니다. 다음 포스팅에서는 이 CompositionalLayout을 직접 진행했던 프로젝트에 리펙토링 해보겠습니다! 

 

저도 아직 배워가고 있는 단계라 잘못된 점에 대해서 지적은 언제나 환영입니다. 감사합니다!

 

---

위 포스팅은 공식문서와 아래의 글들을 참고해 제작되었습니다.

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

Compositional Layout에 대하여

https://medium.com/@geun2121/swift-compositional-layout이용해서-collectionview-구성하기-f2e611004fbe

[SWIFT] Compositional Layout이용해서 CollectionView 구성하기