[swift] Swift IGListKit에서 컬렉션 뷰 셀 페이지네이션 구현하기

27 Nov 2023

swift

이번에는 IGListKit를 사용하여 Swift로 컬렉션 뷰 셀 페이지네이션을 구현하는 방법에 대해 알아보겠습니다.

IGListKit이란?

IGListKit은 Instagram에서 만든 iOS용 리스트 컨트롤러 프레임워크로, 데이터의 변경사항을 식별하고 효율적으로 화면에 업데이트하는 데 도움이 됩니다. IGListKit은 UICollectionView로 작동하며, 섹션과 셀에 대한 유연한 데이터 소스를 제공하여 데이터 주도 앱을 구축하는 데 도움이 됩니다.

페이지네이션 구현 방법

IGListKit을 사용하여 컬렉션 뷰 셀의 페이지네이션을 구현하는 방법은 다음과 같습니다.

단계 1: IGListKit 설치

프로젝트에 IGListKit를 설치합니다. CocoaPods를 사용하여 설치하는 경우, Podfile에 다음을 추가하고 pod install 명령을 실행합니다.

pod 'IGListKit'

Carthage를 사용하는 경우, Cartfile에 다음을 추가하고 carthage update 명령을 실행합니다.

github "Instagram/IGListKit"

단계 2: UICollectionViewDataSource와 IGListDiffable 사용

페이지네이션을 구현하기 위해 IGListDiffable 프로토콜을 사용하여 UICollectionViewDataSource 메서드를 구현합니다. 이는 IGListKit에서 데이터 변경사항을 추적하기 위해 필요한 메서드입니다.

class MyDataSource: NSObject, UICollectionViewDataSource, IGListDiffable {
    var items: [Any] = []
    
    // IGListDiffable 프로토콜을 구현하는 메서드
    func diffIdentifier() -> NSObjectProtocol {
        return self
    }
    
    func isEqual(toDiffableObject object: IGListDiffable?) -> Bool {
        return true // 항상 true 반환
    }
    
    // UICollectionViewDataSource 메서드
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return items.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath) as! MyCell
        // 셀 설정
        return cell
    }
}

단계 3: 페이지네이션 로직 추가

페이지네이션을 위해 컬렉션 뷰의 스크롤 이벤트를 감지하여 추가 데이터를 로드하고, 이를 DataSource에 추가해주는 로직을 추가합니다.

class MyViewController: UIViewController, UIScrollViewDelegate {
    //...
    
    var dataSource: MyDataSource?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //...
        
        collectionView.dataSource = dataSource
        collectionView.delegate = self
    }
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        let contentHeight = scrollView.contentSize.height
        
        // 스크롤이 끝에 도달했을 때 추가 데이터 로드
        if offsetY > contentHeight - scrollView.frame.size.height {
            // 새로운 데이터 로드
            
            // DataSource의 items에 추가
            dataSource?.items.append(contentsOf: newItems)
            
            // IGListKit을 사용해 컬렉션 뷰에 변경사항을 적용
            adapter.performUpdates(animated: true)
        }
    }
}

위의 예제 코드에서는 scrollViewDidScroll 메서드를 사용하여 사용자가 컬렉션 뷰를 스크롤할 때마다 스크롤의 위치를 체크하고, 끝에 도달했을 때 추가 데이터를 로드하는 로직을 구현하였습니다. 불러온 데이터는 DataSource의 items에 추가되고, IGListKit의 performUpdates 메서드를 호출하여 컬렉션 뷰에 변경사항을 적용합니다.

마무리

이렇게 IGListKit을 사용하여 Swift에서 컬렉션 뷰 셀 페이지네이션을 구현할 수 있습니다. IGListKit은 데이터의 변경사항을 관리하고 업데이트하는 데 큰 도움을 줄 뿐만 아니라, 유지보수가 용이하고 성능이 우수한 앱을 만들 수 있도록 도와줍니다. IGListKit의 다양한 기능과 사용 방법에 대해서는 공식 문서를 참고하시기 바랍니다.