[swift] IGListKit에서 커스텀 셀 애니메이션 추가하는 방법

15 Nov 2023

swift

IGListKit은 iOS 앱에서 유연하고 성능이 우수한 리스트 인터페이스를 만들기위한 프레임워크입니다. IGListKit을 사용하면 UICollectionView를 더 쉽고 효율적으로 구현할 수 있습니다. 이 튜토리얼에서는 IGListKit을 사용하여 커스텀 셀의 애니메이션을 추가하는 방법을 알아보겠습니다.

1. UICollectionViewCell 서브클래스 작성

먼저, 애니메이션을 추가할 커스텀 셀의 서브클래스를 작성해야 합니다. 이 클래스에 애니메이션을 구현합니다. 예를 들어, 다음과 같이 커스텀 셀의 서브클래스를 작성할 수 있습니다:

class CustomCell: UICollectionViewCell {
    // 셀의 컨텐츠와 관련된 프로퍼티들을 선언합니다.

    override func awakeFromNib() {
        super.awakeFromNib()
        
        // 애니메이션을 위한 초기 설정을 수행합니다.
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        
        // 재사용을 위한 초기화 작업을 수행합니다.
    }
    
    func animate() {
        // 애니메이션을 구현합니다.
    }
}

2. IGListBindingSectionController 구현

다음으로, IGListBindingSectionController를 구현하여 애니메이션을 처리합니다. IGListBindingSectionController는 하나 이상의 데이터 모델을 관리하고 해당 모델들을 셀과 바인딩하는 역할을 합니다. 여기서는 셀을 바인딩할 때 애니메이션을 실행하도록 UICollectionViewDelegate 메서드를 활용합니다.

class CustomSectionController: IGListBindingSectionController<CustomModel, CustomCell> {

    override init() {
        super.init()
        
        dataSource = self
    }

    override func cellForItem(at index: Int) -> UICollectionViewCell {
        guard let cell = collectionContext?.dequeueReusableCell(of: CustomCell.self, for: self, at: index) else {
            fatalError("Unable to dequeue cell")
        }
        return cell
    }
    
    override func canMoveItem(at index: Int) -> Bool {
        return true
    }
    
    override func moveObject(from sourceIndex: Int, to destinationIndex: Int) {
        // 리스트에서 아이템을 이동할 때 호출되는 메서드입니다.
        // 이곳에 이동 애니메이션을 구현할 수 있습니다.
    }
}

extension CustomSectionController: IGListBindingSectionControllerDataSource {
    func sectionController(_ sectionController: IGListBindingSectionController<AnyObject>, viewModelsFor object: Any) -> [ListDiffable] {
        // 데이터 모델을 받아서 해당 모델에 대한 뷰 모델 배열을 생성합니다.
    }

    func sectionController(_ sectionController: IGListBindingSectionController<AnyObject>, cellForViewModel viewModel: Any, at index: Int) -> UICollectionViewCell & IGListBindable {
        // 뷰 모델에 따른 셀을 생성하고 반환합니다.
    }

    func sectionControllerDidFinishBinding(_ sectionController: IGListBindingSectionController<AnyObject>) {
        // 셀과 데이터 모델이 바인딩된 후 호출됩니다.
        // 이곳에 애니메이션을 실행하는 코드를 추가할 수 있습니다.
        if let cell = collectionContext?.cellForItem(at: index, sectionController: self) as? CustomCell {
            cell.animate()
        }
    }
}

3. UICollectionView에서 IGListKit 사용

마지막으로, IGListKit을 사용하여 UICollectionView를 구성합니다. IGListAdapterDataSource를 구현하여 섹션 컨트롤러를 등록하고, 셀을 매핑합니다.

class ViewController: UIViewController, IGListAdapterDataSource {

    let adapter: IGListAdapter = {
        let updater = IGListAdapterUpdater()
        let adapter = IGListAdapter(updater: updater, viewController: nil)
        return adapter
    }()
    
    let collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        return collectionView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        collectionView.backgroundColor = .white
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(collectionView)
    
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: view.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        adapter.collectionView = collectionView
        adapter.dataSource = self
    }

    // MARK: - IGListAdapterDataSource
    
    func objects(for listAdapter: IGListAdapter) -> [IGListDiffable] {
        // 섹션에 표시할 데이터 모델을 반환합니다.
    }
    
    func listAdapter(_ listAdapter: IGListAdapter, sectionControllerFor object: Any) -> IGListSectionController {
        // 해당 섹션에 사용할 섹션 컨트롤러를 반환합니다.
        return CustomSectionController()
    }
    
    func emptyView(for listAdapter: IGListAdapter) -> UIView? {
        // 데이터가 없을 때 표시할 뷰를 반환합니다.
    }
}

이제 IGListKit을 사용하여 커스텀 셀 애니메이션을 추가하는 방법을 알게 되었습니다. IGListKit은 다양한 기능을 제공하며 UICollectionView의 작업을 단순화할 수 있습니다.

더 자세한 정보와 예제 코드를 확인하려면 IGListKit 공식 문서를 참조하세요.