[swift] IGListKit에서 커스텀 셀 만드는 방법

15 Nov 2023

swift

IGListKit은 iOS 애플리케이션에서 컬렉션 뷰의 데이터 소스 및 뷰 관리를 도와주는 강력한 프레임워크입니다. IGListKit을 사용하면 효율적으로 데이터를 표시하고 업데이트할 수 있으며, 커스텀 셀을 만들어 맞춤형 UI를 구현하는 것도 가능합니다.

단계 1: IGListBindingSectionController 구현

IGListBindingSectionController는 IGListSectionController를 구현하는 클래스입니다. 이 클래스를 사용하면 커스텀 셀을 만들 수 있고, 해당 셀을 데이터와 바인딩할 수 있습니다.

import IGListKit

class MySectionController: IGListBindingSectionController<MyData, MyCell> {

    override func createViewModel(with object: Any) -> ListDiffable {
        guard let data = object as? MyData else {
            fatalError("Invalid object type")
        }
        return data
    }

    override func sizeForItem(at index: Int) -> CGSize {
        return CGSize(width: collectionContext?.containerSize.width ?? 0, height: 50)
    }

    override func cellForItem(at index: Int) -> UICollectionViewCell {
        guard let cell = collectionContext?.dequeueReusableCell(of: MyCell.self, for: self, at: index) as? MyCell else {
            fatalError("Invalid cell type")
        }
        return cell
    }

    override func didUpdate(to object: Any) {
        super.didUpdate(to: object)
        // 데이터가 업데이트되었을 때 수행할 작업
    }
}

단계 2: 커스텀 셀 구현

커스텀 셀은 UICollectionViewCell을 상속받은 클래스로 구현됩니다. 필요한 UI 컴포넌트를 추가하고, 해당 컴포넌트들을 바인딩할 수 있는 데이터 프로퍼티를 노출시킵니다.

class MyCell: UICollectionViewCell {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var subtitleLabel: UILabel!

    var data: MyData? {
        didSet {
            configureCell()
        }
    }

    private func configureCell() {
        guard let data = data else {
            return
        }

        titleLabel.text = data.title
        subtitleLabel.text = data.subtitle
    }
}

단계 3: IGListAdapter 설정

마지막으로, IGListAdapter를 사용하여 커스텀 셀을 컬렉션 뷰에 연결해야 합니다.

import IGListKit

class MyViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!

    lazy var adapter: ListAdapter = {
        return ListAdapter(updater: ListAdapterUpdater(), viewController: self)
    }()

    var data: [MyData] = [] {
        didSet {
            adapter.performUpdates(animated: true, completion: nil)
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        adapter.collectionView = collectionView
        adapter.dataSource = self
    }
}

extension MyViewController: ListAdapterDataSource {

    func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
        return data
    }

    func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {
        return MySectionController()
    }

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

위의 코드는 IGListAdapter를 생성하고, 데이터를 업데이트하는 방식을 보여줍니다. 이제 데이터를 제공하고 커스텀 셀을 사용하여 컬렉션 뷰에 개별 항목을 표시할 수 있게 되었습니다.

이제 IGListKit을 사용하여 커스텀 셀을 만들고 데이터를 효율적으로 관리하는 방법을 알게 되었습니다. IGListKit은 복잡한 UI를 관리하는 데 큰 도움이 되므로, 애플리케이션의 성능과 유지 보수성을 향상시키기 위해 고려해볼만한 프레임워크입니다.