DiffableDataSource + SkeletonView 라이브러리 적용하기

 

SkeletionView를 적용하는 방법은 아래 링크를 통해서 확인 가능합니다.

https://github.com/Juanpe/SkeletonView

GitHub - Juanpe/SkeletonView: ☠️ An elegant way to show users that something is happening and also prepare them to which con

 

내가 원하는건 DiffableDataSource인데 어떻게 적용하지?

 

 

그렇게 해서 현재 앱 출시한 프로젝트에서 DiffableDataSource와 SkeletonView를 적용해보기로 했습니다. 

View 전체에 적용하지는 못했고... Cell에만 적용해봤습니다. ( 어떻게 해야할지... ) 

 

 

1. 첫번째 방법  - 메서드 활용

 

Cell에만 적용할 것이기 때문에 Cell 에 import SkeletionView를 해주었고 공식문서에 나온대로 해당 View에

isSkeletonable을 true로 설정했습니다.

 

 

또한 Cell이 그려지기 전에 애니메이션을 적용하고 Cell이 그려졌을때는 애니메이션이 끝내는 코드를 작성했습니다.

 

 

ViewController에서 데이터를 전달해줍니다.

 

 

빌드를 해서 보면  SkeletonView가 적용하는 모습을 볼 수 있습니다.

 

 

2. 두번째 방법 - didSet 활용

 

Cell에 데이터가 전달되면 실시간으로 SkeletionView를 볼 수 있도록 코드를 개선해보았습니다.

현재는 configureUI 메서드로 데이터를 넘기고 있습니다. 실시간으로 반응을 할 수 있도록 didSet을 사용했습니다.

 

그래서 Cell에 data: ExampleModel? 변수를 만들어주고 didSet으로 configureUI 메서드를 호출했습니다 

 

 

개선된 코드를 보겠습니다.

 

 

보여지는 Cell 부분에서 개선된 코드 

 

ViewController에서 개선된 코드 

 

 

빌드된 것을 보겠습니다. 

 

 

 

 

 

현재 적용된 코드에서 가장 중요한 부분이 있습니다

Skeleton이 적용되는 시점을  데이터가 전달 될 때  먼저 적용을 해주는 겁니다 .

 

그 후 일정한 시간이 지난 후 hideSkeletion을 시켜줍니다.