[iOS] UICollectionView 공식문서 톺아보기

# UICollectionView: UIScrollView

• 앱의 주요 작업은 CollectionView와 연결된 data를 관리하는것

[개요]

• 컬렉션 뷰는 컬렉션 뷰의 dataSource 프로퍼티에 저장된 데이터 소스 개체에서 데이터 정보를 가져옴 UICollectionViewDiffableDataSource
• 컬렉션 뷰는 데이터 및 UI 업데이트를 간단하고 효율적으로 관리하는데 필요한 동작을 제공해줌
• UICollectionViewDiffableDataSource이 프로토콜을 채택해서 커스텀하여 사용할 수도 있음
• 컬렉션 뷰의 데이터는 프레젠테이션을 위해 섹션으로 그룹화할 수 있는 개별 item으로 구성됨(단일)
• item은 표시하려는 데이터의 가장작은 단위임(tableView의 cell처럼), 단일이미지가 될 수 도 있음
• 컬렉션뷰는 데이터 소스가 구성하고 제공하는 UICollectionViewCell 클래스의 인스턴스인 셀을 사용해 화면에 item을 표시함

• UICollectionViewDiffableDataSource 개체는 프로세스를 자동으로 관리한다.
• UICollectionView 의메서드를 사용해 해당 셀을 삽입, 삭제 및 재정렬한다.
• 컬렉션뷰로 항목을 관리할 수도 있지만 이동작의 경우 컬렉션뷰와 연결된 Delegate와 함께 작동한다.

Layout (UICollectionViewLayout하위 클래스임)

• 켈력선 뷰의 모든 셀과 보조 뷰의 구성과 위치를 정의함

[특징]

• 레이아웃 객체는 위치를 정의하지, 해당정보를 해당뷰에 적용하지는 않는다. 그럼누가하는데 ?

컬렉션뷰가 적용함 이유는 셀 및 보조 뷰를 생성하는데 컬렉션뷰와 데이터 소스개체간의 조정이 포함되기떄문이다. 레이아웃개체는 item의 data대신 시각적인 정보를 제공한다는 점을 제외하면 다른 데이터소스와 비슷하다.

• 컬렉션뷰의 레이아웃을 동적으로 변경할 수도 있음
• 레이아웃 객체는 collectionViewLayout 프로퍼티에 저장이된다. 이를 설정하면 변경사항에 애니메이션을 적용하지않고 레이아웃이 즉시 업데이트된다.
• 애니메이션 효과를 적용하려면 setCollectionViewLayout(_:animated:completion:) 메서드를 사용하면 됨
• 제스쳐 인식기 또는 터치이벤트에 의해 구동되는 대화형 전환을 만들려면 startInteractiveTransition(to:completion:) 이 메서드를 사용하면됨

이메서드는 전환 진행 상황을 추적하기위해 제스처 인식기 또는 이벤트처리 코드가 작동하는 중간 레이아웃 개체를 설치한다.

• 이벤트 처리 코드에서 전환이 완료되었따고 판단되면 finishInteractiveTransition() 또는 cancelInteractiveTransition() 이메서드를 호출해 중간 레이아웃 객체를 제거하고 의도한 대상 레이아웃 객체를 설치한다.

레이아웃에관하여 더 자세한 사항의 문서

Cells and Supplementary Views

• CollectionViewDataSource는 item에 대한 Content와/ 해당 Content를 표시하는데 사용되는 view를 모두 제공한다.
• 컬렉션뷰는 콘텐츠를 처음 로드할때 DataSource에 표시되는 각 item에 대한 view를 제공하도록 요청한다.
• 데이터 소스가 재사용을 위해 표시한 view개체 list 또는 queue을 유지관리한다.
• 코드에서 명시적으로 새 view를 만드는 대신 항상 view를 queue에서 빼내는데 이 방법은 두가지가 존재한다.

1. dequeueReusableCell(withReuseIdentifier:for:) 컬렉션 뷰에서 item에 대한 cell을 가져올때 사용함
2. dequeueReusableSupplementaryView(ofKind:withReuseIdentifier:for:) layout개체에서 요청한 추가 view를 가져올때 사용함

