[swift] IGListKit에서 셀의 배경 이미지 설정하는 방법

15 Nov 2023

swift

IGListKit은 iOS 앱에서 사용할 수 있는 유연하고 강력한 컬렉션뷰 관리 라이브러리입니다. IGListKit을 사용하여 셀의 배경 이미지를 설정하는 방법에 대해 알아보겠습니다.

1. 이미지 준비하기

셀의 배경에 사용할 이미지를 준비합니다. 이 이미지는 프로젝트의 리소스로 추가해야 합니다.

2. 셀 모델 클래스 생성하기

IGListKit의 ListDiffable 프로토콜을 준수하는 셀 모델 클래스를 생성합니다. 이 클래스는 셀에 표시할 데이터를 저장하는 역할을 합니다. 배경 이미지를 저장할 UIImage 속성을 추가합니다.

class MyCellModel: NSObject, ListDiffable {
    let backgroundImage: UIImage
  
    init(backgroundImage: UIImage) {
        self.backgroundImage = backgroundImage
    }
  
    func diffIdentifier() -> NSObjectProtocol {
        return "MyCell" as NSObjectProtocol
    }
  
    func isEqual(toDiffableObject object: ListDiffable?) -> Bool {
        guard let object = object as? MyCellModel else {
            return false
        }
      
        return backgroundImage.isEqual(object.backgroundImage)
    }
}

3. 커스텀 셀 클래스 만들기

IGListKit의 ListBindable 프로토콜을 준수하는 커스텀 셀 클래스를 생성합니다. 셀 내부에 배경 이미지를 표시할 UIImageView 속성을 추가하고, ListBindable 프로토콜을 구현하여 셀에 모델을 바인딩하는 로직을 작성합니다.

class MyCell: UICollectionViewCell, ListBindable {
    @IBOutlet weak var backgroundImageView: UIImageView!
  
    func bindViewModel(_ viewModel: Any) {
        guard let cellModel = viewModel as? MyCellModel else {
            return
        }
      
        backgroundImageView.image = cellModel.backgroundImage
    }
}

4. 컬렉션뷰 컨트롤러 설정하기

IGListKit을 사용하는 컨트롤러에서 컬렉션뷰 및 데이터소스를 설정합니다.

class ViewController: UIViewController, ListAdapterDataSource {
    let adapter = ListAdapter(updater: ListAdapterUpdater(), viewController: self)
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
  
    // ...
    
    func configureCollectionView() {
        // 셀 등록
        adapter.collectionView = collectionView
        adapter.dataSource = self
        collectionView.backgroundColor = .white
        collectionView.alwaysBounceVertical = true
        collectionView.collectionViewLayout = UICollectionViewFlowLayout()
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.contentInsetAdjustmentBehavior = .always
        view.addSubview(collectionView)
      
        // ...
    }
    
    // ...
  
    func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
        // 모델 객체 반환
    }
  
    func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {
        // 셀 섹션 컨트롤러 반환
    }
  
    func emptyView(for listAdapter: ListAdapter) -> UIView? {
        // 빈 화면 뷰 반환
    }
}

5. 배경 이미지 설정하기

마지막으로, 모델 객체에서 배경 이미지를 설정하여 셀에 렌더링되도록 합니다.

func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
    let backgroundImage = UIImage(named: "my_background_image")
    let cellModel = MyCellModel(backgroundImage: backgroundImage)
      
    return [cellModel]
}

셀의 배경 이미지를 설정하는 방법에 대해 알아보았습니다. IGListKit을 사용하여 유연하고 성능이 우수한 컬렉션뷰를 구현할 수 있습니다. IGListKit의 더 많은 기능과 사용법은 공식 문서를 참고하시기 바랍니다.