Modern UIKit Collection, TableView #2-2

Advances in Collection View Layout #2

Advances in Collection View Layout - WWDC19 - Videos - Apple Developer

💡 Collection View Layout을 사용하면 풍부한 interactive 컬렉션을 쉽게 만들 수 있습니다. 기본 목록부터 다차원 탐색 환경까지 동적이고 반응이 빠른 레이아웃을 만드는 방법을 알아보세요.

CompositonalLayout 주요 컴포넌트

1. NSCollectionLayoutSize

→ Item과 Group 컴포넌트에서 사용함

2. NSCollectionLayoutItem

컬렉션 뷰 레이아웃의 가장 기본적인 구성 요소입니다.

💡 Item은 Collection View에서 개별 콘텐츠의 크기, 간격 및 정렬 방법에 대한 기본 지침. Item은 화면에 렌더링되는 하나의 UIView를 나타낸다. 일반적으로 Item은 Cell이지만 HeaderView, FooterView 및 기타 AccessoryView가 될 수도 있음
⚠️ 이런 경우 대부분 NSCollectionLayoutItem을 상속받은 다른 클래스 컴포넌트를 사용해야함)
예를 들어 사진 앱에서 Item은 하나의 사진을 보여 줄 수 있습니다. App Store 앱에서 Item은 추천 앱 목록에서 앱 아이콘, 앱 이름, 태그 라인 및 다운로드 버튼과 같은 개별 정보를 표시하는 셀일 수 있습니다.

⇒ 주요 Property

• supplementaryItems → 각각의 아이템에 추가로 덧붙이는 아이템
• edgeSpacing → 아이템들 사이에 넣는 간격
• contentInsets → 아이템 내부에서 갖을 간격

✅  Item은 supplementaryItem들을 가질 수 있다.

3. NSCollectionLayoutGroup

경로를 따라 항목을 배치하는 항목 집합을 위한 컨테이너입니다.

⚠️ NSCollectionLayoutItem을 상속 받는다!!

💡 Group은 CollectionView의 항목(Item)이 서로에 대해 어떻게 배치되는지를 결정 Group은 Item을 행, 열 혹은 사용자 지정 배열로 배치할 수 있습니다. Group은 Item이 서로에 대해 렌더링되는 방식에 대한 규칙을 구성하지만 그 자체로는 콘텐츠를 렌더링하지 않습니다. ⇒ 실제 뷰에 나타나는 것이 아닌 추상적인 것이라는 의미
App Store 앱에서 그룹은 세로 열로 배열된 셀(항목)의 단일 열일 수 있습니다.

⇒ 주요 Property

• subitems → 그룹을 구성할 Item 배열, 앞서 Group의 Item 배열 배치를 어떻게 해야할지 선언해야한다.
• interItemSpacing → 아이템 간의 간격을 어떻게 할 지 설정한다.

⇒ 생성 방법 - 3가지 타입 속성으로 호출하기

1. 행 배열으로 생성하기
2. 열 배열로 생성하기
3. 커스텀 그룹 생성하기
   → 직접 그룹 내부 영역에 아이템들의 위치를 설정할 수 있다… 그러나 잘 사용 안하는 듯…

✅ Group도 NSCollectionLayoutItem을 갖기 때문에 Group의 subItem에 Group인스턴스를 넣어도 된다. 이런 기법을 Nested group이라 부른다.

4. NSCollectionLayoutSection

그룹 집합을 별개의 시각적 그룹으로 결합하는 컨테이너입니다.

💡 컬렉션 보기 레이아웃에는 하나 이상의 섹션이 있습니다. 섹션은 레이아웃을 여러 부분으로 분리하는 방법을 제공합니다.
+  각 섹션은 컬렉션 보기의 다른 섹션과 동일한 레이아웃 또는 다른 레이아웃을 가질 수 있습니다. 섹션의 레이아웃은 섹션을 만드는 데 사용된 그룹(NSCollectionLayoutGroup)의 속성에 의해 결정됩니다.
+  사진 앱에서 연도 페이지의 각 섹션은 동일한 레이아웃을 사용합니다. 앱 스토어에서 앱 페이지에는 콘텐츠 배열이 다른 여러 섹션이 표시됩니다.

⇒ 생성하기

