위와 같은 Layout 을 구성해야할 때 어떤 방식을 사용해야 할까요?
단순하게 한 열에 두 개의 아이템이 있으므로, UICollectionView 를 기반으로 하고
이미지 크기 만큼 셀 사이즈를 지정하면 되지 않을까 생각했습니다.
min cell-spacing 과 line-spacing 을 0으로 주어도 이상하게
셀 사이에 공백이 발생하고, 생각대로 동작하지 않게 됩니다.
CollectionViewFlowLayout
위와 같은 문제점이 발생하는 이유를 알기 위해서는 먼저 Flow Layout 의 동작 방식을 이해해야 합니다.
CollectionView 에 기본적으로 사용되는 CollectionViewFlowLayout 은
특정 Line 에 따라서 Cell 을 배치하게 됩니다.
선을 따라서 Cell 을 지정하다가, 공간이 부족하면 새로운 Line 을 추가하여 다시 Layout 을
그리게 됩니다. 위 처럼 Cell 크기가 모두 일정할 경우에는 문제없이 동작하게 됩니다.
하지만 ItemForSize 를 통해 각 Cell 마다 다른 크기를 지정했을 때 문제점이 발생합니다.
Line 에 따라 셀을 배치하기 때문에 가장 큰 Cell 을 기준으로 다른 Cell 이 중앙 정렬을
하게 되기 때문에 사진과 같이 제어할 수 없는 공백들이 생기게 됩니다.
Custom CollectionViewFlowLayout
Pinterest 같은 UI 는 Flow Layout 으로 구현하기에 큰 어려움이 있습니다.
이런 경우에는 Flow Layout 을 서브 클래싱하는 별도의 Custom Layout 구현해야 합니다.
위와 같은 항목들을 구현하면 셀의 크기와 위치를 직접 지정할 수 있게 됩니다.
먼저 Custom Layout 에서 각 이미지 높이를 알 수 있도록 Delegate 를 지정해야 합니다.
Protocol 로 구현 사항을 지정하고, ViewController 에서 Extension 을 통해 필요한 메서드를 작성합니다.
그런 다음 CollectionViewFlowLayout 를 서브 클래싱하는 클래스 파일을 생성하고,
1 번 항목을 구현합니다. 콘텐츠 사이즈 값들은 자주 사용되기 때문에 Class 프로퍼티로 작성하였습니다.
다음으로 2번 항목을 구현합니다. prepare 메서드가 이번 레이아웃 구현에 핵심입니다.
위치와 크기를 계산하고, cache 에 추가합니다. 그리고 다시 계산될 필요가 없도록, guard 구문으로
cache 가 있을 때에는 return 해줍니다.
그리고 계산한 cache 를 전달하는 3, 4번 항목을 구현하면 코드 작성은 끝나게 됩니다.
전체 코드: gist.github.com/heoblitz/3e634f38dac23b7f3fdb9051f599f3fe
참고 한 내용들 :
UICollectionView를 이용한 LINE iOS 대화방 리팩토링 - 1 - LINE ENGINEERING
LINE의 대화방 화면은 사용자가 가장 많이 사용하는 화면 중 하나이며 새로운 기능이 계속 추가되고 있습니다. 그에 따라 코드가 점점 복잡해지면서 최근에 리팩토링을 진행했고, 그 과정에서 UIC
engineering.linecorp.com
UICollectionView Custom Layout Tutorial: Pinterest
Build a UICollectionView custom layout inspired by the Pinterest app, and learn how to cache attributes and dynamically size cells.
www.raywenderlich.com