JomloCollectionView is a small UIKit package for building section based UICollectionView screens on iOS and tvOS.
It is meant for screens made from mixed sections: a hero banner, a few horizontal shelves, a grid, maybe a list. Each section owns its items, layout, cell configuration, and selection behavior. The view controller stitches those sections into one compositional layout and keeps the diffable data source out of your app code.
If you have used JomloTableView, this is the same idea moved to UICollectionView, with compositional layouts and Swift 6 concurrency rules.
- Section objects that define their own layout, items, cells, and selection handling
UICollectionViewCompositionalLayoutsupport without one large layout switch in the view controller- A diffable data source managed by
JomloCollectionViewController - Layout helpers for hero, shelf, grid, list, and banner sections
- Self configuring cells through
JomloSelfConfiguringCell - Optional cell appearance animations
- Swift 6 language mode with
Sendableand@MainActorannotations - UIKit only, with no external package dependencies
- iOS 17.0 or later
- tvOS 17.0 or later
- Swift 6.0 or later
- Xcode 16.0 or later
Add the package to Package.swift:
dependencies:[.package(url:"https://github.com/setoelkahfi/JomloCollectionView", from:"1.0.0")]In Xcode, use File > Add Package Dependencies and paste the repository URL.
Add this to your Podfile:
pod'JomloCollectionView','~> 1.0'Then run:
pod installDefine an item:
structMovieItem:JomloItem{letid:Stringlettitle:StringletposterColor:StringnonisolatedvaritemIdentifier:String{ id }}Create a cell that knows how to render that item:
finalclassMovieCell:UICollectionViewCell,JomloSelfConfiguringCell{privatelettitleLabel=UILabel()func configure(with item:MovieItem){
titleLabel.text = item.title
}}Put the layout and cell wiring in a section:
@MainActorfinalclassMoviesShelfSection:JomloSection{letidentifier=JomloSectionID("movies")varonReloadNeeded:(@MainActor@Sendable()->Void)?privateletmovies:[MovieItem]init(movies:[MovieItem]){self.movies = movies
}func items()->[anyJomloItem]{
movies
}func layoutSection(
environment:NSCollectionLayoutEnvironment,
sectionIndex:Int)->NSCollectionLayoutSection{JomloLayoutFactory.horizontalShelf()}func cell(
for item:anyJomloItem,
in collectionView:UICollectionView,
at indexPath:IndexPath)->UICollectionViewCell{guardlet movie = item as?MovieItemelse{returnUICollectionViewCell()}return collectionView.dequeueJomloCell(MovieCell.self, for: indexPath, item: movie)}}Then build the screen from sections:
finalclassMoviesViewController:JomloCollectionViewController{overridefunc viewDidLoad(){
super.viewDidLoad()
collectionView.registerJomloCell(MovieCell.self)}}letviewController=MoviesViewController(sections:[
heroSection,
continueWatchingSection,
moviesShelfSection,
categoriesGridSection,])JomloCollectionViewController owns the collection view, builds the compositional layout, applies snapshots, and forwards selection back to the section.
JomloCollectionViewController
- UICollectionViewCompositionalLayout
- UICollectionViewDiffableDataSource
Sections
- provide items
- build layout sections
- dequeue and configure cells
- handle selection
Items
- provide stable identifiers for diffing
- carry the data needed by cells
| Type | What it does |
|---|---|
JomloSection | Defines one section's items, layout, cells, supplementary views, selection, and reload callback |
JomloItem | A Hashable and Sendable view model with a stable itemIdentifier |
JomloSelfConfiguringCell | Lets a cell configure itself from one item type |
JomloCollectionViewController | Hosts the collection view, compositional layout, and diffable data source |
JomloLayoutFactory | Creates common compositional layout sections |
JomloAnimator | Runs optional appearance animations as cells are displayed |
JomloSectionHeaderView | A reusable section header with a title and action button |
| Preset | Use it for |
|---|---|
.hero() | A wide featured item with optional paging |
.horizontalShelf() | A horizontally scrolling row of cards |
.grid(columns:) | A multi column grid |
.list() | A single column vertical list |
.banner() | A full width banner section |
| Animation | Effect |
|---|---|
.fadeIn() | Fades cells in with a staggered delay |
.moveUpWithFade() | Moves cells up while fading them in |
.scaleUp() | Scales cells from a smaller size while fading them in |
You can set an animation per section with displayAnimation, or set a shared JomloAnimator on the view controller.
The Example/ directory contains an Xcode project with iOS and tvOS targets. It builds a streaming style home screen with:
- A featured hero section
- Continue watching shelves with progress indicators
- Poster shelves
- A categories grid
- Section headers with a "See All" action
To run it:
cd Example
open JomloCollectionViewExample.xcodeprojThen choose one of these schemes:
JomloCV Example iOSfor an iPhone or iPad simulatorJomloCV Example tvOSfor an Apple TV simulator
Most cells, models, sections, and view controllers are shared between the targets. The platform specific app entry points live in their own target folders.
| JomloTableView | JomloCollectionView |
|---|---|
JomloTableViewSection | JomloSection |
JomloTableViewRow | JomloItem |
JomloTableViewCell | JomloSelfConfiguringCell |
JomloTableView | JomloCollectionViewController |
populateView(cell:) | configure(with:) |
addSection(section:) | setSections([...]) or appendSection(_:) |
| Class inheritance | Protocol composition |
UITableView | UICollectionViewCompositionalLayout |
The package works best when each section is treated as a small, reusable unit. A section should know how to lay itself out and how to render its items. The screen should only decide which sections appear and in what order.
That keeps the view controller thin, and it makes common product screens easier to change. You can reuse a shelf section with different data, swap a grid from two columns to four, or map server returned section types into local section objects.
Seto Elkahfi - @setoelkahfi
JomloCollectionView is available under the MIT license. See LICENSE for details.
2026 Onde Inference (Splitfire AB)