CompositionalLayoutBuilder
gives you the ability to "compose" a UICollectionViewCompositionalLayout
/NSCollectionViewCompositionalLayout
via result builders syntax.
It can be used in any context you might use a UICollectionView
/NSCollectionView
, including another package of mine: CollectionView
(which will come pre-packaged with initializers that use the layout builders).
To add CompositionalLayoutBuilder
to an Xcode project, go to File
> Add Package Dependencies...
, and paste https://github.com/edonv/CompositionalLayoutBuilder
into the Search field.
To add it manually to a Swift Package, add the following to the dependencies
property in the Package.swift
file:
.package(
url: "https://github.com/edonv/CompositionalLayoutBuilder",
upToNextMajor(from: "0.0.0")
)
With CompositionalLayoutBuilder
:
let layout: CompositionalLayout = {
CompositionalLayout {
CompositionalSection {
CompositionalGroup(.horizontal, width: .fractionalWidth(1), height: .absolute(200)) {
LayoutGroup(.vertical, width: .fractionalWidth(0.75), height: .fractionalHeight(1)) {
LayoutItem(width: .fractionalWidth(1), height: .fractionalHeight(0.5))
.repeating(count: 2)
}
.interItemSpacing(.fixed(8))
CompositionalItem(width: .fractionalWidth(0.25), height: .fractionalHeight(1))
}
.interItemSpacing(.fixed(16))
}
CompositionalSection {
CompositionalGroup(.horizontal, width: .fractionalWidth(1), height: .absolute(100)) {
CompositionalItem(width: .fractionalWidth(0.5), height: .fractionalHeight(1))
}
}
.orthogonalScrollingBehavior(.continuous)
}
.scrollDirection(.vertical)
}()
With vanilla UICollectionViewCompositionalLayout
:
let layout: UICollectionViewCompositionalLayout = {
UICollectionViewCompositionalLayout { section, _ in
switch section {
case 0:
let innerItem = NSCollectionLayoutItem(layoutSize: .init(
widthDimension: .fractionalWidth(1),
heightDimension: .fractionalHeight(0.5)
))
let innerGroup = NSCollectionLayoutGroup.vertical(
layoutSize: .init(
widthDimension: .fractionalWidth(0.75),
heightDimension: .fractionalHeight(1)
),
subitem: innerItem,
count: 2
)
innerGroup.interItemSpacing = .fixed(8)
let outerItem = NSCollectionLayoutItem(layoutSize: .init(
widthDimension: .fractionalWidth(0.25),
heightDimension: .fractionalHeight(1)
))
let mainGroup = NSCollectionLayoutGroup.horizontal(
layoutSize: .init(
widthDimension: .fractionalWidth(1),
heightDimension: .absolute(200)
),
subitems: [innerGroup, outerItem]
)
return .init(group: mainGroup)
case 1:
let innerItem = NSCollectionLayoutItem(layoutSize: .init(
widthDimension: .fractionalWidth(0.5),
heightDimension: .fractionalHeight(1)
))
let mainGroup = NSCollectionLayoutGroup.horizontal(
layoutSize: .init(
widthDimension: .fractionalWidth(1),
heightDimension: .absolute(100)
),
subitems: [innerItem]
)
let section = NSCollectionLayoutSection(group: mainGroup)
section.orthogonalScrollingBehavior = .continuous
return section
default:
return nil
}
}
}()
Documentation can be found here, hosted on Swift Package Index.
- Add equivalent UIKit code to README for comparison.