Apple문서: UICollectionView
⚙️ Overview
CollectionView의 Data source
우리가 collection view를 UI에 추가할 때, App의 주된 일은 collection view와 연관된 데이터를 관리하는 것입니다. CollectionView는 TableView와 유사하게 datasource 프로퍼티에 저장된 data source 객체로부터 데이터를 가져옵니다.
UICollectionViewDiffableDataSource / UICollectionViewDataSource
data source로 UICollectionViewDiffableDataSource 객체를 사용할 수 있습니다. 이 객체는 우리가 data와 UI를 간단하고 효율적으로 관리하기 위해 필요한 행동들을 제공해줍니다. 또는, UICollectionViewDataSource 프로토콜을 채택하는 Custom data source를 만들 수도 있습니다
item
CollectionView의 데이터는 개별 item으로 구조화되고, 우리는 이 item들을 section으로 묶을 수도 있습니다. item은 가장 작은 데이터 단위입니다. 예로, 사진 App에서 item은 하나의 이미지일 수 있습니다.
cell
CollectionView는 cell을 사용하여 화면에 item들을 보여줍니다. cell은 UICollectionViewCell class의 인스턴스로, data source를 설정하고 제공합니다
Supplementary view
cell 외에 다른 타입의 view를 사용하여 데이터를 보여줄 수 있습니다 (위 사진에서 Supplementary view로 표시된 부분). 예로, section header/footer가 될 수 있습니다. 이런 supplementary view들은 개별 cell로부터 분리되지만 정보를 전달합니다.
layout
supplementary view는 optional이고 CollectionView의 layout 객체에 의해 정의됩니다. 이 layout 객체는 supplementary view의 배치를 정의할 책임이 있습니다
UICollectionViewDiffableDataSource을 사용하면 편하다
UI에 UICollectionView를 넣는 것 외에도, item들이 data source 객체에서의 순서에 맞게 보여지도록 보장하기 위해 CollectionView의 메서드들을 사용합니다. UICollectionViewDiffableDataSource 객체는 이 과정을 자동으로 관리합니다.
만약 custom data source를 사용 중이라면, 데이터를 추가/제거/재배치할 때마다 UICollectionView의 메서드들을 사용해야 합니다
delegate
또한, CollectionView에 선택된 item을 관리하기 위해 delegate와 함께 동작합니다
⚙️ Layouts
layout 객체는 content의 시각적인 정렬을 정의합니다. layout 객체는 UICollectionViewLayout의 subclass이며 cell과 supplementary view의 구조와 위치를 정의합니다.
layout 객체는 정의만 할뿐..
layout은 content들의 위치를 정의만 하고, view에 이 위치 정보를 직접 적용하지는 않습니다. 이 적용 작업은 CollectionView가 합니다. 왜냐하면, cell과 supplementary view의 생성은 CollectionView와 data source 객체 간의 조정을 수반하기 때문입니다? layout은 item 데이터 대신 시각적인 정보를 제공한다는 점만 제외하면 또 다른 data source라 할 수 있습니다
collectionViewLayout 프로퍼티
layout 객체는 collectionViewLayout 프로퍼티에 저장됩니다. 일반적으로 layout 객체를 CollectionView를 생성시점에 명시하긴 하지만, 동적으로 바꿀 수도 있습니다.
layout 변경하기
이 프로퍼티를 직접적으로 설정하면 layout이 애니메이션없이 바로 업데이트됩니다. 만약, 애니메이션으로 업데이트하고 싶다면 프로퍼티를 직접 변경하지말고 setCollectionViewLayout(_:animated:completion:) 메서드를 호출합니다
Interactive Transition
Gesture Recognizer 혹은 터치 event에 의해 유발되는 상호작용적인 전환을 만들고 싶다면, startInteractiveTransition(to:completion:) 메서드를 사용하여 layout 객체를 변경합니다. 이 메서드는 "중간 layout 객체"를 만들게 되는데, 이는 gesture recognizer 혹은 (전환 progress를 추적하는) event처리 코드와 함께 동작합니다. event처리 코드가 전환이 완료되었다고 판단되면, "중간 layout 객체"를 제거하고 원하는 layout 객체를 생성하기 위해 finishInteractiveTransition() 혹은 cancelInteractiveTransition() 메서드를 호출합니다.
layout에 대해 더 알고 싶다면 Layouts참고
⚙️ Cells and Supplementary Views
CollectionView의 data source 객체는 item을 위한 content와 그 content를 어떻게 보여줄지(view)까지 제공합니다.
view 재사용
content를 처음으로 불러오면, CollectionView가 data source에게 각 item을 어떻게 보여줄지(view) 요청합니다. CollectionView는 data source가 재사용하도록 표시해놓은 view들의 큐/리스트를 유지합니다. 코드에서 명시적으로 새로운 view를 만드는게 아니라, 항상 dequeue하도록만 짜면 됩니다
view dequeue
dequeue 메서드는 요청된 view가 cell이냐 supplementary view냐에 따라 다릅니다
dequeueReusableCell(withReuseIdentifier:for:): cell 요청dequeueReusableSupplementaryView(ofKind:withReuseIdentifier:for:): supplementary view 요청
view 등록
위의 dequeue 메서드를 호출하기 전에, view가 하나도 없는 경우엔 어떻게 view를 만들지를 CollectionView에게 말해줘야 합니다. 이를 위해, CollectionView에 class 혹은 nib 파일을 등록해야 합니다. 예로, cell을 등록하려면, register(_:forCellWithReuseIdentifier:)로 class를 등록하거나 register(_:forCellWithReuseIdentifier:)로 nib 파일을 등록합니다. 이런 등록 과정의 일부로, reuse identifier를 명시합니다. 이는 추후에 view를 dequeue할 때 사용할 string과 같은 것입니다
dequeue 이후 과정
data source 메서드에서 적절한 view를 dequeue한 후에는, 내부 content를 설정하고 CollectionView에게 반환해주면 됩니다. 그리고, CollectionView는 layout 객체로부터 layout정보를 얻은 후, 이를 view에 적용하고 화면에 띄웁니다
⚙️ Data Prefetching
CollectionView는 반응성을 향상시키기 위해 2가지 prefetching 테크닉을 제공합니다
1. Cell Prefetching
cell이 요구되기 전에 미리 준비합니다. CollectionView가 동시에 많은 cell을 요구하면, cell이 표시되기 위해 필요한 시간보다 더 빠르게 요청하게 됩니다. 그러므로, Cell 렌더링이 분산되고 스크롤을 부드럽게 만듭니다. Cell prefetching은 default enable되어 있습니다
2. Data Prefetching
cell이 요청되기 전에 CollectionView의 "Data 요구사항"을 미리 알리는 메커니즘을 제공합니다. 이는 cell의 content가 (네트워크라던지) 비싼 Data 로딩 과정이 필요할 때 유용합니다. UICollectionViewDataSourcePrefetching 프로토콜을 채택하는 객체를 prefetchDataSource 프로퍼티에 할당하여 cell Data prefetching을 언제 해야하는지에 대한 알림을 받습니다
⚙️ Reordering Items Interactively
유저의 상호작용에 따라 item을 옮길 수 있습니다. 일반적으로, CollectionView에서 item의 순서는 data source에 의해 정의됩니다. 만약 item을 재배치하고 싶다면, Gesture Recognizer를 설정할 수 있습니다. Gesture Recognizer로 item을 만지는 유저의 상호작용을 추적하여 item의 위치를 업데이트합니다
item 재배치 메서드 순서
-- 이런 상호작용적인 item 재배치를 시작하려면, CollectionView의 beginInteractiveMovementForItem(at:) 메서드를 호출합니다
-- 그후 Gesture Recognizer가 터치 event를 추적하는 동안, updateInteractiveMovementTargetPosition(_:) 메서드를 호출하여 터치 위치가 변경되는 것을 알립니다
-- Gesture 추적이 끝나면, endInteractiveMovement() 혹은 cancelInteractiveMovement()를 호출하여 상호작용을 끝내고 CollectionView를 업데이트합니다
item 재배치와 layout/dataSource
유저 상호작용이 일어나는 동안, item의 현재 위치를 동적으로 반영하기 위해 CollectionView의 layout을 무효화합니다. 기본적으론 default layout 동작이 item을 재배치하게 되며 원한다면 layout 애니메이션을 커스터마이즈할 수도 있습니다. 유저 상호작용이 끝나면, CollectionView가 item의 새로운 위치를 data source에 업데이트합니다
UICollectionViewController는 default Gesture Recognizer를 제공
UICollectionViewController를 사용하면 default Gesture Recognizer가 제공되어 item 재배치에 사용할 수 있습니다. 이 Gesture Recognizer는 installsStandardGestureForInteractiveMovement를 true로 설정해야 사용할 수 있습니다
⚙️ Interface Builder Attirbutes
Interface Builder에서 설정할 수 있는 CollectionView attribute들입니다
Items
prototype cell의 개수. 이 프로퍼티는 스토리보드에 설정하는 prototype cell의 개수를 제어합니다. CollectionView는 최소 한 개의 cell을 가져야 하며 필요에 따라 여러 개를 가질 수도 있습니다
Layout
사용하려는 layout 객체. UICollectionViewFlowLayout 객체와 커스텀 객체 중 어느 것을 고를지를 제어합니다.
FlowLayout이 선택되면 스크롤 방향을 선택할 수 있고, FlowLayout이 header/footer view를 가질지를 설정할 수 있습니다. header/footer를 enable하면 스토리보드에 reusable view를 설정할 수 있도록 추가됩니다. 물론, reusable view는 코드로 만들 수도 있습니다.
CustomLayout을 선택하는 경우에 대해선 UICollectionViewLayout를 참고합니다
Size Inspector with FlowLayout
FlowLayout이 선택되면 Size inspector에 FlowLayout의 metrics를 설정하는 attirbute가 생깁니다. 이 attribute를 사용하여 cell size, header/footer size, cell간 최소 spacing, section margin 등을 설정할 수 있습니다. 이에 대한 더 많은 정보는 UICollectionViewFlowLayout를 참고합니다
⚙️ Internationalization
Internationalization는 개발자의 몫
CollectionView는 Internationalization을 위한 직접적인 content를 갖고 있지 않습니다. 대신, 당신이 cell과 reusable view를 internationalize하면 됩니다. 이에 대한 더 많은 정보는 Internationalization and Localization Guide를 참고합니다
⚙️ Accessibility
Accessibility는 표준 UIKit Control만 지원
CollectionView는 Accessibility를 위한 직접적인 content도 갖고 있지 않습니다. 만약 사용하려는 cell과 reusable view에 표준 UIKit control이 포함되어 있다면, 이 control들에 대해서는 accessible하게 만들 수 있습니다.
Layout 변경은 UIAccessibilityLayoutChangedNotification로 감지
CollectionView가 화면 layout을 변경할 때, UIAccessibilityLayoutChangedNotification 알림이 전달됩니다
