[WWDC 2020] Lists in UICollectionView

안녕하세요 Pingu입니다.🐧

 

오늘은 WWDC 2020의 Lists in UICollectionView라는 영상을 보고 정리한 글을 써보려고 합니다.

 

iOS 14부터 이걸 사용할 수 있는데 마침 이 기능을 사용할 일이 있어서 공부를 하게 되었네요. 영상을 보고 느낀 점을 매우 간략하게 요약하면 "우리가 테이블뷰 기능을 컬렉션뷰에서도 쓸 수 있게 만들었다!"입니다.

 

Lists in UICollectionView

요게 이제 컬렉션 뷰 설정에 대한 간략한 아키텍처라고 하는데 이번 영상에서는 오른쪽 위에 있는 "List Cell", "View Configuaration"에 대해서 알아본다고 합니다.

 

위 그림을 전체적으로 공부하고 싶다면 아래 영상을 보라고 하네용

• Advances in Collection View

뭐 어쨌든 이번 영상에서는 "List Cell", "View Configuaration" 얘네 둘만 집중적으로 다룬다고 합니다.

 

UICollectionView의 List가 뭐죠?

위 목록이 이번 영상에서 알아보는 CollectionView에서의 List를 요약한 것입니다.

 

간단히 보자면, iOS 14부터 UICollectionView도 UITableView처럼 사용할 수 있게 됐는데, 애플은 이걸 iOS 13에 만들어둔 Compositional Layout을 활용해서 구현했다고 하네요. 또한 커스텀이 자유롭다고 합니다.

 

여기서 제일 좋았던 건 "Optimized self sizing"인데, 원래 컬렉션뷰는 높이 계산을 늘 해줘야 해서 약간 귀찮은..적도 있었는데 이걸 auto layout 기능을 통해 컬렉션뷰가 알아서 처리해 주는 기능도 있다고 합니다. 만약 직접 높이를 계산해줘야 한다고 한다면 preferredLayoutAttributesFittingAttributes 메서드를 override 해서 사용하면 된다고 하네요.

 

그리고 List를 사용하면 이렇게 자유롭게 커스터마이징 할 수 있다고 자랑합니다.

 

UICollectionView List의 Components

아까와 같이 아주 좋은 List는 어떻게 구성되어 있을지 알아보겠습니다.

 

• UICollectionLayoutListConfiguration
  • iOS14에 새로 추가된 타입으로 컬렉션뷰에서 list를 만들 때 레이아웃을 담당하는 녀석이라고 보면 됩니다.
  • 얘는 위 그림에서 그 아래에 있는 iOS13에 추가된 NSCollectionLayoutSection, UICollectionViewCompositionalLayout을 기반으로 만들어졌다고 합니다.

이번 영상에서는 UICollectionLayoutListConfiguration만 자세히 알아볼 건데요, NSCollectionLayoutSection, UICollectionViewCompositionalLayout를 잘 모른다면 아래 영상을 보는 게 좋다고 합니다. (저는 잘 모르니 나중에 봐야겠네요🥲)

• Advances in Collection View Layout

List Configuration

그럼 UICollectionLayoutListConfiguration을 자세히 알아보겠습니다.

 

UICollectionLayoutListConfiguration은 위와 같이 4가지로 나눌 수 있는데요 하나씩 볼게요

 

Appearance

테이블뷰에 있던 스타일인 plain, grouped, inset-grouped를 아시나요? 이런 애들이 컬렉션뷰에서도 사용가능하다고 합니다. 또한 두 개의 새로운 스타일이 있는데 sidebar, sidebar plain라고 합니다. 이걸 사용하면 위 그림처럼 멋진 iPad 앱을 만들 수 있다고 해요.

 

그럼 간단히 appearance를 사용하는 방법을 보겠습니다.

list를 만드는 가장 쉬운 방법은 위와 같이 UICollectionLayoutListConfiguration를 appearane 값으로 만드는 방법입니다.

그리고 난 뒤 이렇게 만들어진 configuration으로 UICollectionViewCompositionalLayout를 만들면 됩니다.

 

여기까지는 테이블뷰와 큰 차이가 없는데 per-section setup이라고 불리는 기능이 추가로 있다고 합니다.

per-section setup을 사용할 땐 UICollectionLayoutListConfiguration은 그대로 사용하지만 위 코드와 같이 UICollectionViewCompositionalLayout 대신 NSCollectionLayoutSection을 사용한다고 합니다.

 

이렇게 하면 이제 섹션별로 레이아웃을 정의할 수 있다고 해요.

 

예를 들어 위와 같이 sectionIndex가 0일 땐 아까 언급된 iOS 13에 추가된 기능인 Compositional Layouy API를 활용해서 다른 레이아웃을 반환할 수 있는 거죠!

 

Headers and Footers

그럼 다음으론 Header, Footer에 대해 알아볼게요.

 

UITableView와 다르게 UICollectionView에서는 Header, Footer를 명시적으로 활성화해줘야 하는데 여기엔 두 가지 방법이 있다고 합니다.

 

첫 번째 방법은 위와 같이 supplementary 뷰를 등록해서 사용하는 거죠.

 

이렇게 사용할 때 유의할 점은 headerMode에 nil을 주면 assert 된다는 것입니다. 그러니 위와 같이 none을 주도록 해야 한다고 하네요.

 

그런데 이건 뭐 기존이랑 비슷한 방식이니.. 별 거 없어서 두 번째 방법이 기대됐는데..

