[swift] Swift IGListKit에서 컬렉션 뷰 셀 필터링하기

27 Nov 2023

swift

IGListKit은 Instagram에서 개발한 UICollectionView를 간편하게 사용하기 위한 라이브러리입니다. IGListKit은 많은 기능을 제공하며, 컬렉션 뷰 셀 필터링 또한 그 중 하나입니다. 이번 블로그 포스트에서는 IGListKit을 사용하여 컬렉션 뷰 셀을 필터링하는 방법에 대해 알아보겠습니다.

IGListKit 설치

IGListKit을 사용하기 위해 먼저 Cocoapods를 이용하여 프로젝트에 IGListKit을 설치해야 합니다. Podfile에 다음과 같이 IGListKit을 추가합니다.

pod 'IGListKit'

그리고 터미널에서 다음 명령을 실행하여 Cocoapods를 업데이트합니다.

pod install

컬렉션 뷰 셀 필터링 구현하기

Collection View Cell 모델 구현하기

먼저 필터링할 데이터를 담을 Collection View Cell 모델을 구현합니다. 이 모델은 ListDiffable 프로토콜을 준수해야 합니다. 예를 들어, 사용자 이름과 프로필 이미지를 가지는 User 모델을 만들어 보겠습니다.

class User: NSObject, ListDiffable {
    let userName: String
    let profileImage: UIImage

    init(userName: String, profileImage: UIImage) {
        self.userName = userName
        self.profileImage = profileImage
    }

    // MARK: ListDiffable

    func diffIdentifier() -> NSObjectProtocol {
        return userName as NSObjectProtocol
    }

    func isEqual(toDiffableObject object: ListDiffable?) -> Bool {
        guard let object = object as? User else { return false }
        return userName == object.userName
    }
}

데이터 컨트롤러 구현하기

데이터 컨트롤러는 실제로 필터링된 데이터를 관리하고 업데이트하는 역할을 합니다. 이번 예제에서는 User 객체의 배열을 사용하여 데이터를 관리합니다. 필터링 로직을 적용하고 컬렉션 뷰에 업데이트를 반영하는 메서드를 추가합니다.

class DataController {
    var users: [User] = []
    var filteredUsers: [User] = []

    init() {
        // 데이터 초기화
        users = [
            User(userName: "Alice", profileImage: UIImage(named: "alice_profile")!),
            User(userName: "Bob", profileImage: UIImage(named: "bob_profile")!),
            User(userName: "Charlie", profileImage: UIImage(named: "charlie_profile")!)
        ]
        filteredUsers = users
    }

    // 필터링 로직 적용
    func filterUsers(withText searchText: String) {
        filteredUsers = users.filter { $0.userName.lowercased().contains(searchText.lowercased()) }
    }

    // MARK: ListAdapterDataSource
    // ... (List Adapter 메서드들)
}

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

마지막으로 IGListKit을 사용하여 컬렉션 뷰 컨트롤러를 설정합니다. ListAdapterDataSource 프로토콜을 구현하여 필터링된 데이터를 컬렉션 뷰에 반영합니다.

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

    let dataController = DataController()
    let listAdapter = ListAdapter(updater: ListAdapterUpdater(), viewController: nil)

    override func viewDidLoad() {
        super.viewDidLoad()

        listAdapter.collectionView = collectionView
        listAdapter.dataSource = self
    }

    // MARK: ListAdapterDataSource

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

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

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

요약

이렇게 IGListKit을 사용하여 컬렉션 뷰 셀을 필터링하는 방법을 알아보았습니다. IGListKit은 강력한 기능을 제공하므로 데이터 관리와 UI 업데이트를 쉽게 할 수 있습니다. IGListKit에서 다양한 기능을 추가로 사용해보시기 바랍니다.