How to Configure Cells, Headers, and Footers for a Section in SectionKit

In SectionKit, you configure headers and footers using the setHeader(_:model:config:) and setFooter(_:model:config:) methods available on SKCSingleTypeSection, which automatically handle view registration, dequeuing, and size calculation through the SKConfigurableView protocol.

SectionKit simplifies UICollectionView section management by treating headers and footers as type-safe supplementary views. Learning how to configure cells, headers, and footers for a section requires implementing a few key protocols and registering your views through the section's dedicated API. The framework handles the underlying UICollectionView plumbing while giving you full control over configuration and visibility.

Understanding Supplementary Views in SectionKit

SectionKit treats section headers and footers as supplementary views rather than cells. The framework identifies these using the SKSupplementaryKind enum defined in Sources/SectionKit/CollectionBase/SKSupplementaryKind.swift, which provides three cases: .header, .footer, and .custom for non-standard supplementary elements.

According to the source code in Sources/SectionKit/CollectionSingleTypeSection/Entities/SKCSingleTypeSection+supplementary.swift, you register these views using three primary APIs:

• setHeader(_:model:config:) – Registers a view for the header kind
• setFooter(_:model:config:) – Registers a view for the footer kind
• set(supplementary:kind:type:model:config:) – Generic method for custom supplementary kinds

Creating a Reusable Header or Footer View

To create a header or footer, define a class that conforms to UICollectionReusableView, SKLoadViewProtocol, and SKConfigurableView. This protocol combination enables SectionKit to instantiate your view, calculate its size, and inject models for configuration.

You must implement static func preferredSize(limit:model:) to provide automatic size calculation based on layout constraints.

class MyHeaderView: UICollectionReusableView,
                    SKLoadViewProtocol,
                    SKConfigurableView {

    typealias Model = String

    private let label = UILabel()

    override init(frame: CGRect) {
        super.init(frame: frame)
        addSubview(label)
        label.snp.makeConstraints { $0.edges.equalToSuperview().inset(16) }
    }

    required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }

    func config(_ model: String) { 
        label.text = model 
    }

    static func preferredSize(limit size: CGSize, model: String?) -> CGSize {
        return CGSize(width: size.width, height: 44)
    }
}

The Example app demonstrates this pattern with HeaderLabel in Example/MainViewController.swift, which follows the same protocol requirements for a production-ready implementation.

Attaching Headers and Footers to a Section

Once your view conforms to the required protocols, attach it to any SKCSingleTypeSection using the registration methods. The setHeader and setFooter helpers in Sources/SectionKit/CollectionSingleTypeSection/Entities/SKCSingleTypeSection+supplementary.swift delegate to the generic set(supplementary:kind:type:model:config:) API, ensuring type safety for your model data.

let section = MenuCell.wrapperToSingleTypeSection(models)

section
    .setHeader(MyHeaderView.self, model: "Section Title") { view in
        view.backgroundColor = .secondarySystemBackground
    }

section
    .setFooter(MyHeaderView.self, model: "End of Section") { view in
        view.backgroundColor = .systemGroupedBackground
    }

The optional configuration closure allows additional UI customization beyond the model injection.

Controlling Visibility and Runtime Access

The core section implementation in Sources/SectionKit/CollectionSingleTypeSection/Entities/SKCSingleTypeSection.swift exposes properties to control visibility and access registered views at runtime.

Automatic hiding when empty:

• hiddenHeaderWhenNoItem – Defaults to true
• hiddenFooterWhenNoItem – Defaults to true

Set these to false if you want headers or footers to remain visible even when the section contains no items.

Runtime access:

• headerView and footerView – Access the currently displayed supplementary view
• headerSize and footerSize – Retrieve the calculated dimensions

section.hiddenHeaderWhenNoItem = false

if let header = section.headerView as? MyHeaderView {
    header.config("Updated Title")
}

let headerHeight = section.headerSize.height

Summary

• SectionKit treats headers and footers as supplementary views identified by the SKSupplementaryKind enum (.header, .footer, .custom) in SKSupplementaryKind.swift.
• Implement three protocols (UICollectionReusableView, SKLoadViewProtocol, SKConfigurableView) and provide preferredSize(limit:model:) for automatic sizing.
• Register views using setHeader(_:model:config:) or setFooter(_:model:config:) from SKCSingleTypeSection+supplementary.swift.
• Control visibility with hiddenHeaderWhenNoItem and hiddenFooterWhenNoItem, and access live views via headerView and footerView.
• All registration is type-safe and lazy, with SectionKit handling UICollectionView registration, dequeuing, and lifecycle callbacks automatically.

Frequently Asked Questions

What protocols must a view implement to work as a section header in SectionKit?

A header or footer view must conform to UICollectionReusableView, SKLoadViewProtocol, and SKConfigurableView. The SKConfigurableView protocol requires a config(_:) method to receive your model data and a static preferredSize(limit:model:) method to calculate dimensions for the UICollectionView layout.

How does SectionKit determine the size of headers and footers?

SectionKit calls the static method preferredSize(limit:model:) defined on your view class conforming to SKConfigurableView. This method receives the available container size and the optional model instance, allowing you to return a dynamic or fixed CGSize based on your content requirements.

Can I keep a header visible when a section has no items?

Yes. Set the hiddenHeaderWhenNoItem property to false on your section instance. By default, both hiddenHeaderWhenNoItem and hiddenFooterWhenNoItem are true in SKCSingleTypeSection.swift, which automatically hides supplementary views when the section's item count is zero.

How do I access or modify a header view after it has been displayed?

Access the currently displayed header or footer through the headerView and footerView properties on SKCSingleTypeSection. These return optional UIView instances that you can cast to your specific view type to call custom methods or update the configuration dynamically.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}