[swift] IGListDiffKit을 이용한 애니메이션 구현

20 Nov 2023

swift

개요

애니메이션은 모바일 앱에서 사용자 경험을 향상시키는 중요한 요소 중 하나입니다. IGListDiffKit은 iOS 앱에서 복잡한 컬렉션 뷰나 테이블 뷰의 변경사항을 효율적으로 처리하고 애니메이션을 적용할 수 있는 라이브러리입니다. 이번 포스트에서는 IGListDiffKit을 사용하여 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

IGListDiffKit 소개

IGListDiffKit은 Instagram에서 개발한 오픈소스 라이브러리로, 리스트 형태의 데이터를 비교하고 변경사항을 자동으로 계산해주는 기능을 제공합니다. 이를 통해 컬렉션 뷰나 테이블 뷰에서 데이터의 변화를 감지하고 애니메이션을 적용할 수 있습니다.

IGListDiffKit 사용하기

IGListDiffable 프로토콜 채택하기

IGListDiffKit을 사용하기 위해서는 데이터 모델이 IGListDiffable 프로토콜을 채택해야 합니다. 이 프로토콜은 데이터 객체를 고유하게 식별하기 위한 diffIdentifier 속성과 데이터 변경사항을 계산하는 isEqualToDiffableObject(_:) 메서드를 요구합니다.

class MyDataModel: NSObject, IGListDiffable {
    let id: Int
    let name: String
   
    init(id: Int, name: String) {
        self.id = id
        self.name = name
    }
   
    // IGListDiffable 프로토콜 구현
    func diffIdentifier() -> NSObjectProtocol {
        return id as NSObjectProtocol
    }
   
    func isEqual(toDiffableObject object: IGListDiffable?) -> Bool {
        if let object = object as? MyDataModel {
            return id == object.id && name == object.name
        }
        return false
    }
}

IGListAdapter 초기화하기

IGListAdapter 객체를 생성하여 컬렉션 뷰나 테이블 뷰와 연결합니다. IGListAdapter는 데이터의 변경사항을 감지하고 애니메이션을 적용하는 역할을 합니다.
```
let adapter = IGListAdapter(updater: IGListAdapterUpdater(), viewController: self, workingRangeSize: 0)
adapter.collectionView = collectionView
adapter.dataSource = self
```

IGListAdapterDataSource 구현하기

IGListAdapterDataSource 프로토콜을 구현하여 데이터를 제공합니다. IGListAdapterDataSource는 컬렉션 뷰나 테이블 뷰에서 표시할 데이터를 제공하고, 변경사항을 계산하는 메서드를 정의합니다.

extension ViewController: IGListAdapterDataSource {
    // 데이터 배열 반환
    func objects(for listAdapter: IGListAdapter) -> [IGListDiffable] {
        return data // IGListDiffable 채택한 데이터 배열
    }
   
    // 데이터와 셀 식별자를 연결
    func listAdapter(_ listAdapter: IGListAdapter, sectionControllerFor object: Any) -> IGListSectionController {
        let sectionController = MySectionController()
        sectionController.cellConfigurator = self
        return sectionController
    }
   
    // 데이터 업데이트를 위한 쿼리 함수 정의
    func emptyView(for listAdapter: IGListAdapter) -> UIView? {
        return nil
    }
}

IGListSectionController 구현하기

IGListSectionController 프로토콜을 구현하여 섹션 컨트롤러를 생성합니다. 섹션 컨트롤러는 데이터 객체와 셀을 연결하는 역할을 합니다.

class MySectionController: NSObject, IGListSectionController {
    var data: MyDataModel?
    var cellConfigurator: MyCellConfigurator?
   
    // 섹션 컨트롤러의 크기 반환
    func sizeForItem(at index: Int) -> CGSize {
        return CGSize(width: 100, height: 100)
    }
   
    // 데이터 객체와 셀을 연결
    func cellForItem(at index: Int) -> UICollectionViewCell {
        guard let cell = collectionContext?.dequeueReusableCell(of: MyCollectionViewCell.self, for: self, at: index) as? MyCollectionViewCell, let data = data else {
            fatalError()
        }
        cellConfigurator?.configure(cell, with: data)
        return cell
    }
   
    // 데이터 변경사항 적용
    func didUpdate(to object: Any) {
        data = object as? MyDataModel
    }
}

애니메이션 적용하기

IGListAdapter의 performUpdates(animated:completion:) 메서드를 호출하여 데이터의 변경사항을 애니메이션으로 적용합니다.
```
adapter.performUpdates(animated: true, completion: nil)
```

마무리

IGListDiffKit은 iOS 앱에서 복잡한 컬렉션 뷰나 테이블 뷰의 데이터 변경사항을 효율적으로 처리하고 애니메이션을 적용할 수 있도록 도와줍니다. 이를 통해 앱의 성능과 사용자 경험을 개선할 수 있습니다.

더 자세한 내용은 IGListDiffKit 공식 문서를 참고하세요.