1. .init(group: NSCollectionLayoutGroup) → 그룹을 넣어서 생성
2. .list(using: [UICollectionLayoutListConfiguration],
   layoutEnvironment: [NSCollectionLayoutEnvironment]) ⇒ List 형식의 Section 생성
   ❗ WWDC 20 이후에 나온 개념: Lists in UICollectionView 에서 무엇인지 확인하기

⇒ 주요 속성

• 섹션 스크롤 구체화하기
  1. orthogonalScrollingBehavior: [UICollectionLayoutSectionOrthogonalScrollingBehavior]
     ⇒ 이 Section을 갖는 CollectionView의 스크롤 방향과 수직 방향의 스크롤의 정의
• 섹션 Spacing 구성하기
  1. interGroupSpacing → 그룹들 간의 Spacing 설정
  2. contentInsets → Section 내부와 그 boundary(header, footer)간의 간격 설정
• 추가적인 뷰들 구성하기
  1. boundarySupplementaryItems → Header,Footer를 설정할 수 있다.
  2. decorationItems → Section영역에 backgroundView들을 설정할 수 있다.

✅ Section은 boundarySupplyItem과 decorationItem을 갖는다.

5. NSCollectionViewCompositionalLayout

유연한 시각적 배열로 항목을 결합할 수 있는 레이아웃 개체입니다.

💡 컴포지션 레이아웃은 컬렉션 보기 레이아웃의 한 유형입니다. 컴포지션 레이아웃은 유연하고 빠르게 구성할 수 있도록 설계되어 각각의 작은 구성 요소를 전체 레이아웃으로 결합하거나 합성하여 콘텐츠에 대한 모든 종류의 시각적 배열을 구축할 수 있습니다.
+  컴포지션 레이아웃은 레이아웃을 별개의 시각적 그룹으로 분할하는 하나 이상의 섹션으로 구성됩니다. 각 섹션은 표시하려는 데이터의 가장 작은 단위인 개별 항목 그룹으로 구성됩니다. 그룹은 항목을 가로 행, 세로 열 또는 사용자 지정 배열로 배치할 수 있습니다.
+ 이 기본 목록 레이아웃의 예와 같이 항목에서 그룹으로, 그룹에서 섹션으로, 마지막으로 전체 레이아웃으로 구성 요소를 결합합니다:

⇒ 생성하기

• 단일 Section 컴포넌트로 존재하는 CollectionView 만들기
• NSCollectionViewCompositionalLayout(section: section)
• 여러 Section 컴포넌트로 존재하는 CollectionView 만들기
• NSCollectionViewCompositionalLayout(sectionProvider: NSCollectionViewCompositionalLayoutSectionProvider)

✅ 1. Configuration으로 추가적인 Section들 설정하기 위해 "NSCollectionViewCompositionalLayoutConfiguration" 확인하기
+  2. 여러 Section으로 구성하기 위한 "NSCollectionViewCompositionalLayoutSectionProvider" 확인하기

---

CompositonalLayout 구성 컴포넌트

1. Size 설정하기

NSCollectionLayoutDimension

컬렉션 뷰에서 항목의 너비 또는 높이를 나타내는 개별적인 영역입니다.

→ NSCollectionLayoutSize를 구성한다.

💡 CollectionView에서 나타낼 각각의 항목(Item, Group, Section 등등…)에서의 고유 높이 및 너비값을 지정하는 역할
⇒ 3가지의 표현법으로 나눔

⇒ 표현법 3가지

1. Absolute(CGFloat) → 고유한 point의 크기로 설정한다.
2. Estimated(CGFloat) → 원하는 크기를 입력하면 런타임에서 실제 컬렉션 뷰에서의 크기에 맞게 설정한다.
   ⇒ 파워포인트 자동 맞춤 기능과 비슷
3. fractionalHeight(CGFloat) - fractionalWidth(CGFloat) → 이 항목의 상위 그룹의 크기에 맞게 설정한다.

2. Supplymentary 설정하기

NSCollectionLayoutSupplementaryItem

컬렉션 보기에서 항목에 시각적 장식을 추가하는 데 사용되는 개체입니다.

💡 보조 항목을 사용하여 콘텐츠에 추가 보기를 첨부할 수 있습니다.
+  예를 들어, 항목에 배지를 첨부하거나 그룹 주위에 프레임을 첨부할 수 있습니다.
+  보조 항목은 첨부된 항목의 인덱스 경로를 따릅니다.

⇒ 주요 Property

