[swift] IGListKit에서 셀에 애니메이션 효과 넣는 방법

15 Nov 2023

swift

IGListKit은 효율적인 컬렉션 뷰 관리를 위한 프레임워크로 많은 기능을 제공합니다. 이 중 셀에 애니메이션 효과를 넣는 방법에 대해 알아보겠습니다.

첫 번째로, 애니메이션 효과를 주고자 하는 셀에 대한 데이터 모델을 생성합니다. 이 모델은 IGListDiffable 프로토콜을 구현해야 합니다.

class MyCellModel: NSObject, IGListDiffable {
    let id: String
    let text: String
    
    init(id: String, text: String) {
        self.id = id
        self.text = text
    }
    
    func diffIdentifier() -> NSObjectProtocol {
        return id as NSObjectProtocol
    }
    
    func isEqual(toDiffableObject object: IGListDiffable?) -> Bool {
        guard let object = object as? MyCellModel else { return false }
        return text == object.text
    }
}

다음으로, 애니메이션 효과를 넣고자 하는 셀에 해당하는 IGListBindingSectionController를 구현합니다. displayDelegate 프로퍼티를 사용하여 셀을 컨트롤하는 데에 사용될 클래스를 지정할 수 있습니다.

class MySectionController: IGListBindingSectionController<MyCellModel> {
    override init() {
        super.init()
        dataSource = self
    }
    
    override func cellForItem(at index: Int) -> UICollectionViewCell {
        // 셀 생성 및 반환
        let cell = collectionContext?.dequeueReusableCell(of: MyCell.self, for: self, at: index) as! MyCell
        return cell
    }
    
    override func didUpdate(to object: Any) {
        // 데이터 모델 저장
        self.object = object as? MyCellModel
    }
}

extension MySectionController: IGListBindingSectionControllerDataSource {
    // 셀에 데이터 모델을 바인딩
    func sectionController(_ sectionController: IGListBindingSectionController<Any>, viewModelsFor object: Any) -> [ListDiffable] {
        guard let object = object as? MyCellModel else { return [] }
        return [object]
    }

    // 셀에 변화가 생길 때 애니메이션 효과 설정
    func sectionController(_ sectionController: IGListBindingSectionController<Any>, sizeForViewModel viewModel: Any, at index: Int) -> CGSize {
        return CGSize(width: collectionContext?.containerSize.width ?? 0, height: 50)
    }
}

마지막으로, 컨트롤러에서 IGListKit을 설정하고 애니메이션 효과를 적용하려는 리스트에 대한 diffing이 필요합니다. 이를 위해 IGListAdapter를 사용합니다.

class ViewController: UIViewController, ListAdapterDelegate {

    private let adapter = ListAdapter(updater: ListAdapterUpdater(), viewController: self)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 컨트롤러에서 collectionView를 생성하고 설정
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
        collectionView.backgroundColor = .white
        view.addSubview(collectionView)
        adapter.collectionView = collectionView
        adapter.dataSource = self
        
        // 애니메이션 효과를 넣고자 하는 리스트에 대한 diffing 적용
        adapter.performUpdates(animated: true, completion: nil)
    }

    // ListAdapterDataSource의 메서드를 구현하여 섹션 컨트롤러 생성
    extension ViewController: ListAdapterDataSource {
        func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
            // 데이터 모델 배열 반환
            return [MyCellModel(id: "1", text: "애니메이션 효과를 넣고자 하는 셀")]
        }

        func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {
            // 해당 셀에 애니메이션 효과를 주고자 하는 섹션 컨트롤러 반환
            return MySectionController()
        }

        func emptyView(for listAdapter: ListAdapter) -> UIView? {
            return nil
        }
    }
}

위의 예제 코드는 IGListKit을 사용하여 셀에 애니메이션 효과를 넣는 방법을 보여줍니다. IGListKit과 애니메이션 개념에 익숙해지면 원하는 효과를 다양하게 적용할 수 있습니다. IGListKit 공식 문서를 참조하면 더 자세한 정보를 얻을 수 있습니다.