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

> Learn to configure cells headers and footers for SectionKit sections using SKCSingleTypeSection and SKConfigurableView for automatic view management and size calculation.

- Repository: [神奇/sectionkit](https://github.com/linhay/sectionkit)
- Tags: how-to-guide
- Published: 2026-03-06

---

**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`](https://github.com/linhay/sectionkit/blob/main/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.

```swift
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`](https://github.com/linhay/sectionkit/blob/main/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.

```swift
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`](https://github.com/linhay/sectionkit/blob/main/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

```swift
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`](https://github.com/linhay/sectionkit/blob/main/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`](https://github.com/linhay/sectionkit/blob/main/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.