[iOS - UIKit] Compositional Layout - CollectionView

Compositional Layout 

CollectionView에서 사용한다. 공통적인 cell의 형태보다는 다양한 사이즈의 cell들을 표현할 때 사용하기 좋다. 

Compositional Layout은 CollectionView Layout 중 하나이다. (FlowLayout 과 비슷하다고 생각하면 된다.)

 

 

 

위와 같이 item, group, section을 지정해서 다양한 형태의 cell들을 쉽게 나타낼 수 있다. 

Section 안에 Group, Group 안에 Item, Item은 Cell 이라고 생각하면 편하다

 

 

기본적인 Compositional Layout 코드 

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
}

 

 

 

NSCollectionLayoutSize

item의 height와 width를 나타내는 방법이다. 

 

1. absolute (CGFloat)

말 그대로 절대 크기이다. 항상 고정된 크기로 나타난다.

 

let absoluteSize = NSCollectionLayoutSize(widthDimension: .absolute(44), heightDimension: .absolute(44))

 

 

2. estimated(CGFloat)

런타임에 크기가 변할 가능성이 있는 경우 estimated를 사용한다.

시스템이 예상 크기를 기반으로 실제 크기를 계산한다.

 

let estimatedSize = NSCollectionLayoutSize(widthDimension: .estimated(200), heightDimension: .estimated(100))

 

 

3. fractionalWidth(CGFloat), fractionalHeight(CGFloat)

현재 자신이 속한 컨테이너의 크기를 기반으로 비율로써 자신의 크기를 정한다.

0.0~1.0 사이의 CGFloat값을 넣을 수 있다.

 

let fractionalSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2), heightDimension: .fractionalWidth(0.2))

 

 

 

 

sectionNumber에 따른 section 생성

static func create() -> UICollectionViewCompositionalLayout {
        return UICollectionViewCompositionalLayout { (sectionNumber, _ environment) -> NSCollectionLayoutSection? in
            let section: NSCollectionLayoutSection
            switch sectionNumber {
            case 0:
                section = createMainSection()
            case 1:
                section = createUserClipSection()
            case 2:
                section = createWeeklyLinkSection()
            case 3:
                section = createWeeklyRecommendSection()
            default:
                section = createMainSection()
            }
            return section
        }
    }

 

item, group, section 잡기 

static func createUserClipSection() -> NSCollectionLayoutSection {
        let itemFractionalWidthFraction = 1.0 / 2.0
        let itemInset: CGFloat = 7
        
        // item
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(itemFractionalWidthFraction),
                                              heightDimension: .absolute(150))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        item.contentInsets = NSDirectionalEdgeInsets(top: itemInset, leading: itemInset, bottom: itemInset, trailing: itemInset)
        
        // group
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                               heightDimension: .absolute(268))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        
        // section
        let section = NSCollectionLayoutSection(group: group)
        section.contentInsets = NSDirectionalEdgeInsets(top: itemInset, leading: itemInset, bottom: itemInset, trailing: itemInset)
        return section
    }

 

 

Header, Footer 잡기

// Header, Footer
section.boundarySupplementaryItems = [
	NSCollectionLayoutBoundarySupplementaryItem(layoutSize: .init(widthDimension: .fractionalWidth(1), heightDimension: .absolute(50)), elementKind: UICollectionView.elementKindSectionHeader, alignment: .top),
    	NSCollectionLayoutBoundarySupplementaryItem(layoutSize: .init(widthDimension: .fractionalWidth(1), heightDimension: .absolute(20)), elementKind: UICollectionView.elementKindSectionFooter, alignment: .bottom)
]

 

 

 

item들 사이에 간격 띄우기 

let itemInset: CGFloat = 0
        
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(itemFractionalWidthFraction),
                                              heightDimension: .fractionalHeight(1))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
item.contentInsets = NSDirectionalEdgeInsets(top: itemInset,
                                             leading: itemInset,
                                             bottom: itemInset,
                                             trailing: itemInset)