[swift] Swift IGListKit에서 컬렉션 뷰 확장/축소 처리하기

27 Nov 2023

swift

IGListKit은 Swift 애플리케이션에서 강력한 컬렉션 뷰 관리 도구입니다. 이 도구를 사용하면 컬렉션 뷰의 확장 및 축소 처리를 쉽게 구현할 수 있습니다. 이 글에서는 IGListKit을 사용하여 컬렉션 뷰의 확장/축소 처리를 하는 방법을 알아보겠습니다.

IGListKit 설치하기

먼저, IGListKit을 프로젝트에 설치해야 합니다. IGListKit은 Cocoapods를 통해 설치할 수 있습니다. Podfile에 다음과 같은 내용을 추가한 후 pod install 명령을 실행하세요.

pod 'IGListKit'

IGListKit을 사용한 컬렉션 뷰 확장/축소 처리하기

먼저, UICollectionViewCell을 상속한 새로운 클래스를 만듭니다. 이 클래스는 확장/축소될 컬렉션 뷰 셀의 모양과 동작을 정의합니다.

class ExpandableCell: UICollectionViewCell {
    // 확장/축소될 셀의 UI 요소들을 정의합니다.

    override func awakeFromNib() {
        super.awakeFromNib()

        // 초기화 작업을 수행합니다.
    }

    func configure(with data: YourDataType) {
        // 셀의 데이터를 설정하는 로직을 작성합니다.
    }

    // 셀의 높이를 계산하기 위한 메서드를 작성합니다.
    static func cellHeight(with data: YourDataType) -> CGFloat {
        // 셀의 높이 계산 로직을 작성합니다.
    }
}

UICollectionViewCell을 상속한 셀 클래스를 만들었다면, 이제 IGListKit을 사용하여 컬렉션 뷰를 설정하는 코드를 작성해야 합니다. UICollectionViewDataSource 프로토콜을 채택한 클래스에서 아래와 같이 컬렉션 뷰 설정 코드를 작성하세요.

class YourViewController: UIViewController, UICollectionViewDataSource {
    let adapter: ListAdapter = ListAdapter(updater: ListAdapterUpdater(), viewController: self)

    // ...

    override func viewDidLoad() {
        super.viewDidLoad()

        // ...

        adapter.collectionView = collectionView
        adapter.dataSource = self
    }

    // ...

    // 확장/축소할 섹션의 개수를 설정하는 메서드를 작성합니다.
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        // 확장/축소할 섹션의 개수를 반환합니다.
    }

    // 섹션의 아이템 개수를 설정하는 메서드를 작성합니다.
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // 섹션의 아이템 개수를 반환합니다.
    }

    // 셀을 생성하는 메서드를 작성합니다.
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // 셀을 생성하고 데이터를 설정한 후 반환합니다.
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ExpandableCell", for: indexPath) as! ExpandableCell
        let data = // 셀에 표시할 데이터를 가져옵니다.
        cell.configure(with: data)
        return cell
    }

    // 컬렉션 뷰의 헤더/푸터 뷰를 설정하는 메서드를 작성합니다.
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        // 헤더/푸터 뷰를 생성하고 반환합니다.
    }

    // ...

    // 컬렉션 뷰의 셀 크기를 설정하는 메서드를 작성합니다.
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // 셀의 크기를 설정합니다.
        let data = // 셀에 표시할 데이터를 가져옵니다.
        return CGSize(width: collectionView.bounds.width, height: ExpandableCell.cellHeight(with: data))
    }
}

마지막으로, 확장/축소 처리의 로직을 구현해야 합니다. 이 로직은 IGListAdapterDelegate 프로토콜을 채택한 클래스에 작성해야 합니다.

class YourListAdapterDelegate: NSObject, ListAdapterDelegate {
    // ...

    // 셀이 선택되었을 때 호출되는 메서드를 작성합니다.
    func listAdapter(_ listAdapter: ListAdapter, didSelect sectionController: ListSectionController) {
        // 셀이 선택되었을 때의 동작을 구현합니다.
    }

    // 셀의 크기가 변경되었을 때 호출되는 메서드를 작성합니다.
    func listAdapter(_ listAdapter: ListAdapter, didChange size: CGSize, at sectionController: ListSectionController) {
        // 셀의 크기가 변경되었을 때의 동작을 구현합니다.
    }

    // ...
}

위의 단계를 따라 IGListKit을 사용하여 컬렉션 뷰의 확장/축소 처리를 구현할 수 있습니다. IGListKit을 사용하면 컬렉션 뷰 관리에 대한 많은 부분을 간편하게 처리할 수 있으므로, 프로젝트에 IGListKit을 도입하는 것을 고려해보세요.

참고 자료

IGListKit 공식 문서: https://github.com/Instagram/IGListKit