[swift] IGListKit에서 섹션 헤더와 푸터 구성하는 방법

15 Nov 2023

swift

IGListKit은 iOS 애플리케이션의 리스트 기능을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 이를 통해 섹션 헤더와 푸터를 구성하는 방법을 알아보겠습니다.

섹션 헤더와 푸터 추가하기

ListSectionController 클래스를 상속받은 새로운 클래스를 생성합니다. 이 클래스에서 특정 섹션의 헤더와 푸터를 구성할 수 있습니다.
init 메소드에서 supplementaryViewSource 프로퍼티에 헤더와 푸터에 대한 정보를 제공하는 객체를 할당합니다. IGListKit은 이 객체를 통해 헤더와 푸터를 렌더링합니다.

class MySectionController: ListSectionController {
    
    override init() {
        super.init()
        supplementaryViewSource = self
    }
    
}

// 섹션 헤더와 푸터를 구성하는 객체
extension MySectionController: ListSupplementaryViewSource {
    
    func supportedElementKinds() -> [String] {
        return [UICollectionView.elementKindSectionHeader, UICollectionView.elementKindSectionFooter]
    }
    
    func viewForSupplementaryElement(ofKind elementKind: String, at index: Int) -> UICollectionReusableView {
        // 헤더나 푸터에 대한 뷰를 생성하고 반환합니다.
    }
    
    func sizeForSupplementaryView(ofKind elementKind: String, at index: Int) -> CGSize {
        // 헤더나 푸터에 대한 크기를 반환합니다.
    }
    
}

헤더와 푸터를 추가하려는 섹션의 데이터 모델에 ListDiffable을 준수하는 프로토콜을 구현합니다. 이 프로토콜은 IGListKit에게 데이터 변경을 알려줄 수 있도록 합니다.

class MySectionModel: NSObject, ListDiffable {
    
    let headerText: String
    let footerText: String
    
    init(headerText: String, footerText: String) {
        self.headerText = headerText
        self.footerText = footerText
    }
    
    // IGListKit에게 섹션 데이터의 변경을 알려주는 메소드
    func diffIdentifier() -> NSObjectProtocol {
        return self
    }
    
    // 섹션 데이터를 비교하여 변경사항이 있는지를 판단하는 메소드
    func isEqual(toDiffableObject object: ListDiffable?) -> Bool {
        return self === object
    }
}

viewForSupplementaryElement 메소드에서 헤더나 푸터에 대한 뷰를 생성하고 반환합니다. 필요에 따라 커스텀 뷰를 사용할 수도 있습니다.

func viewForSupplementaryElement(ofKind elementKind: String, at index: Int) -> UICollectionReusableView {
    
    if elementKind == UICollectionView.elementKindSectionHeader {
        let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "HeaderView", for: index) as! HeaderView
        headerView.titleLabel.text = sectionModel.headerText
        return headerView
    } else {
        let footerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionFooter, withReuseIdentifier: "FooterView", for: index) as! FooterView
        footerView.titleLabel.text = sectionModel.footerText
        return footerView
    }
}

sizeForSupplementaryView 메소드에서 헤더나 푸터에 대한 크기를 반환합니다.

func sizeForSupplementaryView(ofKind elementKind: String, at index: Int) -> CGSize {
    if elementKind == UICollectionView.elementKindSectionHeader {
        return CGSize(width: collectionView.frame.width, height: 50)
    } else {
        return CGSize(width: collectionView.frame.width, height: 30)
    }
}

섹션 헤더와 푸터의 사용

IGListKit을 이용해 리스트를 구성하는 IGListAdapter에서 ListSupplementaryViewSource 프로토콜을 준수하는 객체를 설정합니다. 이 객체는 섹션 헤더와 푸터를 구성하는 데 필요한 정보를 제공합니다.

let adapter = ListAdapter(updater: ListAdapterUpdater(), viewController: self)
adapter.collectionView = collectionView
adapter.dataSource = self
adapter.collectionViewDelegate = self
adapter.supplementaryViewSource = self

// ...

extension ViewController: ListSupplementaryViewSource {
    
    func supportedElementKinds() -> [String] {
        return [UICollectionView.elementKindSectionHeader, UICollectionView.elementKindSectionFooter]
    }
    
    func viewForSupplementaryElement(ofKind elementKind: String, at index: Int) -> UICollectionReusableView {
        // 헤더나 푸터에 대한 뷰를 생성하고 반환합니다.
    }
    
    func sizeForSupplementaryView(ofKind elementKind: String, at index: Int) -> CGSize {
        // 헤더나 푸터에 대한 크기를 반환합니다.
    }
    
}

이제 당신은 IGListKit을 사용하여 섹션 헤더와 푸터를 구성할 수 있습니다. 섹션 헤더와 푸터는 ListSectionController 클래스를 통해 관리되며, ListSupplementaryViewSource 프로토콜을 준수하여 헤더와 푸터에 대한 정보를 제공합니다.

참고 자료

IGListKit - Supplementary Views