[swift] IGListKit에서 커스텀 셀 디자인하는 방법

15 Nov 2023

swift

IGListKit은 iOS 앱에서 데이터 주도형 컬렉션 뷰를 구축하는 데 도움이 되는 강력한 프레임워크입니다. IGListKit의 주요 특징 중 하나는 커스텀 셀 디자인을 쉽게 구현할 수 있다는 것입니다. 이번 블로그 포스트에서는 IGListKit을 사용하여 커스텀 셀을 디자인하는 방법에 대해 알아보겠습니다.

1. 커스텀 셀 클래스 생성하기

먼저, 커스텀 셀을 만들기 위해 UICollectionViewCell을 상속받는 클래스를 생성합니다. 이 클래스는 IGListKit의 IGListBindable 프로토콜을 구현해야 하며, 필요에 따라 커스텀 UI 요소를 추가할 수 있습니다.

class CustomCell: UICollectionViewCell, IGListBindable {
    // TODO: 필요한 UI 요소들을 선언합니다.

    func bindViewModel(_ viewModel: Any) {
        // TODO: 데이터를 받아와 UI를 업데이트합니다.
    }
}

2. 캐스팅과 셀 등록하기

다음으로, IGListKit의 IGListAdapterDataSource 프로토콜을 구현하는 어댑터 클래스를 생성합니다. 이 클래스에서는 데이터에 따라 올바른 셀을 반환해주는 메서드를 구현해야 합니다.

class Adapter: NSObject, IGListAdapterDataSource {
    // TODO: 데이터 소스에 필요한 프로퍼티들을 선언합니다.

    func listAdapter(_ listAdapter: IGListAdapter, cellForItemAt index: Int, viewController: UIViewController) -> UICollectionViewCell {
        // TODO: 데이터에 따라 올바른 셀을 반환합니다.
        guard let cell = listAdapter.collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: index) as? CustomCell else {
            fatalError("Invalid cell type")
        }
        return cell
    }

    func listAdapter(_ listAdapter: IGListAdapter, sizeForItemAt index: Int) -> CGSize {
        // TODO: 셀의 크기를 반환합니다.
        return CGSize(width: UIScreen.main.bounds.width, height: 100)
    }

    // TODO: 데이터 소스와 관련된 다른 메서드들을 구현합니다.
}

3. 어댑터와 컬렉션 뷰 연결하기

마지막으로, 어댑터와 컬렉션 뷰를 연결하고 필요한 설정을 해주어야 합니다.

class ViewController: UIViewController, IGListAdapterDelegate {
    @IBOutlet private weak var collectionView: UICollectionView!

    private var adapter: IGListAdapter!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 커스텀 셀 등록하기
        collectionView.register(CustomCell.self, forCellWithReuseIdentifier: "CustomCell")

        // 어댑터 생성하기
        adapter = IGListAdapter(updater: IGListAdapterUpdater(), viewController: self)
        adapter.collectionView = collectionView
        adapter.dataSource = Adapter()

        // 어댑터 델리게이트 설정하기
        adapter.delegate = self
    }

    // TODO: 어댑터와 관련된 다른 메서드들을 구현합니다.
}

위의 예시 코드에서는 IGListKit을 사용하여 커스텀 셀을 디자인하는 방법을 보여주었습니다. IGListKit은 데이터 주도형 컬렉션 뷰를 구축하는 다양한 기능들을 제공하므로, 자세한 내용은 IGListKit 공식 문서를 참조해주세요.

참고: IGListKit 공식 문서