[swift] IGListKit에서 섹션의 재사용 가능한 헤더와 푸터 사용하는 방법

15 Nov 2023

swift

IGListKit은 iOS 앱에서 유연하고 고성능의 컬렉션 뷰를 구현하기 위한 강력한 프레임워크입니다. IGListKit을 사용하여 섹션의 재사용 가능한 헤더와 푸터를 구현하는 방법을 알아보겠습니다.

1. Header와 Footer 모델 만들기

Header와 Footer 모델을 만들기 위해, IGListHeaderViewModel과 IGListFooterViewModel을 상속한 클래스를 생성합니다. 이 클래스들은 IGListDiffable 프로토콜을 구현해야 합니다.

예를 들어, 다음과 같이 Header 모델을 만들 수 있습니다:

class MySectionHeaderModel: NSObject, IGListHeaderViewModel, IGListDiffable{
    let title: String
    
    init(title: String) {
        self.title = title
    }
    
    func diffIdentifier() -> NSObjectProtocol {
        return title as NSObjectProtocol
    }
    
    func isEqual(toDiffableObject object: IGListDiffable?) -> Bool {
        guard let object = object as? MySectionHeaderModel else {
            return false
        }
        return title == object.title
    }
}

Footer 모델도 동일한 방식으로 만들 수 있습니다.

2. Section Controller 생성하기

섹션 컨트롤러에서는 IGListSectionController를 상속한 클래스를 생성합니다. 이 클래스에서 섹션의 헤더와 푸터를 구현할 수 있습니다.

예를 들어, 다음과 같이 섹션 컨트롤러를 만들 수 있습니다:

class MySectionController: IGListSectionController {
    var headerModel: MySectionHeaderModel?
    var footerModel: MySectionFooterModel?

    override func numberOfItems() -> Int {
        // 섹션에 포함된 아이템 수 반환
    }

    override func cellForItem(at index: Int) -> UICollectionViewCell {
        // 아이템을 위한 셀 반환
    }

    override func sizeForItem(at index: Int) -> CGSize {
        // 아이템의 크기 반환
    }

    override func didUpdate(to object: Any) {
        // 새로운 데이터가 전달될 때 호출되는 메소드
        // 새로운 Header 및 Footer 모델을 설정
    }

    override func didSelectItem(at index: Int) {
        // 아이템 선택 시 호출되는 메소드
    }

    override func sizeForHeader(using _: IGListCollectionContext?) -> CGSize {
        // 헤더 크기 반환
    }

    override func sizeForFooter(using _: IGListCollectionContext?) -> CGSize {
        // 푸터 크기 반환
    }

    override func cellForHeader(at _: Int) -> UICollectionReusableView {
        // 헤더에 해당하는 뷰 반환
    }

    override func cellForFooter(at _: Int) -> UICollectionReusableView {
        // 푸터에 해당하는 뷰 반환
    }

    override func didUpdate(to object: Any) {
        // 새로운 데이터가 전달될 때 호출되는 메소드
        // 새로운 Header 및 Footer 모델을 설정
    }
}

만든 섹션 컨트롤러 객체에서 헤더와 푸터 모델을 설정해야 합니다. 이를 위해 didUpdate(to object: Any) 메소드를 오버라이드합니다.

override func didUpdate(to object: Any) {
    headerModel = object as? MySectionHeaderModel
    footerModel = object as? MySectionFooterModel
}

4. Adapter에 섹션 컨트롤러 등록하기

마지막으로, IGListKit 사용을 위해 IGListAdapter 객체를 생성하고, 섹션 컨트롤러를 등록합니다.

let adapter = IGListAdapter(updater: IGListAdapterUpdater(), viewController: self)
adapter.collectionView = collectionView
adapter.dataSource = self

Section Controller를 등록하기 위해 IGListAdapterDataSource 프로토콜을 구현해야 합니다.

func objects(for listAdapter: IGListAdapter) -> [IGListDiffable] {
    // 섹션에 표시할 모델 배열 반환
}

func listAdapter(_ listAdapter: IGListAdapter, sectionControllerFor object: Any) -> IGListSectionController {
    // 섹션에 해당하는 섹션 컨트롤러 반환
}

func emptyView(for listAdapter: IGListAdapter) -> UIView? {
    // 빈 상태로 표시할 뷰 반환
}

결론

IGListKit을 사용하여 섹션의 재사용 가능한 헤더와 푸터를 구현하는 방법을 알아보았습니다. 위의 단계를 따라하면 섹션 컨트롤러에 헤더와 푸터를 추가할 수 있습니다. IGListKit의 다양한 기능을 활용하여 유연하고 성능이 우수한 컬렉션 뷰를 구현할 수 있습니다.

1. Header와 Footer 모델 만들기

2. Section Controller 생성하기

3. Section Controller에 Header와 Footer 설정하기

4. Adapter에 섹션 컨트롤러 등록하기

결론

참고 자료