[iOS] UICollectionView에 대해서 알아보기 1편

UICollectionView에 대해서 알아보기 1편

 

이 문서를 작성하는 이유는 개인적으로 TableView보다 CollectionView가 범용성이 더 좋다고 생각하고 있습니다.

테이블 뷰를 컬렉션 뷰로 변환해야할 때 드는 비용을 생각했을 때, 그냥 컬렉션 뷰로 만드는게 더 낫다고 판단했습니다.

그리고 무엇보다도,, 이 문서를 정리하는 가장 큰 이유는 MVVM패턴을 기본으로 개발을 진행했지만, Cell은 늘상 MVC로 작업해 왔습니다.(그 이유는 아마도, Cell에 많은 정보가 담겨본 적이 없었기 때문)

ReactorKit을 공부하면서 Cell왜 굳이 Reactor가 필요한가 싶었는데, RxTodo하면서 보니까 필요하더군요!

아무튼 컬렉션뷰를 처음부터 잘 정리해 봅시다!!

 

(목표)

- UICollectionViewCell 프로그래밍 기반으로 작성

- UICollectionViewCell 안에 위치한 아이템에 대한 특정 이벤트 처리

- UICollectionViewCell 서로 다른 섹션 및 서로 다른 셀

- UICollectionView self resizing cell 구현

- UICollectionViewCell 페이지 네이션

- UICollectionView에 RxSwift + RxDataSource 적용

- 다양한 메소드 연습

 

✅ 해당 문서를 기반으로 UICollectionView에 대해서 공부합니다.

https://developer.apple.com/documentation/uikit/uicollectionview

Apple Developer Documentation

음,, 파란색으로 태그된 걸 보니 모르는게 많이 보이군!

 

차근차근 정리해보도록 하죠!

 

 

컬렉션 뷰의 꽃은 역시나 레이아웃이라고 생각하는데, 모르는게 많은걸 보니 공부해야할 것들이 많군요!

컬렉션 뷰의 꽃

 

문서를 읽어보니까 아래 문서를 보라고 한다.

 

https://developer.apple.com/documentation/uikit/uicollectionview/1618047-collectionviewlayout

Apple Developer Documentation

 

위의 문서에 들어가면 딱 이렇게 뜨는데 살펴보도록 하자.

레이아웃과 관련한 문서

 

위의 문서를 보니 레이아웃과 관련한 몇가지 메소드가 있습니다. 

여기 메소드들을 사용해 본 적이 없네요.

포스팅을 이어가면서 적어보도록 하겠습니다.

 

 

셀은 그럼 언제 준비하는 걸까요?

셀을 미리 준비한다고 하네요!

네트워크와 같은 헤비한 작업의 경우에는 셀을 미리 준비해도 부드러운 환경을 제공하지 않을 수 있습니다.

 

https://developer.apple.com/documentation/uikit/uicollectionviewdatasourceprefetching

Apple Developer Documentation

위의 공식문서를 들어가면 UICollectionViewDataSourcePrefetching이 있고 이는 프로토콜입니다.

 

 

cellForItemAt이 호출되기 전에 불림

위의 설명은 크게 어렵지가 않네요.

프로그래밍 기반으로 Cell을 만드는 경우, Cell이 해당 프로토콜을 채택합니다.

그리고 collectionView(_ prefetchItemsAt: )을 구현하여서 여기서 셀에 필요한 데이터 중 비동기에 해당하는 부분을 작성합니다.

그리고 collectionView(_: cellForItems: )에서 prefetched된 데이터를 사용하여 작성합니다.

 - 저도 직접 사용해 본 적이 없어서 아마도 prefetchItem을 어딘가 저장할 배열이 필요하지 않을까 싶네요. 그래야 prefetced된 데이터를 꺼내 쓸 수 있지 않을까요?

더이상 필요하지 않으면 coolectionView(_: cancelPrefetchingForItemsAt: )을 호출합니다.

 - 이것도 사용해 본 적이 없어서 아마 컬렉션 뷰에 데이터를 더이상 로드할 필요가 없을 때, 해당 메소드를 트리거 할 수 있도록 만들면 될 것 같습니다. 

 

