1 of 24

2 of 24

우당탕탕 페이지 편집 화면

​

3 of 24

우당탕탕 페이지 편집 화면

4 of 24

우당탕탕 페이지 편집 화면

​

5 of 24

하나의 컬렉션 뷰를 상태에 따라 다양한 형태로 보여주기

콜렉션뷰의 direction, paging 여부

셀/헤더의 크기가 달라져야한다.

6 of 24

7 of 24

헤더가 상태에 따라 다른 모습, 다른 역할을 수행.

8 of 24

9 of 24

10 of 24

기기의 중력을 이용한 애니메이션 구현하기

11 of 24

기기의 중력을 이용한 애니메이션 구현하기

<준비물🔥>

  1. UIDynamicAnimator

2. CMDeviceMotion & UIGravityBehavior

3. UICollisionBehavior

12 of 24

UIDynamicAnimator

레퍼런스 뷰를 기준으로

물리적 요소와 관련된 애니메이션을 제공

​

animator에 behavior를 추가해 어떤 물리적 요소를 추적할지 설정 가능

13 of 24

CMDeviceMotion

UIGravityBehavior

  • CoreMotion
  • 기기의 위치와 방향 변화를 관찰
  • gravity 프로퍼티를 통해 현재 기기의 중력값을 받을 수 있음
  • 각 아이템에 중력을 추가

14 of 24

UICollisionBehavior

  • 각 아이템에 boundary를 추가

15 of 24

애니메이션에 좀 더 디테일을 주고 싶다면..?

-> UIDynamicItemBehavior

  • 각 아이템에 boundary를 추가

16 of 24

DynamicAnimator에 지금까지 만든 behavior들 추가하기!

17 of 24

결과물

But… Collision을 가진 스티커들이 뭉쳐있을 때

스티커가 밖으로 튕겨나가는 이슈 존재.. 🤦🏻‍♀️

18 of 24

Carousel 스크롤 구현하기

19 of 24

Carousel 스크롤 구현하기

CollectionView에 isPagingEnabled를 사용하면�원하는 아이템이 중앙에 정렬되지 않는다!

Page1

Page2

Page3

Page1

Page2

Page3

20 of 24

Carousel 스크롤 구현하기

UICollectionViewDelegate는 UIScrollViewDelegate를 채택하고 있어서 scrollViewWillEndDragging을 구현할 수 있다!!

21 of 24

Carousel 스크롤 구현하기

scrollViewWillEndDragging에서는 스크롤중인 뷰와 드래그가 끝나는 시점의 속도(velocitiy)를 통해 스크롤이 멈출거라 예상되는 Offset을 조절해줄 수 있다.

22 of 24

Carousel 스크롤 구현하기

ContentOffset

View Bound Width

Item Interval

Left Content Inset

23 of 24

Carousel 스크롤 구현하기

ContentOffset

드래그가 끝나는 시점의 ContentOffset과�아이템의 너비를 구해 CurrentIndex를 구한다.

24 of 24

Carousel 스크롤 구현하기

ContentOffset

CurrentIndex가 보여질 Point를 계산해준다!