CompositionalLayoutDSL, library to simplify the creation of UICollectionViewCompositionalLayout. It wraps the UIKit API and makes the code shorter and easier to read.

Overview

CompositionalLayoutDSL

CompositionalLayoutDSL is a Swift library. It makes easier to create compositional layout for collection view.


Requirements

CompositionalLayoutDSL is written in Swift 5. Compatible with iOS 13.0+, tvOS 13.0+ and macOS 10.15+.

Documentation

An online documentation can be found here.

Getting started

To see some usage of this library you can look to:

  • An example project is available and contains an iOS and a macOS application.
  • The testing target which contains snapshot tests. The tests verify that the DSL behave the same way of using UIKit directly, the snapshot can be found here.

Here some layout examples:

Screenshot for the layout code Layout code

Here an example from the test target: GroupDSLTests.swift (contains the same layout without the DSL)

let layout = CompositionalLayout { section, environment in
    Section {
        HGroup {
            Item(width: .fractionalWidth(1 / 3))
                .contentInsets(trailing: 4)
            VGroup(count: 2) { Item() }
                .width(.fractionalWidth(1 / 3))
                .interItemSpacing(.fixed(8))
                .contentInsets(horizontal: 4)
            VGroup(count: 3) { Item() }
                .width(.fractionalWidth(1 / 3))
                .interItemSpacing(.fixed(8))
                .contentInsets(leading: 4)
        }
        .height(.absolute(100))
        .contentInsets(horizontal: 16)
    }
    .interGroupSpacing(8)
}
.interSectionSpacing(8)

// Apply to a collection view
collectionView.setCollectionViewLayout(layout, animated: false)
// or
collectionView.collectionViewLayout = LayoutBuilder { layout }

Here is an example from the Example project: GettingStartedCompositionalLayout.swift

collectionView.collectionViewLayout = LayoutBuilder {
    Section {
        VGroup(count: 1) { Item() }
            .height(.fractionalWidth(0.3))
            .width(.fractionalWidth(0.3))
            .interItemSpacing(.fixed(8))
    }
    .interGroupSpacing(8)
    .contentInsets(horizontal: 16, vertical: 8)
    .orthogonalScrollingBehavior(.continuous)
    .supplementariesFollowContentInsets(false)
    .boundarySupplementaryItems {
        BoundarySupplementaryItem(elementKind: UICollectionView.elementKindSectionHeader)
            .height(.absolute(30))
            .alignment(.top)
            .pinToVisibleBounds(true)
    }
}

Installation

Cocoapods

To integrate CompositionalLayoutDSL into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'CompositionalLayoutDSL', '~> 0.1.0'

Carthage

To integrate CompositionalLayoutDSL into your Xcode project using Carthage, specify it in your Cartfile:

0.1.0 ">
github "faberNovel/CompositionalLayoutDSL" ~> 0.1.0

Swift Package Manager

CompositionalLayoutDSL can be installed as a Swift Package with Xcode 11 or higher. To install it, add a package using Xcode or a dependency to your Package.swift file:

.package(url: "https://github.com/faberNovel/CompositionalLayoutDSL")

Behind the scene

Here some explanation of how this library work, it can be divided in 3 parts: the role of the core blocks, how does the modifiers works, and how the conversion to the UIKit world is handled

Core structs

This library contains all the core structs for creating a compositional layout, here the exhaustive list:

  • Configuration
  • Section
  • HGroup
  • VGroup
  • CustomGroup
  • Item
  • DecorationItem
  • SupplementaryItem
  • BoundarySupplementaryItem

Each of those building blocks conforms to their respective public protocol and handle the immutable properties of their associated UIKit object.

For example SupplementaryItem conforms to LayoutSupplementaryItem and handles the immutable properties of NSCollectionLayoutSupplementaryItem, which are: layoutSize, elementKind, containerAnchor and itemAnchor.

Those immutable properties can only be changed on those core structs, and are not available globally on LayoutSupplementaryItem. This is the same for all core structs.

Modifiers