NOTE: - 모든 셀에 대해서 반드시 호출되는 것은 아니라고 하네요!

 

모든 셀에서 반드시 호출되지 않는 경우에 대한 설명

3가지 케이스가 존재합니다.

 - 데이터 prefetch 요청을 통해 데이터 로드가 끝났고, 디스플레이에 보여줄 준비 완료

 - 현재 prefetced 진행중이라 아직 사용할 수 없음

 - 아직 요청도 안함.

 

이 개념을 이해하기 위해선 Operation에 대한 개념을 또 알아야 하네요!

꼬리에 꼬리를 무는 공부 정말 흥미롭습니다!! 

 

https://developer.apple.com/documentation/foundation/operation

Apple Developer Documentation

 

Operation은 클래스입니다.

An abstract class that represents the code and data associated with a single task.

 

내꺼인듯 내꺼아닌 내꺼같은 Operation

아직 제대로 사용해 본 적은 없어서 여기에 적지는 않겠습니다.

그런데 말입니다... 수업 중에 가장 좋아하던 수업이 운영체제였는데, 운영체제에서 보았던 프로세스 상태 및 스케줄일에 대한 개념과 닮아 있는 것 같아서 읽는 것 만들로도 신기하네요!! 

따로 주제를 잡아서 포스팅을 해보겠습니다.

 - 개인적으로 채팅이나 금융 등에서 유용하게 중요하게 사용될 것 같네요!

 

 

다시 컬렉션 뷰로 돌아가 봅시다!

 

리오더,, ㄴㅏㅅ 렌더,, 습관적으로 영어를 잘못 읽습니다 ㅠㅠ 

아무튼 사호작용을 기반으로 아이템을 뷰에서 움직이는 등의 작업에 대한 내용입니다.

아이템(셀)을 옮겨 봅시다!

아이템이 사용자와 상호작용이 시작하면 위의 나와있는 메소드 순서대로 진행된다고 하네요!

주목할 점으로는 상호작용이 끝나는 즉시, 컬렉션 뷰가 업데이트 된다고 합니다.

 - 하나 궁금한게 이건 과연 reload인가 아니면 UICollectionViewDiffableDataSource에서 사용하는 방식인가? 궁금하네요!

    차근차근 알아보죠!

 

 

인터페이스 빌더 속성에 대해서 알아볼까요?

주요 내용만 빼서 정리해보아요!

아이템의 경우에는 셀이 최소 하나 이상이어야 하며, 다른 유형의 컨텐츠 표시 혹은 같은 유형의 컨텐츠 표시를 위해 여러 셀을 가질 수 있습니다.

레이아웃의 경우에는 UICollectipnViewFlowLayout에 정의된 레이아웃을 사용하며 커스텀하게 만드려면 UICollectionViewLayout으로 만든 레이아웃 서브 클래스를 지정해주어야 합니다. 

(이게 무슨 말이냐면 Cell도 커스텀하게 만들때 UICollectionViewCell 상속받아서 만드는 것과 동일한 말)

 

 

바로 이거!! 베타지만 제일 궁금했다!!

iOS 16이상이니까,, 사실상 의미가,,, 아,,, 롸이ㅣㅣ...

 

 

https://developer.apple.com/videos/play/wwdc2022/10068/

What's new in UIKit - WWDC22 - Videos - Apple Developer

 

 

 

 

✅ 1편을 마무리하며..

공식문서에는 대부분의 해답이 있습니다.

더 잘하는 개발자로 성장하기 위해서는 기본기가 더욱 중요함을 점점 더 느끼고 있습니다.

화려한 기술들보다 다시금 기본에 집중해 봅시다!

 

2편 부터는 코드로 진행

 

여지껏 이것도 몰랐다니..! ㅜ

아이템만 로드할 수 있네요,, reloadData 맨날 썼는데,,

Diffable이랑 비교해보자