[swift] IGListKit에서 테이블 뷰의 그룹 헤더와 푸터 설정하는 방법

15 Nov 2023

swift

IGListKit은 iOS 개발을 위한 강력한 라이브러리로, 매끄러운 테이블 뷰 구현을 도와줍니다. 이 라이브러리를 사용하여 테이블 뷰의 그룹 헤더와 푸터를 설정하는 방법에 대해 알아보겠습니다.

IGListKit에서 그룹 헤더와 푸터를 설정하려면 다음의 단계를 따르면 됩니다:

1. 그룹 헤더와 푸터 모델 생성하기

첫 번째로, 그룹 헤더와 푸터에 대한 모델을 생성해야 합니다. IGListSectionController를 상속하는 클래스에서 IGListSupplementaryViewSource 프로토콜을 채택하고, IGListCollectionViewDelegateLayout의 supplementaryViewSource() 메서드와 supplementaryViewSource(forSectionController:) 메서드를 구현해야 합니다.

class GroupHeaderFooterModel: NSObject {
    let title: String
    
    init(title: String) {
        self.title = title
        super.init()
    }
}

class GroupHeaderSectionController: IGListSectionController, IGListSupplementaryViewSource {
    private var object: GroupHeaderFooterModel?
    
    override init() {
        super.init()
        supplementaryViewSource = self
    }
    
    // MARK: - IGListSectionController
    
    override func numberOfItems() -> Int {
        return 1
    }
    
    override func sizeForItem(at index: Int) -> CGSize {
        guard let context = collectionContext else { return .zero }
        let width = context.containerSize.width
        return CGSize(width: width, height: 50)
    }
    
    override func cellForItem(at index: Int) -> UICollectionViewCell {
        // 셀 생성 및 설정
        return cell
    }
    
    // MARK: - IGListSupplementaryViewSource
    
    func supportedElementKinds() -> [String] {
        return [UICollectionView.elementKindSectionHeader]
    }
    
    func viewForSupplementaryElement(ofKind elementKind: String, at index: Int) -> UICollectionReusableView {
        // 헤더 뷰 생성 및 설정
        return headerView
    }
    
    func sizeForSupplementaryView(ofKind elementKind: String, at index: Int) -> CGSize {
        // 헤더 뷰 크기 설정
        return CGSize(width: 0, height: 50)
    }
}

2. 그룹 헤더와 푸터를 적용할 섹션 컨트롤러 생성하기

두 번째로, 그룹 헤더와 푸터를 적용할 섹션 컨트롤러를 생성해야 합니다. IGListSectionController를 상속하고, IGListSupplementaryViewSource 프로토콜을 채택한 그룹 헤더와 푸터 모델을 가지고 있어야 합니다.

class MySectionController: IGListSectionController {
    var object: MyModel?
    
    override init() {
        super.init()
        supplementaryViewSource = self
    }
    
    // MARK: - IGListSectionController
    
    override func numberOfItems() -> Int {
        return 1
    }
    
    override func sizeForItem(at index: Int) -> CGSize {
        guard let context = collectionContext else { return .zero }
        let width = context.containerSize.width
        return CGSize(width: width, height: 100)
    }
    
    override func cellForItem(at index: Int) -> UICollectionViewCell {
        // 셀 생성 및 설정
        return cell
    }
}

extension MySectionController: IGListSupplementaryViewSource {
    func supportedElementKinds() -> [String] {
        return [UICollectionView.elementKindSectionHeader, UICollectionView.elementKindSectionFooter]
    }
    
    func viewForSupplementaryElement(ofKind elementKind: String, at index: Int) -> UICollectionReusableView {
        if elementKind == UICollectionView.elementKindSectionHeader {
            // 헤더 뷰 생성 및 설정
            return headerView
        } else {
            // 푸터 뷰 생성 및 설정
            return footerView
        }
    }
    
    func sizeForSupplementaryView(ofKind elementKind: String, at index: Int) -> CGSize {
        if elementKind == UICollectionView.elementKindSectionHeader {
            // 헤더 뷰 크기 설정
            return CGSize(width: 0, height: 50)
        } else {
            // 푸터 뷰 크기 설정
            return CGSize(width: 0, height: 30)
        }
    }
}

3. 그룹 헤더와 푸터 추가하기

마지막으로, 그룹 헤더와 푸터를 추가해야 합니다. IGListAdapterDataSource 프로토콜의 listAdapter(_:viewForSupplementaryElementOfKind:at:for:) 메서드를 구현하여 그룹 헤더와 푸터를 반환해야 합니다.

class MyViewController: UIViewController, IGListAdapterDataSource {
    private lazy var adapter: ListAdapter = {
        let adapter = ListAdapter(updater: ListAdapterUpdater(), viewController: self)
        adapter.dataSource = self
        return adapter
    }()
    
    // 그룹 헤더와 푸터를 설정할 데이터 리스트
    private let data: [Any] = [GroupHeaderFooterModel(title: "Header"), MyModel(), GroupHeaderFooterModel(title: "Footer")]
    
    // MARK: - UIViewController
    
    override func viewDidLoad() {
        super.viewDidLoad()
        adapter.collectionView = collectionView
        adapter.collectionViewDelegate = self
    }
    
    // MARK: - IGListAdapterDataSource
    
    func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
        return data as! [ListDiffable]
    }
    
    func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {
        if object is GroupHeaderFooterModel {
            return GroupHeaderSectionController()
        } else {
            return MySectionController()
        }
    }
    
    func emptyView(for listAdapter: ListAdapter) -> UIView? {
        return nil
    }
    
    func listAdapter(_ listAdapter: ListAdapter, viewForSupplementaryElementOfKind kind: String, at index: Int) -> UICollectionReusableView & ListSupplementaryView {
        return UICollectionReusableView()
    }
}

extension MyViewController: UICollectionViewDelegateFlowLayout {
    // 셀 간격, 여백 등 콜렉션 뷰의 레이아웃을 설정할 수 있습니다.
}

위의 단계를 따라서 IGListKit에서 테이블 뷰의 그룹 헤더와 푸터를 설정할 수 있습니다. IGListKit을 사용하여 매끄러운 테이블 뷰를 구현해보세요!