헤더에만 사용할 수 있는 방법으로 섹션의 첫 번째 셀을 헤더로 사용하는 방법이라고 합니다. 근데 이걸 firstItemInSection이라는 타입을 따로 줬네요. 가끔 꼼수로 이용해 먹던 방법이긴 한데 이게 아예 이렇게 기능으로 나오다니... 더 편하게 사용할 수 있겠어요

 

그런데 이렇게 사용하는 건 계층적 데이터 구조와 새로운 section-snapshot api를 사용할 때 추천한다고 하네요. 이게 어떻게 작동하는지는 Advances in Diffable Data Source 라는 영상을 참고하라고 합니다.

 

List Cell

그래서 지금까지 이것들을 기존 UICollectionViewCell로 쓰느냐? 하면 그건 아니고 UICollectionViewListCell이란걸 만들어뒀다고 합니다.

 

ListCell은 아래와 같은 작업을 할 때 유용합니다.

• Separators
• Indentation
• Swipe Actions
• Accessories
• Default Content Configurations

이거에 대해 자세히 알아보려면 또 영상을 보라고 합니다. 

• Modern cell configuration

그럼 ListCell이 제공하는 기능들을 하나씩 살펴보도록 해보겠습니당

Separators

위에 나온 UI가 올바르지 않은 UI라고 합니다. 왜지..?

애플의 주장은 separator가 셀의 기본 콘텐츠와 정렬되어야 하는데 위 UI에서는 기본 콘텐츠가 Label이라는 겁니다.

뭐 그래가지고 이렇게 Separator를 Label에 정렬되도록 바꾸는 게 좋다고 합니다.

이걸 TableView에서는 separator inset이라는 값으로 제공했다고 하네요.

그런데 이제 위 화면처럼 safe area, layout margin도 있고 폰트 사이즈나 이미지도 동적 사이즈로 사용하는 곳에서는 레이블의 크기가 달라질 수 있는데요, 따라서 레이블의 끝부분을 미리 알고 거기에 정렬하기엔 기존 기능이 적합하지 않다고 합니다.

 

그래서 separator layout guide라는 개념을 도입했다고 합니다.

이제 셀의 레이아웃을 구성한 뒤 separtor의 시작점을 위와 같이 직접 처리해 주면 된다고 합니다. 간단하네요!

 

Swipe Actions

제가 ListCell을 사용해 보려는 이유인 Swipe Action입니다.

이거는 원래 TableView에서 제공하던 기능이었는데 이제 ListCell에도 제공된다고 해요.

 

TableView에서와 마찬가지로 leading, trailing에 스와이프 액션을 줄 수가 있고 당연하게도 설정해 둔 섹션의 셀에만 동작한다고 합니다.

그래서 위와 같이 코드를 작성하면 스와이프 액션을 만들어서 사용할 수 있다고 합니다.

 

애플은 위와 같이 스와이프 액션에 indexPath를 캡처하지 말라고 하는데요, 셀을 삽입, 삭제 등의 동작이 있는 경우 해당 값이 상수가 아니기 때문이라고 합니다.

그래서 대신 위와 같이 identifier를 사용하는 게 좋다고 합니다.

 

그런데 만약 삽입, 삭제와 같은 작업이 없어서 indexPath가 변하지 않는 상황이라면.. 사용해도 되지 않을까 싶기도 합니다.

 

Accessories

다음은 accessories입니다. 이거도 UITableView에 있던 건데, 기존에는 trailing side에만 있었죠.

그래서 ListCell에서는 이걸 개선해서 Leading, Trailing 모두 accessory가 있을 수 있고 심지어 각 부분마다 여러 개의 accessory도 있을 수 있다고 합니다.

 

기존 TableView에서는 accessory가 그냥 데코레이션 뷰와 같은 느낌이었다면 ListCell에서는 기능을 활성화할 수 있다고 하네요.

 

예를 들어 위에 나와있는 Reorder accessory로 셀을 구성한 뒤 사용자가 이걸 누르면 컬렉션 뷰가 알아서 reordering mode가 된다고 합니다.

 

자동으로 뭔갈 처리해 주는 느낌이네요.

 

이거도 잘 사용하려면  Advances in Diffable Data Source 이 영상을 보라고 합니다.

 

그래서 이걸 어떻게 사용하느냐 하면 위와 같이 cell의 accessories 프로퍼티를 활용하여 아주 간단하게 사용할 수 있다고 합니다.

 

아주 재밌는 점은 disclosureIndicator는 leading accessory이고 delete는 trailing accessory라는 걸 시스템이 알고 있어서 자동으로 배치해 준다고 해요.

 

그러니까 원하는 대로 그냥 막 갖다 넣으면 알아서 배치해주나 봅니다 ㅎㅎ

물론 이 모든 걸 커스터마이징 할 수도 있다고 해요.

 

위와 같이 편집 상황이 아닐 때만 보이게 해달라고 하는 거 같이 커스터마이징도 아주 쉽게 할 수 있을 거 같네요.

 

여기까지가 영상에서 ListCell을 소개하는 부분이었습니다.

원래도 거의 안 쓰긴 했는데 이제 TableView는 정말 쓰지 않아도 되겠어요.

 

영상에서 보라고 한 영상들을 모두 안 봐도 간단히 사용할 수 있을 만큼 직관적으로 만들어진 거 같아 좋은 거 같습니다.

 

도움이 되셨길 바라며,, 감사합니다.