[swift] Swift IGListKit을 사용한 필터링 기능 구현하기

27 Nov 2023

swift

IGListKit은 Instagram에서 개발한 iOS용 UICollectionView를 보다 쉽게 사용할 수 있도록 도와주는 라이브러리입니다. IGListKit을 사용하면 CollectionView를 더욱 효율적으로 관리하고 성능을 향상시킬 수 있습니다. 이번 글에서는 Swift와 IGListKit을 사용하여 필터링 기능을 구현하는 방법에 대해 알아보겠습니다.

필터링 기능 구현하기

IGListKit 설치하기

IGListKit을 사용하려면 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. Swift Package Manager, CocoaPods 또는 Carthage를 통해 설치할 수 있습니다.
Filter 모델 만들기

필터링에 사용할 데이터를 담기 위한 Filter 모델을 만들어야 합니다. Filter 모델은 필터의 이름과 적용 여부를 저장하는 프로퍼티로 구성될 수 있습니다.
```
struct Filter {
    let name: String
    var applied: Bool
}
```

FilterCell 제작하기

필터를 표시하고 조작하기 위한 FilterCell을 만들어야 합니다. FilterCell은 IGListBindingSectionController를 상속받고, 필터 모델을 표시하고 변경할 수 있는 UI 요소들을 포함해야 합니다.

class FilterCell: UICollectionViewCell, ListBindable {
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var switchButton: UISwitch!

    func bindViewModel(_ viewModel: Any) {
        guard let filter = viewModel as? Filter else { return }
        nameLabel.text = filter.name
        switchButton.isOn = filter.applied
    }

    @IBAction func switchValueChanged(_ sender: UISwitch) {
        // 스위치 값이 변경되었을 때 필터 모델의 applied 상태 변경
        ...
    }
}

FilterSectionController 생성하기

FilterCell에 대응하는 IGListSectionController인 FilterSectionController를 만들어야 합니다. FilterSectionController는 필터 모델의 리스트를 관리하고, FilterCell과 필터 모델을 바인딩합니다.

class FilterSectionController: ListBindingSectionController<Filter> {
    override func cellForItem(at index: Int) -> UICollectionViewCell {
        let cell = collectionContext?.dequeueReusableCell(of: FilterCell.self, for: self, at: index)
        return cell ?? UICollectionViewCell()
    }

    override func sizeForItem(at index: Int) -> CGSize {
        // 셀의 사이즈 반환
        let width = collectionContext?.containerSize.width ?? 0
        return CGSize(width: width, height: 50)
    }

    override func didUpdate(to object: Any) {
        guard let filter = object as? Filter else { return }
        // 필터 모델 바인딩
        self.object = filter
    }

    override func didSelectItem(at index: Int) {
        // 필터 셀 선택 시 필터 모델의 applied 상태 변경
        ...
    }
}

FilterViewController 생성하기

필터 기능을 사용할 View Controller를 만듭니다. 이 View Controller에서는 Filter 모델의 리스트를 관리하고 필터링 기능을 구현합니다.

class FilterViewController: UIViewController, ListAdapterDataSource {
    let filters: [Filter] = [
        Filter(name: "Filter 1", applied: false),
        Filter(name: "Filter 2", applied: false),
        ...
    ]

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

    override func viewDidLoad() {
        super.viewDidLoad()

        adapter.collectionView = collectionView
        adapter.dataSource = self
    }

    // MARK: - ListAdapterDataSource

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

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

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

FilterViewController 사용하기

필터 기능을 사용할 ViewController에서는 UICollectionView를 추가로 생성하고, viewDidLoad에서 adapter와 collectionView를 연결해야 합니다.

class MainViewController: UIViewController {
    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 필터 기능을 사용할 FilterViewController 초기화
        let filterViewController = FilterViewController()
        addChild(filterViewController)
        collectionView.addSubview(filterViewController.view)
        filterViewController.view.frame = collectionView.bounds
    }

    // ...
}

위의 단계를 따라가면 필터링 기능을 구현할 수 있습니다. IGListKit은 CollectionView의 관리를 용이하게 해주기 때문에, 필터링 외에도 다양한 기능을 손쉽게 구현할 수 있습니다.

참고 자료

IGListKit GitHub Repository Link
IGListKit Documentation Link

이 글은 Swift IGListKit을 사용하여 필터링 기능을 구현하는 방법에 대해 설명했습니다. IGListKit은 강력한 라이브러리로, CollectionView를 관리하는 작업을 더욱 쉽게 만들어줍니다. 필터링 외에도 다양한 기능을 IGListKit을 통해 구현할 수 있으니, 관심 있는 분들은 IGListKit 공식 문서와 예제들을 참고해보시기 바랍니다.