[RxSwift Community] RxDataSources Animatable편

RxDataSource Github: https://github.com/RxSwiftCommunity/RxDataSources

RxSwiftCommunity/RxDataSources

*예제코드는 아래 Github에 있습니다. 참고하세요:)

https://github.com/Developer-Paul-t/RxSwift

Developer-Paul-t/RxSwift

RxDataSources는 두 가지 특별한 타입의 data source를 추가로 제공한다. 바로 자동으로 셀 애니메이션 관리를 해주는 Animated Data Sources인 RxTableViewSectionedAnimatedDataSource, RxCollectionViewSectionedAnimatedDataSource 다. 두 가지라고 하지만 사실 tableView와 collectionView 차이일 뿐이다. 아무튼 이 애니메이션이 포함된 data source를 사용하기 위해서는 몇 가지 과정이 추가로 더 필요하다. 이번 포스팅에서는 Custom Cell, header, footer까지 넣어서 충분히 활용 가능하도록 만들어보자.

 

RxDaraSources Animatable 사용법

오늘은 선생님 데이터를 만들어보자. 지난 기본편과 달라진 점이 눈에 보이는가?

RxTableViewSectionedAnimatedDataSource를 이용하기 위한 가장 첫 번째 작업은 우리가 사용할 데이터들이 각자 고유의 identity를 가지도록 하는 것이다. 이건 추가, 수정, 삭제는 물론 animation(canEditRowIndexPath와 같은)을 이용하기 위해서 반드시 각 데이터를 명확하게 구분지어야 하기 때문이다. 그래서 다음과 같이 Teacher 구조체에서 Equatable과 IdentifiableType 프로토콜을 채택했다.

 

 

Equatable은 익숙하시니, IdentifiableType 설명만 하자면, associatedtype으로 Hashable 프로토콜을 채용하는 identity 프로퍼티가 있다. 그리고 이걸 우리의 모델에서 준수해줘야 한다. 위의 예제에서는 String이 Hashable, Equatable 모두를 준수하고 있으므로 다른 추가 구현필요 없이 IdentifiableType의 모든 요구사항을 준수했다.

 

다음으로 TeacherSection을 구성해보자. 여기서 두 번째 단계가 들어가는데, 섹션에서 AnimatableSectionModelType 프로토콜을 채용하는 것이다.

 

 

이 프로토콜은 일전에 보았던 SectionModelType과 추가로 위에서 준수했던 IdentifiableType을 채용하고 있다. 그리고 제한사항으로 Item(Teacher)이 IdentifiableType과 Equatable을 준수하도록 제한한다. 이미 이건 우리가 위에서 구현했으니, TeacherSection에서만 IdentifiableType을 준수해주면 된다. 그렇게 SectionModelType과 IdentifiableType를 채용했다면, AnimatableSectionModel 작업은 끝이다. 

 

 

자 이제 우리가 만든 AnimatableSectionModel로 dataSource를 만들어보자. 필자는 이름이 너무 길어서 이름을 바꾸고 진행했다.

 

 

RxTableViewSectionedAnimatedDataSource 클래스를 보면, AnimatableSectionModelType을 제네릭 타입으로 받고 있다. 아까 우리가 만들어줬던 AnimatableSectionModel을 쏙 넣어주면 된다. 이후에는 기본편과 같이 셀을 구성해주면 되는데, 필자는 이번에 커스텀 셀을 만들어서 넣어줬다.

 

 

간단하게 커스텀 셀을 만들고 주입식으로 UI가 업데이트 되도록 구성해서,

 

 

dataSource의 configureCell 클로저 안에서 구성되도록 구현했다. 마지막으로 헤더와 푸터, Edit과 Move가 가능한 animation도 추가해보자. 

 

 

이렇게 우리가 만든 데이터소스를 이용해서 각각의 기능들을 구현할 수 있다. (footer는 귀찮아서 제외..)

 

 

참고로 dataSource에 딸려나오는 sectionModels라는 프로퍼티는 위에서 우리가 만들었던 TeacherSection에 접근할 수 있는 프로퍼티다. RxTableViewSectionedAnimatedDataSource가 TableViewSectionedDataSource라는 클래스를 상속받고 있는데, 덕분에 제네릭 타입에 넣어준 SectionModel을 sectionModels로 접근 할 수 있는 것이다.

 

 

마지막으로 더미데이터를 만들고 테이블뷰와 바인딩해주면 원하는 결과가 완성된다.

 

RxDataSources는 뷰 구성에 가장 핵심인 테이블뷰를 Rx답게 사용하게 해주는 좋은 라이브러리다. 간단한 테이블뷰를 구성하는 경우에는 상관없겠지만 복잡한 뷰를 구성하고 모델과 데이터 사이의 의존성을 조금이라도 더 낮추고 싶다면 사용하길 추천한다.