위와 메서드를 호출하기이전에 해당 View가 아직 없는 경우에는 해당View를 만드는 방법을 컬렉션뷰에 알려야한다.
이를 위해선 컬렉션 뷰에 class 또는 nib파일을 등록해야한다.
예로 셀을 등록할떄 register메서드를 하용해 클래스르 등록하거나 nib파일을 등록한다.

# Data Prefetching

Pre-fetch라는 기술이란?

• cell이 표시되기전에 미리 dataSource를 준비할 수 있도록 하는 매커니즘이다

[Prefetching탄생 일화]

iOS의 update cycle은 60fps일때 디스플레이 제약조건을 총족하도록하여 부드러운 스크롤을 얻을 수 있다.즉, 앱이 초당 60번 UI를 고쳐야하므로 각프레임은 내용을 render하는데 16ms가 걸린다.
The system drops frams that takes too long to show content. 따라서 앱이 프레임을 건너뛰고 다음 프레임으로 이동할때 스크롤이 느려지는것이다. 그러면 UICollectionView를 사용할때, 매끄러운 동작을 위해서는 약 16.65ms안에 프레임을 그려야한다는 의미이다. 하지만 네트워킹을 통해 받아온 무거운 이미지를 각 cell에 넣는 작업을 하다가 위 속도를 지키지 못하면 프레임 드랍이 발생하고 SCrolling이 좋은 퍼포먼스를 유지하지 못할 수 있다. 그래서 Pre-fetching이라는 기술이 나온것이다.

이를 사용하는데는 두 가지 방법이 존재한다.

// cell에 프로토타입을 올려서 사용하는 방식
1. func collectionView(UIcollectionView, prefetchItemsAt: [indexPath]) //필수
// UI파일을 만들지 않고 class를 따로만들어서 UI를 그리는 방식이다.
2. func collectionView(UICollectionView, cancelPrefetchingForItemsAt: [IndexPAth])// 옵션

1번 메서드는 collectionView가 화면에 로드되고 cell을 로드할 준비가 끝나면 호출된다.

• cell을 준비하는 것이아닌 cell을 구성할 datasource를 준비할 수 있도록 하는 메서드이다.

2번 메서드는 준비된 1번에서 준비햇듯 준비된 datasource를 정리할 수 있는 옵션 메서드인데, 스크롤방향을 반대로 적용할때 바로 cancel을 하게되면 효과적으로 prefetching datasource를 활용하지 못할 수 있다. 추가로 prefetching기술을 사용하지 않으려면 isPrefetchingEnabled값을 false로 적용하면된다.

# 야곰 학습활동

• async await로 나온지 얼마안되서 시간이 걸릴것임, 고로 WWDC에 나온 기술이나 내용은 보통 2-3년뒤부터 상용화된다고 보면된다.
• xib와 nib파일이란 무엇인가 ?
  nib는(NexT Interface Builder)의 약자라고 해요. xib는(Xml Interface Builder)의 약자이다.

라떼는 스토리보드가 없었고 하나의 UI를 구성하는 파일이있었는데 그게 .xib라는 파일이다.
xib도 예전에 조상이 있었는데 그게 nib파일이고 현재는 스토리보드가 된것이다.

nib -> xib -> storyboard 이렇게 발전해왔다.

예전에 nib파일은 각각의 화면 별로 빌드를 할 수 있었고. nib이 공식문서에 나올떄는 각각의 화면별 구현체라는 뜻으로 이해하면 된다.
=> UI를 구현해놓은 xib나 nib파일을 뜻하는 구나라고 이해하면됨

• 컬렉션뷰와 tableview와 크게 다르지안흔데 다른점은 컬렉션뷰는 Layout을 다양하게 적용하여 커스텀할 수 있다. (Ex 1. 아이폰 갤러리 들어가면 일정한 크기도 있는데 각각 다르게 설정 할 수도 있다. 2. pinterest 같은 이미지.)
  커스텀하게 작성하는 부분은 HIG의 Views -> Collection에 들어가보면 다양한 예시로 볼 수 있다.
• tableView는 list구현하는대에 특화되어있어서 종종 사용이 되기도하는데 사실 collectionView가 대체할 수 있고 확장성을 고려했을때는 아무대로 collectionView가 무난하게 잘 작동하는것같다.

Referece

• https://ontheswift.tistory.com/23
• https://velog.io/@hanseop95/번역-UICollectionView-Tutorial-Prefetching-APIs
• 공문