Sectionui

SectionUI Skill

SectionUI (formerly SectionKit) is a powerful, data-driven framework for building complex UICollectionView layouts in Swift. It abstracts away the complexity of UICollectionViewDataSource and UICollectionViewDelegate, allowing you to focus on composable Sections and Cells.

Core Components

1. SKCManager: The central coordinator that manages sections and binds them to the UICollectionView.
2. SKCollectionView: A subclass of UICollectionView optimized for use with SectionUI.
3. SKCSingleTypeSection: A generic section type for displaying a list of identical cells (homogenous data).
4. SKLoadViewProtocol & SKConfigurableView: Protocols that Cells must conform to for automatic registration and configuration.

Reference Documentation

Core Components

• Cell Creation & Configuration - SKLoadViewProtocol, SKConfigurableView, Auto Layout integration, adaptive cells
• Section Management - SKCSingleTypeSection basics, event handling, headers/footers, styling
• Manager & CollectionView - SKCManager, SKCollectionView, SKCollectionViewController

Advanced Features

• Advanced Sections - SKCHostingSection (SwiftUI), SKCAnyViewCell, SKCSectionViewCell (nested sections)
• Reactive Programming - SKPublished, data subscription, prefetch publishers, selection publishers
• Performance Optimization - SKHighPerformanceStore (size caching), prefetching, display times tracking, safe size providers
• Selection Management - SKSelectionProtocol, SKSelectionWrapper, SKCDragSelector (multi-select)
• Pin Functionality - Sticky headers/footers/cells, distance tracking, custom animations
• Scroll Management - SKScrollViewDelegateHandler, SKCDisplayTracker, scroll control
• Layout Plugins - Vertical/horizontal alignment, SKWaterfallLayout, custom attribute plugins
• Decorations - Background decorations, custom decoration views
• Page View Controller - SKPageManager, SKPageViewController, nested scrolling

Examples

• Basic List
• Decorations

Templates

• Adaptive Cell - Template for a cell with self-sizing capabilities.
• Mixed Cells Section - Template for a section managing multiple cell types.
• Section Cell - Template for a standard configurable cell.

Quick Start Guide

1. Basic Setup

Use SKCollectionViewController or SKCollectionView to get started quickly.

class MyViewController: SKCollectionViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // Setup sections here
        manager.reload(mySection)
    }
}

2. Creating a Cell

Cells must conform to SKLoadViewProtocol and SKConfigurableView:

class MyCell: UICollectionViewCell, SKLoadViewProtocol, SKConfigurableView {
    struct Model {
        let title: String
    }

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

    func config(_ model: Model) {
        label.text = model.title
    }
    
    private lazy var label = UILabel()
}

3. Creating a Section

The most common pattern is using wrapperToSingleTypeSection on your Cell type.

let section = MyCell.wrapperToSingleTypeSection()
    .onCellAction(.selected) { context in
        print("Selected: \(context.model)")
    }

section.config(models: [Model1, Model2, ...])
manager.reload(section)

4. Reactive Updates

SectionUI works seamlessly with Combine:

@SKPublished var items: [Model] = []

$items.bind { [weak self] newItems in
    self?.section.config(models: newItems)
}.store(in: &cancellables)

// Or subscribe directly
section.subscribe(models: $items.eraseToAnyPublisher())

Common Usage Patterns

Performance Optimization

section
    .setHighPerformance(.init())
    .highPerformanceID { $0.model.id }

Sticky Headers

section.pinHeader { options in
    options.padding = 16
}

Selection Management

let selectableItems = items.map { SKSelectionWrapper(value: $0) }
section.config(models: selectableItems)

Waterfall Layout

let layout = SKWaterfallLayout()
    .columnWidth(equalParts: 2)
    .heightCalculationMode(.aspectRatio)

SwiftUI Integration

@available(iOS 16.0, *)
let section = SKCHostingSection(
    cell: MySwiftUIView.self,
    models: viewModels
)

Best Practices

• Prefer SKCManager: Always use SKCManager to manipulate sections (reload, insert, delete).
• Fluent Configuration: Use the chainable generic methods on SKCSingleTypeSection (onCellAction, setSectionSeparators, etc.) instead of subclassing whenever possible.
• Decomposition: Break complex lists into multiple small Sections.
• Use Reactive Binding: Leverage Combine and SKPublished for automatic UI updates.
• Cache Sizes: Use SKHighPerformanceStore for complex Auto Layout calculations.
• Weak References: Always use [weak self] in closures to avoid retain cycles.
• Naming Convention: When declaring a UICollectionView variable, use sectionView as the variable name instead of collectionView.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.