UICollectionViewCompositionalLayout

Judy·2022년 7월 30일

CollectionView

iOS

목록 보기

18/28

CollectionView의 Layout

UICollectionViewCompositionalLayout

CollectionViewLayout의 한 종류

하나 이상의 Section으로 구성
하나의 Section은 Item으로 구성된 Group들로 구성
Group은 Item들을 horizontal row(가로 스크롤) vertical column(세로 스크롤) 또는 사용자 지정 배열로 배치할 수 있다

Section, Group, Item의 관계

Item들을 Group으로 -> Group들을 Section으로 -> 전체 Layout 구성

1. NSCollectionLayoutDimension

컬렉션 뷰에서 Item의 width 또는 height를 나타내는 클래스

1) fractionalWidth(_:), fractionalHeight(_:)

class func fractionalWidth(_ fractionalWidth: CGFloat) -> Self
class func fractionalHeight(_ fractionalHeight: CGFloat) -> Self

자신이 포함된 그룹의 대한 비율로 계산된 width 또는 height
Type Method

2) estimated(_:)

class func estimated(_ estimatedDimension: CGFloat) -> Self

예상하는 사이즈로 직접 지정
Type Method

3) absolute(_:)

class func absolute(_ absoluteDimension: CGFloat) -> Self

절대점 값으로 사이즈를 지정
Type Method

2. NSCollectionLayoutGroup

정해진 형식에 따라 Item들을 배치하는 그룹

1) horizontal(layoutSize:subitems:)

class func horizontal(
    layoutSize: NSCollectionLayoutSize,
    subitems: [NSCollectionLayoutItem]
) -> Self

layoutSize 크기로 subitems 배열의 항목들을 수평으로 나열된 Group을 생성
vertical(layoutSize:subitems:) -> 수직
Type Method

2) horizontal(layoutSize:subitem:count:)

class func horizontal(
    layoutSize: NSCollectionLayoutSize,
    subitem: NSCollectionLayoutItem,
    count: Int
) -> Self

layoutSize 크기로 subitem을 count만큼 수평으로 나열된 Group을 생성
vertical(layoutSize:subitem:count:) -> 수직
Type Method

3) interItemSpacing

Group에 속한 Item들 간의 거리
Instance Property

3. NSCollectionLayoutSection

Group을 모은 컨테이너

1) init(group:)

convenience init(group: NSCollectionLayoutGroup)

지정된 group을 포함하는 Section을 생성
Initializer

2) interGroupSpacing

var interGroupSpacing: CGFloat { get set }

Section 속 Group들 간의 거리
Instance Property

3) contentInsets

var contentInsets: NSDirectionalEdgeInsets { get set }

Section의 콘텐츠와 경계 사이의 거리(Item, Group에도 지정 가능)
Instance Property
NSDirectionalEdgeInsets -> init(top:leading:bottom:trailing:)

init(
    top: CGFloat,
    leading: CGFloat,
    bottom: CGFloat,
    trailing: CGFloat
)

예시

 section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)

4. Layout = UICollectionViewCompositionalLayout

1) init(section:)

init(section: NSCollectionLayoutSection)

단일 section으로 구성된 레이아웃 생성

2) init(sectionProvider:)

init(sectionProvider: @escaping UICollectionViewCompositionalLayoutSectionProvider)

sectionProvider를 이용해 레이아웃 생성

전체 예시 코드

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
}