Mutable properties of the UIKit objects are handled by the extension of the Layout... protocols. Here some example: contentInset(_:), edgeSpacing(_:), zIndex(_:), interItemSpacing(_:), scrollDirection(_:). Changing those mutable values are done with modifiers, which are internal struct (e.g. ValueModifiedLayoutItem). As those methods provided through extension of the Layout... protocol, their are available for custom elements outside the library.

Something to note is once you applied a modifier for mutable properties you no longer have an Item, but you have a LayoutItem, so changing immutable values will not be possible afterward.

DSL to UIKit Conversion

Finally once we have combined the core structs and the modifiers, the last step is the conversion of the Layout... to the UIKit world. This is done with builders, they all work in a similar way. As an example here how ItemBuilder works:

  • It tries to find a layoutItem conforming to the internal protocol BuildableItem by calling repeatedly .layoutItem .
  • Then it calls makeItem() on the candidate and returns it

⚠️ Warning ⚠️

This means that only internal struct can be converted to a UIKit object, if you try to define a custom LayoutItem and write var layoutItem: LayoutItem { self } like it is done internally, it will cause an infinite loop inside the ItemBuilder.

User of the library needs to base their custom layout on core structs provided by this library.

Credits

CompositionalLayoutDSL is owned and maintained by Fabernovel. You can follow us on Twitter at @Fabernovel.

License

CompositionalLayoutDSL is available under the MIT license. See the LICENSE file for more info.

You might also like...
TinyConstraints is the syntactic sugar that makes Auto Layout sweeter for human use.
TinyConstraints is the syntactic sugar that makes Auto Layout sweeter for human use.

TinyConstraints is the syntactic sugar that makes Auto Layout sweeter for human use. Features Pure Swift 5 sweetness. Everything you can do with Auto

API Calling - Made an app in swift that gets data from Randomuser api and uses it in UITableView
API Calling - Made an app in swift that gets data from Randomuser api and uses it in UITableView

API_Calling Made an app in swift that gets data from Randomuser api and uses it

Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple
Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple

swift-picker-views Inline single and multiple picker views for UIKit. No tablevi

UIKitTest - Xcode, UIKit and Swift playground

UIKit Test Just a Xcode, UIKit and Swift playground (try and learning purposes).

A declarative UIKit for improve layout productivity when developing an iOS application

TifoKit A declarative UIKit for improve layout productivity when developing an iOS application Requirements Min. iOS 11 Swift 5+ Installation Currentl

🌵Declarative UIKit

Viewtiful Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installation Viewtifu

Pocket Trainer UIKit
Pocket Trainer UIKit

Pocket-Trainer-UIKit Помощник для занятий в тренажерном зале API для взаимодействия с базой данных упражнений и первоначальное приложение на Android з

Apple provides us two ways to use UIKit views in SwiftUI

RepresentableKit Apple provides us two ways to use UIKit views in SwiftUI: UIVie

Alura Viagens with UIKit
Alura Viagens with UIKit

Alura Viagens UIKit UITableView Protocolo UITableViewDelegate Constraints para d

Comments
  • Support for diffable data source?

    Support for diffable data source?

    Hi, thanks for this great package to simplifiy the process to setup a collectionview layout. I don't find any information about support of diffable data source. Do you support it or could you do that?

    opened by niklasgrewe 1
  • [Security] Workflow documentation.yml is using vulnerable action actions/checkout

    [Security] Workflow documentation.yml is using vulnerable action actions/checkout

    The workflow documentation.yml is referencing action actions/checkout using references v1. However this reference is missing the commit a6747255bd19d7a757dbdda8c654a9f84db19839 which may contain fix to the some vulnerability. The vulnerability fix that is missing by actions version could be related to: (1) CVE fix (2) upgrade of vulnerable dependency (3) fix to secret leak and others. Please consider to update the reference to the action.

    opened by akulpillai 1
