[swift] IGListKit에서 셀에 디바이스마다 다른 데이터 표시하는 방법

15 Nov 2023

swift

IGListKit은 iOS 애플리케이션에서 커다란 데이터 집합을 효율적으로 표시하기 위한 강력한 라이브러리입니다. 이 라이브러리를 사용하면 여러 장치에서 동일한 데이터 모델을 기반으로 다른 레이아웃을 사용할 수 있습니다. 따라서 하나의 데이터 모델로 다양한 플랫폼과 기기에 대응할 수 있습니다.

디바이스마다 다른 데이터를 표시하는 방법을 소개하겠습니다.

1. IGListKit에서 섹션 구성하기

IGListKit은 섹션 기반의 데이터 구성을 사용합니다. 따라서, 각 섹션은 한 종류의 데이터를 나타냅니다. 다른 섹션을 사용하여 디바이스마다 다른 데이터를 표시할 수 있습니다.

class MySectionController: ListSectionController {
    var data: Any?
    
    override func sizeForItem(at index: Int) -> CGSize {
        return CGSize(width: collectionContext!.containerSize.width, height: 50)
    }
    
    override func cellForItem(at index: Int) -> UICollectionViewCell {
        let cell = collectionContext!.dequeueReusableCell(of: MyCell.self, for: self, at: index) as! MyCell
        // 셀에 데이터 바인딩
        cell.configure(with: data)
        return cell
    }
    
    override func didUpdate(to object: Any) {
        data = object
    }
}

2. ViewController에서 섹션 컨트롤러 할당하기

ViewController에서는 각 섹션에 대한 데이터를 결정하고 IGListKit의 섹션 컨트롤러에 할당해야 합니다.

class MyViewController: UIViewController, ListAdapterDataSource {
    let adapter: ListAdapter = ListAdapter(updater: ListAdapterUpdater(), viewController: nil)
    var data: [Any] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        adapter.dataSource = self
        // collectionView 설정
        adapter.collectionView = collectionView
    }

    // MARK: - ListAdapterDataSource

    func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
        return data.map { ListDiffableBox(value: $0) }
    }

    func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {
        let sectionController = MySectionController()
        sectionController.data = object
        return sectionController
    }

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

3. 디바이스에 따른 데이터 섹션 구성

마지막으로, ViewController에서 디바이스에 따라 데이터 섹션을 구성해야 합니다. 이 경우, 운영체제 버전을 기준으로 섹션을 설정하는 예제를 보여드리겠습니다.

class MyViewController: UIViewController, ListAdapterDataSource {
    ...

    override func viewDidLoad() {
        super.viewDidLoad()
        adapter.dataSource = self
        // collectionView 설정
        adapter.collectionView = collectionView

        if #available(iOS 13.0, *) {
            // iOS 13 이상에서는 SectionA를 사용
            data = [SectionA()]
        } else {
            // iOS 13 미만에서는 SectionB를 사용
            data = [SectionB()]
        }
        
        adapter.performUpdates(animated: true, completion: nil)
    }

    ...
}

위의 예에서 SectionA와 SectionB는 각각 데이터를 표시하는 두 가지 다른 섹션 클래스입니다. 디바이스의 운영체제 버전을 기준으로 적절한 섹션을 사용하도록 조건을 설정하였습니다.

위에서 제시한 예제를 참고하여 IGListKit를 사용하여 디바이스마다 다른 데이터를 효율적으로 표시할 수 있습니다.

참고 자료

IGListKit 공식 문서: https://instagram.github.io/IGListKit/