[swift] Swift IGListKit을 사용한 컬렉션 뷰 셀 선택상태 관리하기

27 Nov 2023

swift

컬렉션 뷰는 iOS 앱에서 데이터를 표시하기 위해 자주 사용되는 요소 중 하나입니다. IGListKit은 컬렉션 뷰를 관리하기 위한 강력한 도구로, 선택 상태를 관리하는 기능도 제공합니다. 이번 블로그 포스트에서는 Swift IGListKit을 사용하여 컬렉션 뷰 셀의 선택 상태를 관리하는 방법에 대해 알아보겠습니다.

IGListKit이란?

IGListKit은 Instagram에서 개발한 오픈 소스 라이브러리로, 컬렉션 뷰의 데이터 관리를 간소화하고 성능을 최적화할 수 있게 도와줍니다. IGListKit은 데이터의 변경을 추적하고 효율적으로 업데이트하는 기능을 제공하여, 복잡한 컬렉션 뷰 구현을 더욱 쉽게 만들어줍니다.

IGListKit 설치하기

IGListKit은 CocoaPods를 통해 설치할 수 있습니다. Podfile에 다음과 같이 추가한 후 pod install 명령을 실행하세요.

pod 'IGListKit', '~> 3.0'

IGListKit을 사용하여 컬렉션 뷰 구성하기

IGListKit을 사용하여 컬렉션 뷰를 구성하기 위해 세 가지 클래스를 작성해야 합니다.

ListDiffable 프로토콜을 준수하는 데이터 모델
ListSectionController를 상속받는 섹션 컨트롤러
ListAdapter를 사용하여 컬렉션 뷰에 섹션 컨트롤러를 연결하는 클래스

컬렉션 뷰 셀 선택상태 관리하기

IGListKit을 사용하여 컬렉션 뷰 셀의 선택 상태를 관리하기 위해서는 다음의 단계를 따라야 합니다.

데이터 모델에 선택 상태 속성 추가하기
섹션 컨트롤러에서 선택 상태 제어하기
컬렉션 뷰 셀에 선택 상태 표시하기

데이터 모델에 선택 상태 속성 추가하기

먼저, 데이터 모델에 선택 상태를 나타내는 속성을 추가해야 합니다. 예를 들어, 사용자의 프로필을 표시하는 데이터 모델인 UserProfile에 선택 상태를 나타내는 isSelected 속성을 추가해보겠습니다.

class UserProfile: ListDiffable {
    let username: String
    var isSelected: Bool

    // ListDiffable 프로토콜 구현 생략

    init(username: String, isSelected: Bool) {
        self.username = username
        self.isSelected = isSelected
    }
}

섹션 컨트롤러에서 선택 상태 제어하기

다음으로, 섹션 컨트롤러에서 컬렉션 뷰 셀의 선택 상태를 제어해야 합니다. ListSectionController를 상속받은 커스텀 섹션 컨트롤러에서 다음과 같은 메서드를 구현할 수 있습니다.

override func didSelectItem(at index: Int) {
    guard let userProfile = object(at: index) as? UserProfile else { return }
    userProfile.isSelected = true
    update(object: userProfile)
}

위 코드는 사용자가 셀을 선택할 때마다 해당 데이터 모델의 isSelected 속성을 true로 설정하고, 데이터 모델을 업데이트하는 동작을 수행합니다.

컬렉션 뷰 셀에 선택 상태 표시하기

마지막으로, 컬렉션 뷰 셀이 선택 상태를 표시하도록 설정해야 합니다. 이를 위해서는 컬렉션 뷰 셀의 데이터 모델을 이용하여 선택 상태를 결정하고, 이에 따라 UI를 업데이트해야 합니다.

class UserProfileCell: UICollectionViewCell {
    // 셀 UI 요소들 선언

    func configure(with userProfile: UserProfile) {
        // 데이터 모델의 isSelected 속성을 기반으로 UI 업데이트
        if userProfile.isSelected {
            // 선택 상태에 따라 UI 변경
            // 예를 들어, 배경색 변경 등
        } else {
            // 선택되지 않은 상태의 UI 설정
        }
    }
}

위 코드는 configure(with:) 메서드를 이용하여 데이터 모델의 isSelected 속성을 기반으로 셀의 UI를 업데이트합니다. 예를 들어, 선택 상태에 따라 배경색을 변경하거나, 특정 UI 요소를 표시하는 등의 작업을 수행할 수 있습니다.

이제 IGListKit을 사용하여 컬렉션 뷰 셀의 선택 상태를 관리하는 방법을 알아봤습니다. IGListKit을 통해 선택 상태를 관리하면 컬렉션 뷰의 성능을 개선하고 사용자 인터랙션을 더 쉽게 처리할 수 있습니다.

참고 자료

IGListKit 공식 문서: https://instagram.github.io/IGListKit/
IGListKit GitHub 저장소: https://github.com/Instagram/IGListKit