UICollectionViewCompositionalLayout

Judy·2022년 7월 30일
0

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 크기로 subitemcount만큼 수평으로 나열된 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
}




참고 링크
UICollectionViewCompositionalLayout
init(section:)
init(sectionProvider:)
fractionalWidth(_:)
fractionalHeight(_:)
NSCollectionLayoutGroup
horizontal(layoutSize:subitem:count:)
interItemSpacing
NSCollectionLayoutSection
interGroupSpacing
init(group:)
contentInsets
NSDirectionalEdgeInsets

profile
iOS Developer

0개의 댓글