[swift] Swift IGListKit을 사용한 컬렉션 뷰 셀 밀어내기 처리하기

27 Nov 2023

swift

1. IGListKit 소개

IGListKit은 Instagram에서 개발된 iOS용 컬렉션 뷰 관련 프레임워크로, UICollectionView를 더 쉽게 사용할 수 있도록 도와줍니다. IGListKit은 강력한 데이터 지향 아키텍처를 제공하며, 셀 밀어내기(셀 스와이프) 같은 다양한 기능을 쉽게 구현할 수 있습니다.

2. 컬렉션 뷰 셀 밀어내기 처리하기

IGListKit을 사용하여 컬렉션 뷰에서 셀을 밀어내는 효과를 구현하기 위해서는 몇 가지 단계를 거쳐야 합니다. 이제 각 단계를 자세히 살펴보겠습니다.

단계 1: IGListKit 설치하기

먼저, IGListKit을 프로젝트에 추가해야 합니다. IGListKit을 설치하기 위해 CocoaPods를 사용하는 경우 Podfile에 다음과 같이 추가하고, pod install 명령어를 실행합니다.

pod 'IGListKit'

단계 2: IGListKit을 사용하여 컬렉션 뷰 설정하기

IGListKit을 사용하여 컬렉션 뷰를 설정합니다. 이를 위해 IGListCollectionViewDelegate를 준수하는 클래스를 만들고, 해당 클래스에서 메소드들을 구현합니다.

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

    override func viewDidLoad() {
        super.viewDidLoad()
    
        // collectionView 설정 초기화
        let layout = UICollectionViewFlowLayout()
        collectionView.collectionViewLayout = layout
        collectionView.delegate = self
        
        // IGListCollectionContext와 함께 IGListAdapter 인스턴스 초기화
        let adapter = IGListAdapter(updater: IGListAdapterUpdater(), viewController: self, workingRangeSize: 0)
        adapter.collectionView = collectionView
        adapter.dataSource = self
    }
    
    // 메소드 구현
    // ...
}

단계 3: IGListSwipeActionsDelegate 구현하기

이제 IGListSwipeActionsDelegate를 구현하여 셀 밀어내기 효과를 추가합니다. IGListSwipeActionsDelegate는 IGListAdapterDelegate 프로토콜을 준수하여야 합니다.

extension ViewController: IGListSwipeActionsDelegate {
    func listOfSwipeActionsForItem(at listAdapter: IGListAdapter, sectionController: IGListSectionController, listItem: Any, item: Any, indexPath: IndexPath) -> [IGListSwipeAction]? {
        // 각 셀에 대한 Swipe Actions 배열을 반환합니다.
        // 각 셀마다 사용자 정의 Swipe Action을 구성할 수 있습니다.
    }
    
    func swipeActionsController(_ swipeActionsController: IGListSwipeActionsController, transitionFor action: IGListSwipeAction, swipeable postfix: IGListSwipeable, expansionFrom gesture: UIPanGestureRecognizer) -> IGListSwipeableExpansionStyle {
        // 셀을 밀어낼 때 확장 스타일을 정의합니다.
        // IGListSwipeable 단체에서 제공하는 기본확장 스타일을 사용하거나 사용자 정의 확장 스타일을 정의할 수 있습니다.
    }
}

단계 4: 컬렉션 뷰 셀 스와이프 처리하기

마지막으로, 각 셀에 대한 밀어내기 효과와 관련된 로직을 구현합니다. 이를 위해 IGListBindingSectionController를 확장하여 커스텀 섹션 컨트롤러를 만들고, 해당 컨트롤러를 사용하여 셀을 구성합니다.

class MySectionController: IGListBindingSectionController<MyModel>, IGListBindingSectionControllerDelegate {
  
    override init() {
        super.init()
        self.dataSource = self
        self.delegate = self
    }
    
    // ...
    
    func listBindingSectionController(_ sectionController: IGListBindingSectionController<ListDiffable>, didSwipeCellWith direction: IGListSwipeDirection, itemView: UIView, at indexPath: IndexPath, animated: Bool) {
        // 셀 밀어내기 처리를 위한 로직을 구현합니다.
        // direction과 indexPath를 기반으로 적절한 동작을 수행할 수 있습니다.
    }
}

3. 마무리

이제 IGListKit을 사용하여 컬렉션 뷰에서 셀 밀어내기 효과를 구현할 수 있는 방법을 알아보았습니다. IGListKit은 강력한 기능과 유연성을 제공하므로, 다양한 커스텀화를 할 수 있습니다. 가능한 한 많은 IGListKit 기능들을 살펴보고, 맞춤화된 앱을 개발해보시기 바랍니다.