[iOS 13+] Compositional Layout

목차

1. Compositional Layout 이란?
2. Compositional Layout 사용

---

1. Compositional Layout 이란?

Compositional Layout은 iOS 13+ 에서 사용할 수 있는 컬렉션 뷰 레이아웃의 일종입니다. 각각의 작은 구성 요소를 전체 레이아웃으로 결합(또는 구성)하여 콘텐츠에 대한 모든 종류의 시각적 배열을 구축할 수 있습니다. 

쉽게 말하면 Compositional Layout은 배열 형태의 복잡한 UI를 그릴 때 사용하면 도움이 되는 기술입니다. 

Compositional 구성 요소와 앱스토어 스크린샷

이미지와 같이 Section, Group, Item의 작은 구성 요소로 나누어 여러 개의 컬렉션뷰로 만들어야 할 UI를 1개로 만들 수 있습니다.

개인적인 의견이지만 section, group, item을 메서드 한 곳에서 관리하니까 편하네요. 동적 크기 셀 만들기 간단하고 코드도 적고요. ㅎ_ㅎ

꼭 위의 이미지 같은 화면 구성이 아니더라도 앞으로 컬렉션뷰를 써야할 일이 있을 때 자주 사용할 것 같습니다. 너무 좋아.. 👍

 

2. Compositional Layout 사용

복잡한 화면말고 간단한 화면으로 감을 잡아보겠습니다.

일단 기본적으로 컬렉션뷰를 만들었을 때랑 Compositional Layout을 적용했을 때 결론 스크린샷부터 보여드리겠습니다.
(link -> github 코드)

 override func viewDidLoad() {
    super.viewDidLoad()
        
    collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
    collectionView.dataSource = self
    
    // 기본적인 컬렉션 뷰에 이것만 추가로 적어주었음
    collectionView.collectionViewLayout = createBasicListLayout()
}

func createBasicListLayout() -> UICollectionViewLayout {
    let itemSize = NSCollectionLayoutSize(widthDimension: .estimated(80), heightDimension: .absolute(48.0))
    
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
      
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(48.0))
        
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        
    let section = NSCollectionLayoutSection(group: group)
        
    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout
}

 

 

NSCollectionLayoutDimension - link

• .absolute : 지정한 치수로 정확하게 설정됨
• .estimated : 기대하는 치수를 적고 최종적인 치수는 컨텐츠가 렌더링 된 후 설정됨
• .fractionalWidth : 컨테이너 크기에 비례하여 설정됨 (1.0 이면 컨테이너 크기와 같다는 뜻)

 

Compositional Layout 적용된 이미지 보면 너무 간격이 딱 붙어있죠,,

간격을 설정 해보겠습니다.

---

    func createBasicListLayout() -> UICollectionViewLayout {
        let itemSize = NSCollectionLayoutSize(widthDimension: .estimated(80), heightDimension: .absolute(48.0))
        
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
      
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(48.0))
        
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        // 아이템 간격 설정
        group.interItemSpacing = .fixed(10)
        
        let section = NSCollectionLayoutSection(group: group)
        // 그룹 간격 설정
        section.interGroupSpacing = 10
        // 섹션 인셋 설정
        section.contentInsets = NSDirectionalEdgeInsets(top: 4, leading: 4, bottom: 2, trailing: 2)
        
        let layout = UICollectionViewCompositionalLayout(section: section)
        return layout
    }

 

간단하네요!

끝!!

---

참고

• Apple Compositional Layout Doc
• Apple NSCollectionLayoutDimension Doc
• WWDC 2019
• Modern collection view apple sample code