CompositionalLayoutViewController

UICollectionViewCompositionalLayout interface to implement complex collection view layout.

Example

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

Requirements

iOS 13.0+

Installation

CompositionalLayoutViewController is available through CocoaPods. To install
it, simply add the following line to your Podfile:

pod 'CompositionalLayoutViewController'
Ruby

Usage

There are four steps to declare collection view.

Firstly, to compose complex collection view sections, you implement Section class that inherits HashableObject and CollectionViewSection.

class TextFormSection: HashableObject, CollectionViewSection {
    ...
}
Swift

Secondly, implement your sections layout.

func layoutSection(environment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection
Swift

Thirdly, register cells and supplementary views for collection view in func registerCell(collectionView: UICollectionView) and func registerSupplementaryView(collectionView: UICollectionView).

func registerCell(collectionView: UICollectionView) {
    // register cells here
}
Swift
func registerSupplementaryView(collectionView: UICollectionView) {
    // register supplementary views here
}
Swift

Make sure that you implement func supplementaryView(_ collectionView: UICollectionView, kind: String, indexPath: IndexPath) -> UICollectionReusableView?.
You may have to deque UICollectionReusableView from a collection view.

These cells and supplementary views are configured following methods.

func configuredCell(_ collectionView: UICollectionView, indexPath: IndexPath) -> UICollectionViewCell
Swift
func configureSupplementaryView(_ view: UICollectionReusableView, indexPath: IndexPath)
Swift

You also have to declare var snapshotItems: [AnyHashable] in your section class.
This variable contains datas for each cells.

var snapshotItems: [AnyHashable] {
    // return AnyHashable items
}
Swift

Finally, you can declare collection view sections in subclass of CompositionalLayoutViewController as follows:

sections = [
    TextFormSection(
        items: [
            .init(
                initialText: nil,
                textForm: .init(
                    placeholder: "Email",
                    validationHandler: { text in
                        guard let text = text else {
                            return false
                        }
                        return text.isValidEmailAddress()
                    },
                    validationAppearance: .init(
                        textColor: .red
                    )
                )
            ),
            .init(
                initialText: nil,
                textForm: .init(
                    placeholder: "Password",
                    isSecureTextEntry: true
                )
            )
        ]
    ),
    ButtonSection(
        buttonTitle: "Login",
        action: .handler({
            print("Login button pressed")
        })
    )
]
reloadSections()
Swift

And also don't forget to assign SectionProvider that manages an array of sections.

public protocol SectionProvider: AnyObject {
    var sections: [CollectionViewSection] { get }
    func section(for sectionIndex: Int) -> CollectionViewSection
}
Swift
override func viewDidLoad() {
    super.viewDidLoad()
    ...
    provider = // assign your provider e.g. presenter in VIPER
    ...
}
Swift

To handle cell selection, override func didSelectItem(at indexPath: IndexPath) method in subclass of CompositionalLayoutViewController.

See example code to lean advanced usage.

Author

Akira, akira.matsuda@me.com

GitHub

https://github.com/oneinc-jp/CompositionalLayoutViewController