[swift] IGListKit에서 커스텀 셀 처리하는 방법

15 Nov 2023

swift

IGListKit은 iOS 앱에서 컬렉션 뷰를 구현하는데 도움을 주는 강력한 라이브러리입니다. IGListKit을 사용하면 데이터 소스 및 셀 처리를 쉽게 구현할 수 있습니다. 이번 포스트에서는 IGListKit을 사용하여 커스텀 셀을 처리하는 방법에 대해 알아보겠습니다.

먼저 IGListKit을 프로젝트에 추가해야 합니다. Cocoapods를 사용한다면 Podfile에 다음과 같이 추가해주세요.

pod 'IGListKit'

IGListKit을 import 합니다.

import IGListKit

커스텀 셀을 구현하기 위해 UICollectionViewCell을 상속하는 새로운 클래스를 만들어주세요. 새로운 클래스에서는 UICollectionViewCell에 필요한 UI 구성 요소들을 구현합니다. 예를 들어, 아래와 같이 UILabel과 UIImageView를 사용하는 샘플 클래스를 만들 수 있습니다.

class CustomCell: UICollectionViewCell {
    let titleLabel = UILabel()
    let imageView = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        // 셀의 UI 구성 요소들을 추가하고 제약 조건을 설정합니다.
        // ...
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

IGListBindable 프로토콜을 커스텀 셀 클래스에 준수하도록 구현합니다. IGListBindable 프로토콜을 준수함으로써 IGListKit에서 제공하는 바인딩 메서드들을 사용할 수 있습니다. 아래의 코드와 같이 bindViewModel(_:) 메서드를 구현하면 됩니다.

extension CustomCell: IGListBindable {
    func bindViewModel(_ viewModel: Any) {
        // viewModel에 저장된 데이터를 가져와서 셀에 반영하는 로직을 구현합니다.
        // ...
    }
}

IGListKit에서 사용할 데이터 모델 클래스를 만듭니다. 이 클래스는 NSObject를 상속하고 IGListDiffable 프로토콜을 준수해야 합니다. IGListDiffable 프로토콜은 데이터 모델의 고유 식별자를 반환하는 메서드를 요구합니다. 샘플 코드는 아래와 같습니다.

class CustomModel: NSObject, IGListDiffable {
    let title: String
    let image: UIImage

    init(title: String, image: UIImage) {
        self.title = title
        self.image = image
    }

    // IGListDiffable 프로토콜을 준수하기 위해 고유 식별자를 반환하는 메서드를 구현합니다.
    func diffIdentifier() -> NSObjectProtocol {
        return self
    }

    // IGListDiffable 프로토콜을 준수하기 위해 객체를 비교하는 메서드를 구현합니다.
    func isEqual(toDiffableObject object: IGListDiffable?) -> Bool {
        return self === object
    }
}

이제 IGListAdapter를 설정하고 데이터 소스를 구현합니다. 아래의 코드는 새로 생성한 커스텀 셀 및 데이터 모델 클래스를 사용하여 컬렉션 뷰를 구성하는 예시입니다.

class ViewController: UIViewController {
    var collectionView: UICollectionView!
    var adapter: IGListAdapter!
    var data: [CustomModel] = []

    override func viewDidLoad() {
        super.viewDidLoad()

        // UICollectionView 인스턴스 생성 및 레이아웃 설정을 합니다.
        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: UICollectionViewFlowLayout())
        collectionView.backgroundColor = .white
        view.addSubview(collectionView)

        // IGListAdapter 인스턴스 생성 및 데이터 소스 설정을 합니다.
        adapter = IGListAdapter(updater: IGListAdapterUpdater(), viewController: self)
        adapter.collectionView = collectionView
        adapter.dataSource = self

        // 데이터를 초기화합니다.
        data = [CustomModel(title: "Title 1", image: UIImage(named: "image1")!),
                CustomModel(title: "Title 2", image: UIImage(named: "image2")!),
                CustomModel(title: "Title 3", image: UIImage(named: "image3")!)]

        // 업데이트를 수행합니다.
        adapter.reloadData()
    }
}

extension ViewController: IGListAdapterDataSource {
    func objects(for listAdapter: IGListAdapter) -> [IGListDiffable] {
        return data
    }

    func listAdapter(_ listAdapter: IGListAdapter, sectionControllerFor object: Any) -> IGListSectionController {
        let sectionController = IGListSingleSectionController()
        sectionController.configuredCellClass = CustomCell.self
        sectionController.selectionDelegate = self
        return sectionController
    }

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

위의 코드를 참고하여 IGListBindable 프로토콜을 구현한 커스텀 셀과 IGListAdapterDataSource를 구현한 데이터 소스를 생성하고, IGListAdapter를 사용하여 컬렉션 뷰를 구성하면 됩니다. IGListKit을 사용하면 쉽게 커스텀 셀 처리를 할 수 있으며, 데이터 소스의 변경 사항을 자동으로 추적하여 업데이트할 수도 있습니다.

더 자세한 내용은 IGListKit GitHub 페이지를 참고하시기 바랍니다.