• containerAnchor → Item과 그 상위 Container와의 경계에서 설정할 위치
• itemAnchor → 아이템에 supplementaryItem을 넣을 경우 설정할 위치
• elementKind → 이 아이템의 고유 아이디 (String)
• zIndex → 아이템들 간의 스택 순서

NSCollectionLayoutBoundarySupplementaryItem

컬렉션 보기에 header 또는 footer를 추가하는 데 사용되는 개체입니다.

⇒ NSCollectionLayoutSupplementaryItem 의 자식 클래스

💡 경계 추가 항목은 특수한 유형의 추가 항목(NSCollectionLayoutSupplementaryItem)입니다. 경계 보조 항목을 사용하여 컬렉션 보기의 섹션 또는 전체 컬렉션 보기에 머리글 또는 바닥글을 추가할 수 있습니다.

    let section = NSCollectionLayoutSection(group: group)
    
    let headerFooterSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                                 heightDimension: .estimated(44))
    let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerFooterSize,
                                                                   elementKind: ElementKind.sectionHeader,
                                                                     alignment: .top)
    let sectionFooter = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerFooterSize,
                                                                   elementKind: ElementKind.sectionFooter,
                                                                     alignment: .bottom)
        
    section.boundarySupplementaryItems = [sectionHeader, sectionFooter]

NSCollectionLayoutDecorationItem

컬렉션 뷰의 섹션에 배경을 추가하는 데 사용되는 개체입니다.

⇒ [NSCollectionLayoutSupplementaryItem] 의 자식 클래스

3. NSCollectionViewCompositionalLayout 구성요소

NSCollectionLayoutEnvironment

레이아웃의 컨테이너 및 환경 특성(예: 크기 클래스 및 디스플레이 배율) 정보 제공에 사용하는 프로토콜

💡 섹션 공급자에서는 레이아웃 환경을 사용하여 레이아웃이 표시되는 컨텍스트에 대한 정보를 가져옵니다. 레이아웃의 크기 및 콘텐츠 삽입과 같은 레이아웃 컨테이너에 대한 정보와 크기 클래스, 디스플레이 배율 및 사용자 인터페이스 관용구와 같은 환경의 특성을 얻을 수 있습니다. 레이아웃의 섹션을 렌더링하는 동안 이 정보를 사용하여 레이아웃을 표시하는 방법을 결정할 수 있습니다.예를 들어 다음 코드는 레이아웃 환경의 특성 컬렉션을 사용하여 레이아웃의 섹션을 생성하는 동안 UI가 다크 모드인지 여부를 확인합니다.

let layout = UICollectionViewCompositionalLayout { (sectionIndex: Int,
    layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection in

    if layoutEnvironment.traitCollection.userInterfaceStyle == .dark {
        return sectionForUserInterfaceStyle(.dark)
    } else {
        return sectionForUserInterfaceStyle(.light)
    }
}

✅ 기기의 특성과 관련된 환경을 알려주는 프로토콜

UICollectionLayoutSectionOrthogonalScrollingBehavior

주 레이아웃 축과 관련된 레이아웃 섹션의 스크롤 동작입니다. enum

💡 기본적으로 각 섹션은 레이아웃 구성의 스크롤 방향 속성에 의해 정의된 레이아웃의 주축을 따라 콘텐츠를 배치합니다.
+  특정 섹션에 대한 이 동작을 변경하려면 해당 섹션의 직교 스크롤링 동작 속성을 기본값인 UICollectionLayoutSectionOrthogonalScrollingBehavior.none과 다른 값으로 설정하면 됩니다.
+  이 속성에 다른 값을 설정하면 섹션의 콘텐츠가 주 레이아웃 축에 직각으로 배치됩니다.

⇒ Enum case

case none
→ 콘텐츠를 직각으로 스크롤하지 않음

case continuous

→ 연속 스크롤을 통해 콘텐츠를 직각으로 스크롤할 수 있습니다.

case continuousGroupLeadingBoundary

→ 스크롤하여 표시되는 그룹의 앞쪽 경계에서 자연스럽게 멈춤

case paging

→ 콘텐츠 페이지로 이동 + 디바이스의 너비, 높이로 조절한다.

case groupPaging

→ 콘텐츠를 한 번에 한 그룹씩 직각으로 페이지에 표시할 수 있습니다.

case groupPagingCentered

→ 페이지시 그룹 중심에 나타남