[UIKit] Compositional Layout Section

Compositional Layout

compositional layout은 UICollectionView 레이아웃의 한 종류로

 

차례로 item을 구성하고, group을 구성하고, section을 차례로 구성이 가능하다

 

[ 공식 페이지 제공 코드 ]

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
}

 

3가지의 사이즈 지정 방법을 제공한다

• fractional - 컨테이너와의 너비&높이 비율로 지정
• absolute - 고정 값 지정
• estimated - content의 크기가 바뀔 수 있음을 내포, 임시(예측) 값

그 외 다양한 기능들이 있는데, 이건 공식 문서를 참고하자!

샘플 프로젝트도 다운받을 수 있다

Implementing Modern Collection Views | Apple Developer Documentation

 

[ 프로젝트 적용 예시 ]

import UIKit

enum ExampleCompositionalLayout: Int, CaseIterable {
    
    case typeFirst
    case typeSecond
    
    static func create() -> UICollectionViewCompositionalLayout {
        
        let layout = UICollectionViewCompositionalLayout { section, environment in
            
            let section = ExampleCompositionalLayout(rawValue: section)
            
            switch section {
            case .typeFirst:
            	return createTypeFirst()
            case .typeSecond:
                return createTypeSecond()
            case nil:
                return nil
            }

        }
        
        return layout
    }
    
    private static func createTypeFisrt() -> NSCollectionLayoutSection { ... }
    
    private static func createTypeSecond() -> NSCollectionLayoutSection { ... }
}

 

개인적으로는 Layout의 Section을 Enum으로 생성하여 관리하고 있다

 

 

Compositional Layout 활용하기

Enum을 통해 관리하게 되면, 연관값을 활용해서 동일한 Section Layout을 무한정 추가 가능하다

 

나 같은 경우에는 날짜별로 동일한 Layout의 Section이 추가되어야 하기 때문에, enum case에 String타입의 연관값을 추가했다

그래서 동일한 Section Layout을 날짜(String)만 바꿔서 계속 추가할 수 있었다

enum TripDashboardCompositionalLayout: CaseIterable, Hashable {
    
    case expense(section: String)
    ...
}

snapshot.appendItems([data], toSection: .expense(section: newSectionName))

 

 

GitHub - DONOTINTO/DoT: DoT - 여행 가계부 (Last Update v1.1.1 - 24.05.07)

전체 코드는 여기서 확인 가능하다