WWDC 19 - Advances in Collection View Layout

---

• 세션보면서 정리한 내용입니다. 해석이 잘못된 경우가 있을수있으니 발견하시면 댓글로 남겨주시면 감사하겠습니다🙏🏻

---

 

 

 

https://developer.apple.com/videos/play/wwdc2019/215

Advances in Collection View Layout - WWDC 2019 - Videos - Apple Developer

 

---

관련내용

• 서브클래싱하지않는! 완전히새로운 layout system을 배워보자.

요약

• 👍Compositional Layout 을 통해 더 쉽게, 빠르게 유연하게 만들수있다.
  • item -> group -> section -> Layout으로 구성된다.
  • 👍하나의 섹션에는 하나의그룹이 여러개들어갈수있다. 그룹안에 아이템들이여러개이면서, 그룹이여러개가된다는말슴.
• 👍여러섹션인경우에는 CompositionalLayout의 provider 클로저를 이용하여분기처리한다.
• 👍직각스크롤이가능하다 .

 

 

 

---

 

Current State-of-the-Art



CustomLayout만들면서 문제점

• boilerplate code
• Self-sizing
  

 

 

 

Compositional Layout

• iOS13부터 새롭게등장한 레이아웃
• 빠르고, 유연하고, Composable하다
  



 

 

Three Core Components
Item, Group, Section



하나의레이아웃에
여러개의섹션,
섹션안에 여러개의그룹,
그룹안에 item들이있다.




 

---

우선 각 개념부터 살펴보자

1.NSCoolectionLayoutSize

• 사이즈는 width,height이며, 상수값이아닌, 타입이다. Dimension이라는 타입.!





fractional

• 외부컨테이너의 비율을 나타낸다. ( 외부컨테이너는 collectionView가된다 )
• 즉 50%



• 이것은 30%



• 그래서 25%,25%비율로나타낸다.



• 특정 포인트를 지정할수있다 .
  • 200points를 지정함!



• 또는정확히 잘모르게싿. 추정값을정하겠따.



• 그리고, 증가될수있다. 아이템을 렌더링ㅇ하면서,
  

 

 

2.NSCollectionLayoutItem

• cell또는 supplementary를 나타내는 Item이다!
  

3.NSCollectionLayoutGroup

• 각 아이템들을 어떻게 나타낼지 3가지형식이있다.
• 수평,수직, 커스텀
  

4.NSCollectionLayoutSection



5.UICollectionViewCopositionalLayout

• 마지막,
• 👍흥미로운점은 SectionProvider 클로저가있다.
  • 각섹션마다 다르게 레이아웃을 주겠다는 뜻!!



 

 

---

Demo 1
간단한 테이블뷰형식



이것은 하나의 그룹에 하나의 셀이 들어간다

• 🤔group이 horizontal인점.
  • 개념에서는 그룹마다 여러개의아ㅣ탬이들어간다했는데, 아이탬size가 1:1이니, 하나의그룹안에 한개아이탬이들어갈듯,
  • 🤔아이탬사이즈는 그룹의사이즈안에서반영하나봐? ㅇㅇㅇ
  • 그룹사이즈는 컬렉션뷰의사이즈바탕으로,



 

---

DEMO 2

항상다섯개의 사이즈를 유지하도록 하는방법




그룹은 컬렉션뷰의 width를 그대로갖고,
height는 커렉션뷰의 width20%를 갖겠다. !!

• height 20%가아니라!!
• 👍그러므로, 아이템은 width 20%를 갖으니, 1:1비율을갖게된다 !!!

그리고 그룹의아이템들은 다섯개씩 나타내고싶으니까, 그룹의 width의 20%를갖겠다.
height는 동일하게 그룹의 height를 갖겠다!



 

 

---

DEMO 3
간격있는거


👍각아이템에게 inset을 주었다!



 

 

 

---

DEMO 4

간격 나타내는 두번쨰방법 2



👍특별한점은 그룹이니셜라이저가 다르다. 특정 카운트를 넣었다.
( 기존은 subItems: [Item] 끝이였는데, )
item를 두개로넣겠다.

• 👍즉 이렇게하면, 자동적으로 재계산하게된다.
• 각 아이템들은 그룹의 사이즈를 그대로받는것이아닌, 2로나눈만큼의 크기를 얻게된다.
• 즉, 아이템width가 1:1이여도, 재계산된 그룹의 width에대해서 비율을나누게되낟.

또한,섹션의 spacing을ㅈ ㅜ었다. leading, trailing만
👍또한 아이템들간의 spcaing 을 주었다.



 

 

 

---

DEMO 5

각 섹션마다 다른 레이아웃정하기
아래는 3개의섹션



👍처음부터 CompositionalLayout 초기화할때 클로저를 넣을수있다!

• 이클로저는 👍SectionProvider이다!
• 클로저에는 sectionIndex와,
• layoutEnvironment 가있다. - 이는 참조할수이쓴 ㄴ되게유용한 프로퍼티가있다.

👍그리고 각 섹션마다 컬럼개수를 다르게하기위해, Group이니셜라이저에서 count를 동적으로 넣어주었다!




---

DEMO 6

Adaptive 한 레이아웃
* 모든 기종에 대해 대응할 수 있는 layout입니다



다 비슷하지만! columns를 만들떄, 더이상 연산프로퍼티가아닌, 메소드로바뀌었고,
👍그때 layoutEnvironment가 사용됐다!

• 레이아웃의 전반적인width,
• iOS에서는 trait collections정보가담겨있다.
  





 

 

---

Supplementary items

CollectioinView는 기본적으로 3가지뷰를 다룬다

• Cell
• Supplementary itmes
• Decoration items

그래서 Compositional layout에는 3가지로만들었다.



추가적으로 Anchor

• Anchor를 통해서 위치를 잡아준다.
  

 

 

 

---

아래와 같이 만들어보자.


Badge

 

사용방법

• fractionalOffset은 30% , Y는 -30%
• 😀SupplementaryItem을 이용한다
• 👍Item 이니셜라이저에 supplementaryItem 에 [ ] 어레이로 넣어준다
  • 이전에는 layoutSize만 넣었었음!




Header Footer는?

• 약간 다르다. - Boundary supplementary Item을 이용한다.



👍BoundarySupplementaryItem 으로 만든다.
Section에서 넣어주도록한다.




 

 

 

 

👍Decoration VIew

• 그룹핑하게해준다 ?
  
  

 

 

 

 

---

 

 

Estimated self-Sizing



헤더와 푸터에 다이나믹타입에 대응할수있다. ( 글자크기커지고작아지는거 )


Nested Layout GRoup

• LayoutItem의 subclass이다.



 



👍오홍, leading, trailing item 으로나누고,
trialing 2개로 trailinggroup만들고,
leading 과 trailigngroup을 합한, containerGRoup을 만들었다.


 

 

 

 

---

Nested CollecitonViews


• 어렵고,어렵다
  

👍하지만, compisitionalLayou에서는 한줄로가능하다. ( 박수 ㅋㅋ ) 
( orthogonal - 직각의 ,수직 )



none을 제외하고 5가지종류가있다.



continu는 계속 흐르게하고,

continuousGroupleadingBoundary는 boundary만큼 움직이게하고,

 

paging은 하나의 페이지만큼만 이동시킨다. 보여지는 페이지만큼 이동하고, 나머지페이지로이동!

 

 

 

 

App Store

 

compositional layout과 함께라면,
이제는 아래와같은뷰는 하나의 컬렉션뷰로가능하다.