[WWDC19] Advances in Collection View Layout - Part 1

Advances in Collection View Layout - WWDC19 - Videos - Apple Developer

👋 WWDC19 - Advances in Collection View Layout

Current State-of-the-Art

• UICollectionView 는 iOS 6 에서 처음 소개되었다.
• 데이터를 렌더링하는 클래스와 CollectionView 의 layout 을 관리하는 두개의 클래스가 필요했다.
• CollectionView layout 은 추상화된 타입이고, 서브클래스를 만들어 사용해야 한다.
• 서브 클래스인 CollectionView flow layout 을 iOS 6부터 같이 사용했다.

• CollectionView layout 은 라인 기반의 레이아웃을 만드는데 적합했지만, 요즘의 앱들은 레이아웃이 점점 복잡해지고 있다.
• iOS 13 에서 새롭게 나온 앱스토어의 UI 🤔?!

복잡한 화면에 대해 custom layout class 를 만든다면 고려해야할 점이 많다.

• Boilerplate code 도 많이 생성되고,
• 해당 디자인이 퍼포먼스 이슈가 있는지 체크도 해야하고
• 헤더 푸터 등 Supplementary view, decoration view (배경?) 을 레이아웃으로 설정하기는 까다롭다.
• 셀프 사이징도 처리해야할게 많다 😓
• 그리하여..! 레이아웃을 만드는 클래스를 새롭게 가져왔고, Compositional Layout 이라고 부르기로 했다.

🌟 What is compositional layout?

컴포지셔널 레이아웃의 세가지 기조는 Composable, Flexible, Fast (구성 가능한, 유연한, 빠른) 이다.

• 유연하게 설계되어 있기에 compositional layout 으로 모든 레이아웃을 작성할 수 있을것이다.
• 프레임워크에서 성능에 대한 최적화를 제공하기 때문에 기본적으로 빠르다.
• compositional layout 는 설명하거나 정의하는 식으로 원하는 작업을 작성하는 선언형 API 의 일종이다.

👋 Hello world compositional layout

• layout 은 section 으로 구성되어 있고,
• section 은 group 으로 구성되어 있고,
• group 은 size 를 필요로 하며 item 들로 구성되어 있고,
• item 은 size 를 필요로 한다.

NSCollectionLayoutSize

• 사이즈는 너비와 높이를 갖는다.

• 너비와 높이는 NSCollectionLayoutDimension 으로 되어있다.
  • fractionalHeight, fractionalWidth : containing group (row) 을 기준으로 비율에 따라 정의할 수 있다.
  • absolute : 절대적인 point 값
  • estimated : 예측되는 point 값, 해당 값보다 커질 수 있다.

NSCollectionLayoutItem

• 아이템은 기존의 cell 이나 supplementary view 와 같다.
• 생성시에 Size 를 넘겨주면 된다.

NSCollectionLayoutGroup

• 그룹은 레이아웃의 기본 단위이고, 가로, 세로, 커스텀 세가지 형태가 있다.
• 아이템들이 가로 세로 축을 따라 그려지지 않는 경우 커스텀 형태를 사용해서 특정 좌표와 위치를 지정하면 된다.

NSCollectionLayoutSection

• CollectionView 의 기존 섹션과 동일하고, 섹션에 나타낼 데이터는 데이터 소스에 매핑된다.

UICollectionViewCompositionalLayout

• iOS 의 경우에는 UICollectionViewCompositionalLayout 이 최상위 레이아웃 클래스가 된다.
• Mac 에서의 레이아웃 클래스는 다른데 사소한 차이점들이 있다.
• sectionProvider 가 있어 클로저를 통해 섹션마다 레이아웃을 다르게 설정할 수 있다.

Demo 😇

• 모든 코드는 동일하게 “Item - Group - Section - Layout” 인 4가지의 계층 구조로 되어있다.
• Item 의 크기를 실제로 결정하는건 group 의 크기이다. 1줄짜리에서는 큰의미가 없어보일 수 있지만, group size 로 레이아웃을 다양하게 배치한다.
  첫번째 예제는 groupSize 가 100% 로, height 는 absolute 44 로 되어있음
• 디바이스 회전을 가로, 세로로 했을 때 동일한 높이를 가짐

GridViewController

두번째 예제는 가로기준 5개씩 들어가는 정사각형 아이템

• group size 의 width 기준은 row 한 줄을 의미하기에 100% 로 설정하면 가로 전체로 설정된다. height 는 row 에 대한 20% 로 설정되어있다.
• item size 에서 설정하는 width 는 하나의 group 또는 row 를 기준으로한다. width 는 groupSize 의 20% 이기에 하나의 row 에 5개의 아이템이 들어갈 수 있다.

InsetItemsGridViewController

두번째 예제에서 item 간 간격을 두고 싶다면

• item 에 inset 을 추가하려면 item.contentInsets = NSDirectionEdgeInsets(...) 한줄의 코드면 가능하다

TwoColumnViewController

세번째 예제는 two column grid example

• NSCollectionLayoutGroup.horizontal 을 이용해서 column 을 2개로 만들었다.
  • 1 개의 row 에 2개의 group 을 넣는다는 뜻 ?!
  • item 의 최대 width 는 group width 와 동일해진다.
• group 과 section 에 대한 간격 설정
  • group 의 spacing 은 interItemSpacing 을 사용하면 된다.
  • section 에 대해서도 contentInsets 을 추가할 수 있다.

DistinctSectionsViewController

네번째 예제는 섹션마다 레이아웃이 다른 형태이다.

• 첫번째 섹션 : 1 column, 리스트 형태
• 두번째 섹션 : 5 column, 정사각형 아이템
• 세번째 섹션 : 3 column, 직사각형 아이템

createLayout 메소드를 보면 UICollectionViewCompositionalLayout 생성자에서 sectionProvider 클로저를 넘기는 부분이 다르다.

• 클로저의 매개변수 sectionIndex : 0, 1, 2 / layoutEnvironment : 레이아웃 환경
• layoutEnvironment 에서 설정해둔 columns 개수를 group 생성시 count 인자로 전달한다.
• item, group, section 을 설정하는 부분은 기존 코드들과 전부 동일하다.

AdaptiveSectionsViewController

가로로 회전할때에 아이템 개수가 나타나는게 세로와 다른 건 어떻게 했을까요 😇

• 이전 예제와 다른점은 SectionLayoutKind 에서 width 에 따라 column 개수를 조정해주고 있다.

👻 다음 이시간에는

• 아직 item 에 대해서만 살펴보았기에 supplementary view (헤더, 푸터), decoration view (배경?)에 대해서는 알아볼 예정 !
• Steve 를 다시 초대합니다