Releases(v0.1.0)
  • v0.1.0(Apr 28, 2021)

    Created

    Structures

    • CompositionalLayout
    • Configuration
    • Section
    • ListSection
    • RawSection
    • HGroup
    • VGroup
    • CustomGroup
    • Item
    • DecorationItem
    • SupplementaryItem
    • BoundarySupplementaryItem

    Enumerations

    • SupplementaryItem.AnchorOffset
    • ListResultBuilder

    Protocols

    • LayoutConfiguration
    • LayoutSection
    • LayoutGroup
    • LayoutItem
    • LayoutDecorationItem
    • LayoutSupplementaryItem
    • LayoutBoundarySupplementaryItem
    • ResizableItem

    Type aliases

    • LayoutItemBuilder
    • LayoutBoundarySupplementaryItemBuilder
    • LayoutSupplementaryItemBuilder
    • LayoutDecorationItemBuilder

    Functions

    • LayoutSectionBuilder(layoutSection:) -> NSCollectionLayoutSection
    • LayoutBuilder(configuration:layoutSection:) -> NSCollectionViewCompositionalLayout
    • LayoutBuilder(configuration:layoutSection:) -> UICollectionViewCompositionalLayout
    • LayoutBuilder(compositionalLayout:) -> NSCollectionViewCompositionalLayout
    • LayoutBuilder(compositionalLayout:) -> UICollectionViewCompositionalLayout

    External extensions

    • NSCollectionView.setCollectionViewLayout(_ layout: CompositionalLayout)
    • UICollectionView.setCollectionViewLayout(_ layout: CompositionalLayout)
    Source code(tar.gz)
    Source code(zip)
    CompositionalLayoutDSL.framework.zip(5.02 MB)
A collection of operators and utilities that simplify iOS layout code.

Anchorage A lightweight collection of intuitive operators and utilities that simplify Auto Layout code. Anchorage is built directly on top of the NSLa

Rightpoint 620 Jan 3, 2023
A simple integrated version of iOS 13 Compositional Layout, modified into a way similar to Functional Programming to generate UICollectionViewCompositionalLayout.

WWCompositionalLayout A simple integrated version of iOS 13 Compositional Layout, modified into a way similar to Functional Programming to generate UI

William-Weng 1 Jul 4, 2022
A project for studying of UICollectionViewCompositionalLayout

UICollectionViewCompositionalLayout A project for studying of UICollectionViewCo

donggyu 7 Jul 3, 2022
An easier and faster way to code Autolayout

EZAnchor 中文介绍 An easier way to code Autolayout Are you annoyed of coding .active = true while using Autolayout Anchors over and over again? Are you an

Alex.Liu 25 Feb 20, 2022
Controls-Practice-UIKit- - Controls Practice (UIKit)

Controls Practice (UIKit) Change a number 0 to 255 different ways: Button (+1) I

null 1 Feb 13, 2022
UIView category which makes it easy to create layout constraints in code

FLKAutoLayout FLKAutoLayout is a collection of categories on UIView which makes it easy to setup layout constraints in code. FLKAutoLayout creates sim

Florian Kugler 1.5k Nov 24, 2022
Using the UIKitChain framework, You can create a UIKit component in one line of code.

Using the UIKitChain framework, You can create a UIKit component in one line of code. Installation CocoaPods CocoaPods is a dependency manager for Coc

Malith Nadeeshan 1 Sep 1, 2022
SuperLayout is a Swift library that makes using Auto Layout a breeze.

SuperLayout is a library that adds a few custom operators to Swift that makes using the amazing NSLayoutAnchor API for Auto Layout a breeze. SuperLayo

Lionheart Software 53 Oct 12, 2022
Library that makes it easy to create multiple environments within a single app. You can switch environments without deleting the application.

AppContainer Library that makes it easy to create multiple environments within a single app. You can switch environments without deleting the applicat

null 8 Dec 15, 2022
Makes building HTTP URLs and requests easy.

ModestProposal 2.0 Makes building HTTP URLs and requests easy. Can be used with any networking library that accepts NSURLRequest as a parameter. Featu

Justin Kolb 10 Jun 3, 2021