[swift] IGListKit에서 동적인 셀 배경 설정하는 방법

15 Nov 2023

swift

IGListKit은 iOS 개발자들이 컬렉션 뷰를 구성하는 데 도움이 되는 강력한 라이브러리입니다. IGListKit을 사용하면 셀의 배경을 동적으로 설정하는 것도 매우 간단합니다. 이번 글에서는 IGListKit을 사용하여 동적인 셀 배경을 설정하는 방법에 대해 알아보겠습니다.

IGListKit을 사용하여 동적인 셀 배경을 설정하려면 다음의 단계를 따라야 합니다:

단계 1: UICollectionViewCell 작성

먼저 셀을 표현하는 UICollectionViewCell 하위클래스를 작성해야 합니다. 이 클래스에는 셀의 모양과 콘텐츠를 정의하는 코드를 작성해야 합니다.

class CustomCell: UICollectionViewCell {
    // 셀의 UI 요소들을 정의합니다.
    let titleLabel: UILabel = {
        let label = UILabel()
        label.textColor = .black
        label.font = .systemFont(ofSize: 16)
        return label
    }()
    
    // 셀의 배경 색을 설정합니다.
    override var backgroundColor: UIColor? {
        didSet {
            titleLabel.backgroundColor = backgroundColor
        }
    }
    
    // ...

    // 셀의 UI 요소들을 레이아웃합니다.
    private func setupUI() {
        addSubview(titleLabel)
        
        //...
    }

    //...

    override init(frame: CGRect) {
        super.init(frame: frame)

        // 셀의 UI 요소들을 레이아웃합니다.
        setupUI()
    }

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

위 코드에서 CustomCell 클래스를 정의하고, titleLabel을 포함한 셀의 필수 UI 요소들을 설정하고 있습니다. 또한, backgroundColor 속성을 오버라이드하여 배경색이 변경될 때 마다 titleLabel의 배경색도 함께 변경되도록 구현하였습니다.

단계 2: IGListKit 데이터 소스 작성

다음으로, IGListKit 데이터 소스를 작성해야 합니다. IGListKit 데이터 소스는 컬렉션 뷰에 표시될 셀의 데이터와 로직을 정의합니다. 이 데이터 소스에서는 동적으로 셀의 배경색을 설정할 수 있습니다.

class CustomDataSource: NSObject, ListAdapterDataSource {

    //...

    // 셀 데이터를 반환하는 메소드를 구현합니다.
    func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
        //...
    }

    // 셀을 구성하는 메소드를 구현합니다.
    func listAdapter(_ listAdapter: ListAdapter, cellFor object: Any, at index: Int) -> UICollectionViewCell {
        guard let context = listAdapter.collectionContext else {
            return UICollectionViewCell()
        }
        
        // 셀을 재사용하거나 생성합니다.
        let cell = context.dequeueReusableCell(withNibName: "CustomCell", bundle: nil, for: self, at: index) as! CustomCell
        
        // 셀의 배경 색을 동적으로 설정합니다.
        cell.backgroundColor = UIColor.randomColor()
        
        // 셀을 구성하는 로직을 처리합니다. (ex. 데이터 연동)
        //...
        
        return cell
    }

    //...
}

위 코드에서 CustomDataSource 클래스를 정의하고 objects(for:) 메소드로 셀의 데이터를 반환합니다. 또한 listAdapter(_:cellFor:at:) 메소드에서는 셀을 구성하고 배경색을 동적으로 설정합니다.

단계 3: IGListKit 사용하기

마지막으로 IGListKit을 사용하여 컬렉션 뷰를 설정하고 데이터 소스와 연결해야 합니다.

class ViewController: UIViewController, ListAdapterDataSource {

    // IGListKit의 ListAdapter를 선언합니다.
    var adapter: ListAdapter!

    override func viewDidLoad() {
        super.viewDidLoad()

        // IGListKit ListAdapter를 초기화합니다.
        adapter = ListAdapter(updater: ListAdapterUpdater(), viewController: self)
        adapter.collectionView = collectionView
        adapter.dataSource = self
    }

    //...

    // IGListKit 데이터 소스를 구현합니다.
    func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
        //...
    }

    func listAdapter(_ listAdapter: ListAdapter, cellFor object: Any, at index: Int) -> UICollectionViewCell {
        //...
    }

    //...
}

위 코드에서 ViewController 클래스에서 ListAdapter를 초기화하고, objects(for:)와 listAdapter(_:cellFor:at:) 메소드를 구현하여 IGListKit에서 제공하는 데이터 소스를 설정합니다.

이제 IGListKit을 사용하여 컬렉션 뷰를 구성하고 동적인 셀 배경을 설정할 수 있습니다. IGListKit은 셀의 배경색을 동적으로 설정하는 것뿐만 아니라 다양한 컬렉션 뷰 관련 기능을 제공하는 강력한 라이브러리입니다.

참고 자료:

IGListKit GitHub: https://github.com/Instagram/IGListKit
IGListKit 문서: https://instagram.github.io/IGListKit/