TIL 16

오늘 배운 것

• UICollectionViewCompositionalLayout에 대해서 공부했다.
  • 컴포지셔널 레이아웃은 iOS 13이상부터 사용가능하다. Flowlayout은 간단한 레이아웃에서는 잘 작동하지만 레이아웃이 커지면 복잡해져서 단순하게 구현하도록 CompositionalLayout을 도입했다.
  • 컴포지셔널 레이아웃은 섹션(NSCollectionLayoutSection)안에 그룹(NSCollectionLayoutGroup)이 있고, 그룹안에 아이템(NSCollectionLayoutItem)이 있다.
  • 섹션, 그룹, 아이템은 NSCollectionLayoutSize로 크기를 지정해줘야 한다.
  • NSCollectionLayoutSize는 .absolute, .estimated, .fraction으로 지정할 수 있고 뜻은 앞에서 부터 고정값, 추측값, 퍼센트값이다.
  • NSCollectionLayoutGroup.vertical 아니면 .horizontal로 그룹안에 아이템들을 어떤 방향으로 나열할지 선택해야한다.
  • NSDirectionalEdgeInsets는 아이템 안쪽으로 여백이 생긴다.

  • 참고 사이트
    ```swfit override func viewDidLoad() { super.viewDidLoad()

    collectionView.dataSource = self collectionView.collectionViewLayout = generateCompositionalLayout() }

private func generateCompositionalLayout() -> UICollectionViewLayout { let firstItem = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1/4)))

    let secondMainItem = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(2/3), heightDimension: .fractionalHeight(1.0)))
    let secondTrailingItem = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.5)))
    let trailingGroup = NSCollectionLayoutGroup.vertical(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/3), heightDimension: .fractionalHeight(1.0)), subitems: [secondTrailingItem, secondTrailingItem])
    let secondGroup = NSCollectionLayoutGroup.horizontal(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1/4)), subitems: [secondMainItem, trailingGroup])
    
    let thirdItem = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/3), heightDimension: .fractionalHeight(1.0)))
    let thirdGroup = NSCollectionLayoutGroup.horizontal(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1/4)), subitems: [thirdItem, thirdItem, thirdItem])
    
    
    let reversedGroup = NSCollectionLayoutGroup.horizontal(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1/4)), subitems: [trailingGroup, secondMainItem])
    
    let nestedGroup = NSCollectionLayoutGroup.vertical(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0)), subitems: [firstItem, secondGroup, thirdGroup, reversedGroup])
    
    let section = NSCollectionLayoutSection(group: nestedGroup)
    let layout = UICollectionViewCompositionalLayout(section: section)
    
    return layout
} ``` <br> <img src="/assets/images/diary/16/01.png"> <br> <br>