[swift] Swift IGListKit을 사용한 컬렉션 뷰 셀 이동 처리하기

27 Nov 2023

swift

IGListKit은 iOS 개발에 도움을 주는 강력한 라이브러리입니다. 이번 글에서는 IGListKit을 사용하여 컬렉션 뷰 셀의 이동을 처리하는 방법에 대해 알아보겠습니다.

1. IGListKit 소개

IGListKit은 Facebook에서 개발한 오픈소스 라이브러리로, 컬렉션 뷰를 좀 더 쉽게 처리할 수 있도록 도와줍니다. IGListKit은 데이터 소스와 섹션 컨트롤러라는 개념을 도입하여, 데이터와 뷰의 관계를 단순화하고 유지보수성을 높여줍니다.

2. 컬렉션 뷰 셀 이동 처리하기

컬렉션 뷰 셀을 이동하기 위해서는 IGListKit의 IGListBindingSectionController를 사용해야 합니다. 이 클래스는 컬렉션 뷰 셀을 관리하고, 이동 처리를 담당합니다.

먼저, 이동 가능한 섹션 컨트롤러를 생성해야 합니다. 다음은 IGListBindingSectionController를 상속받은 커스텀 섹션 컨트롤러의 예시입니다.

class MySectionController: IGListBindingSectionController<ListDiffable> {

    override init() {
        super.init()
        
        // TODO: 섹션 컨트롤러 설정 및 셀 등록
    }
    
    override func canMoveItem(at index: Int) -> Bool {
        return true
    }
    
    override func moveObject(from sourceIndex: Int, to destinationIndex: Int) {
        // TODO: 이동 처리 로직 구현
    }
    
    override func sizeForItem(at index: Int) -> CGSize {
        // TODO: 셀 크기 반환
    }
    
    override func cellForItem(at index: Int) -> UICollectionViewCell {
        // TODO: 셀 반환
    }
    
}

canMoveItem(at:) 메서드를 오버라이드하여 이동 가능한지 여부를 설정할 수 있습니다. moveObject(from:to:) 메서드를 구현하여 셀 이동 처리 로직을 작성할 수 있습니다.

다음으로, 생성한 커스텀 섹션 컨트롤러를 데이터 소스에 등록합니다. 그리고 컬렉션 뷰의 isUserInteractionEnabled 속성을 true로 설정하여 사용자의 이동 제스처를 활성화합니다.

let sectionController = MySectionController()
adapter.collectionView.delegate = sectionController
adapter.collectionView.isUserInteractionEnabled = true

위 코드에서 adapter는 IGListAdapter 클래스의 인스턴스로, IGListKit의 데이터 관리 및 업데이트를 담당합니다.

3. 추가 동작 구현하기

컬렉션 뷰 셀을 이동하는 것 외에도, 추가적인 동작을 구현할 수 있습니다. 예를 들어, 이동 중인 셀의 배경 색상을 변경하거나, 이동 가능한 영역을 제한할 수 있습니다.

이동 중인 셀의 배경 색상을 변경하기 위해서는 UICollectionViewDelegate 프로토콜의 collectionView(_:didDragItemAt:) 메서드를 구현하면 됩니다.

extension MySectionController: UICollectionViewDelegate {

    override func collectionView(_ collectionView: UICollectionView, didDragItemAt indexPath: IndexPath) {
        let cell = collectionView.cellForItem(at: indexPath)
        cell?.backgroundColor = UIColor.red
    }
    
}

이동 가능한 영역을 제한하기 위해서는 UICollectionViewDelegateFlowLayout 프로토콜의 collectionView(_:layout:targetIndexPathForMoveFromItemAt:toProposedIndexPath:) 메서드를 구현합니다.

extension MySectionController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, targetIndexPathForMoveFromItemAt originalIndexPath: IndexPath, toProposedIndexPath proposedIndexPath: IndexPath) -> IndexPath {
        // TODO: 이동 가능한 영역 제한 로직 구현 및 인덱스패스 반환
    }
    
}

4. 결론

IGListKit을 사용하여 컬렉션 뷰 셀의 이동을 처리하는 방법에 대해 알아보았습니다. IGListKit을 활용하면 좀 더 쉽고 유연하게 컬렉션 뷰를 다룰 수 있습니다. 자세한 내용은 IGListKit 공식 문서를 참고하시기 바랍니다.

이제 이번 포스트를 통해 IGListKit을 사용하여 컬렉션 뷰 셀의 이동을 처리하는 방법을 익히셨습니다. 다음은 여러분이 직접 프로젝트에 적용하고, 다양한 기능과 효과를 추가해보시기 바랍니다.