[ swift - compositional layout ]

Compositional Layout

• iOS 13부터 도입된 UICollectionView의 레이아웃 시스템이며 복잡한 UI를 더 쉽게 구현할 수 있도록 하는 도구이다. UICollectionViewCompositionalLayout 클래스를 사용하여 구현.

구성요소

• NSCollectionLayoutItem : 컬렉션뷰에서 각 아이템의 크기, 모양을 정한다.
• NScollectionLayoutGroup : 여러 아이템을 그룹화하여 배치할 수 있는 방법을 정한다. 그리드 레이아웃을 만들거나 아이템을 그룹으로 묶어 배치할 때 사용된다.
• NSCollectionLayoutSection : 한 섹션의 레이아웃을 정한다. 여러 그룹이나 아이템을 포함할 수 있고 섹션 간의 여백이나 헤더,푸터를 설정할 수 있다.
• NSCollectionLayoutSize : 아이템, 그룹, 섹션의 크기를 정의
  * widthDimension / heightDimension : 가로 / 세로 크기. fractional-, absolute, estimated 등의 값으로 설정할 수 있다.
  • fractionalWidth / fractionalHeight : 상위그룹 또는 섹션의 너비에 대한 상대적인 비율을 나타낸다.
  • absolute : 정확한 픽셀 크기를 나타낸다.
  • estimated : 대략적인 크기를 나타낸다. 성능 최적화를 위해 사용되며 정확한 크기를 정의하지 않고 추정값을 사용할 수 있다.
• UICollectionViewCompositionalLayout : 위 구성요소들을 사용해 전체 컬렉션뷰 레이아웃을 생성한다. 이를 통해 다양한 레이아웃을 조합할 수 있다.

func createCompositionalLayout() -> UICollectionViewLayout {
	// Item
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2), heightDimension: .fractionalHeight(1.0))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    
    // Group
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.2))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 5) // 아이템 5개를 가로로 나열
    
    // Section
    let section = NSCollectionLayoutSection(group: group)
    
    // Compositional Layout 
    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout
}