The right way to create reusable views for contemporary assortment views?

Reusable views inside a generic cell

All of us like to create customized views for constructing numerous consumer interface components, proper? We additionally love to make use of assortment views to show information utilizing a grid or a listing structure. Assortment view cells are customized views, however what if you would like to make use of the very same cell as a view?

Seems which you can present your personal UIContentConfiguration, similar to the built-in ones that you should use to setup cells to seem like record gadgets. In the event you check out the fashionable assortment views pattern code, which I extremely advocate, you will see find out how to implement customized content material configurations as a way to create your personal cell sorts. There are some things that I do not like about this strategy. 😕

To begin with, your view has to evolve to the UIContentView protocol, so it’s important to deal with extra config associated stuff contained in the view. I choose the MVVM sample, so this feels a bit unusual. The second factor that you simply want is a customized cell subclass, the place you additionally should care for the configuration updates. What if there was another approach?

Let’s begin our setup by creating a brand new subclass for our future cell object, we’re merely going to supply the same old initialize methodology that I all the time use for my subclasses. Apple usually calls this methodology configure of their samples, however they’re kind of the identical. 😅

import UIKit

open class CollectionViewCell: UICollectionViewCell {
        
    @out there(*, unavailable)
    non-public override init(body: CGRect) {
        tremendous.init(body: body)
        
        self.initialize()
    }

    @out there(*, unavailable)
    public required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder) isn not out there")
    }
    
    open func initialize() {
        
    }

}

All proper, that is only a primary subclass so we do not have to cope with the init strategies anymore. Let’s create another subclass based mostly on this object. The ReusableCell kind goes to be a generic kind, it will have a view property, which goes to be added as a subview to the contentView and we additionally pin the constraints to the content material view.

import UIKit

open class ReusableCell<View: UIView>: CollectionViewCell {
    
    var view: View!

    open override func initialize() {
        tremendous.initialize()

        let view = View()
        view.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(view)
        self.view = view
        
        NSLayoutConstraint.activate([
            view.topAnchor.constraint(equalTo: contentView.topAnchor),
            view.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            view.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            view.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
        ])
    }
}

Through the use of this reusable cell kind, it will be doable so as to add a customized view to the cell. We simply have to create a brand new customized view, however that is fairly a simple activity to do. ✅

import UIKit

extension UIColor {

    static var random: UIColor {
        .init(crimson: .random(in: 0...1),
              inexperienced: .random(in: 0...1),
              blue: .random(in: 0...1),
              alpha: 1)
    }
}

class CustomView: View {

    let label = UILabel(body: .zero)

    override func initialize() {
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 0
        addSubview(label)
        
        
        backgroundColor = .random

        NSLayoutConstraint.activate([
            
            label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
            label.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
            label.topAnchor.constraint(equalTo: topAnchor, constant: 8),
            label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8),
        ])
    }

}

This tradition view has a label, which we will pin to the superview with some additional padding. You possibly can retailer all of your subviews as robust properties, since Apple goes to care for the deinit, although the addSubview creates a robust reference, you do not have to fret about it anymore.

If you wish to create a cell that helps dynamic top, it is best to merely pin the sting structure constraints, however if you would like to make use of a hard and fast top cell you possibly can add your personal top anchor constraint with a relentless worth. You must set a customized precedence for the peak constraint this manner the auto structure system will not break and it is going to have the ability to fulfill all the required constraints.

Compositional structure fundamentals

The UICollectionViewCompositionalLayout class is a extremely adaptive and versatile structure instrument that you should use to construct fashionable assortment view layouts. It has three major elements which you can configure to show your customized consumer interface components in many various methods.

You mix the elements by increase from gadgets into a bunch, from teams into a bit, and at last right into a full structure,
like on this instance of a primary record structure:

There are many nice sources and tutorials about this subject, so I will not get an excessive amount of into the main points now, however we will create a easy structure that may show full width (fractional structure dimension) gadgets in a full width group, through the use of and estimated top to assist dynamic cell sizes. I suppose that is fairly a typical use-case for many people. We are able to create an extension on the UICollectionViewLayout object to instantiate a brand new record structure. 🙉

extension UICollectionViewLayout {
    static func createListLayout() -> UICollectionViewLayout {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(44))
        let merchandise = NSCollectionLayoutItem(layoutSize: itemSize)
      
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(44))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        let part = NSCollectionLayoutSection(group: group)

        let structure = UICollectionViewCompositionalLayout(part: part)
        return structure
    }
}

Now it’s doable so as to add a collectionView to our view hierarchy contained in the view controller.

class ViewController: UIViewController {

    let collectionView = UICollectionView(body: .zero, collectionViewLayout: .createListLayout())

    override func loadView() {
        tremendous.loadView()

        collectionView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(collectionView)
        NSLayoutConstraint.activate([
            view.topAnchor.constraint(equalTo: collectionView.topAnchor),
            view.bottomAnchor.constraint(equalTo: collectionView.bottomAnchor),
            view.leadingAnchor.constraint(equalTo: collectionView.leadingAnchor),
            view.trailingAnchor.constraint(equalTo: collectionView.trailingAnchor),
        ])
    }

    override func viewDidLoad() {
        tremendous.viewDidLoad()

    }
}

It’s also possible to create your personal auto structure helper extensions, or use SnapKit to shortly setup your structure constraints. It’s comparatively simple to work with anchors, it is best to learn my different tutorial about mastering auto structure anchors if you do not know a lot about them.

Cell registration and diffable information supply

Apple has a new set of APIs to register and dequeue cells for contemporary assortment views. It’s value to say that just about every thing we discuss this tutorials is simply out there on iOS14+ so if you’re planning to assist an older model you will not have the ability to use these options.

If you wish to be taught extra concerning the subject, I would prefer to advocate an article by Donny Wals and there’s a nice, however a bit longer submit by John Sundell about fashionable assortment views. I am utilizing the identical helper extension to get a cell supplier utilizing a cell registration object, to make the method extra easy, plus we will want some random sentences, so let’s add a number of helpers. 💡

extension String {
    static func randomWord() -> String {
        (0..<Int.random(in: 1...10)).map { _ in String(format: "%c", Int.random(in: 97..<123)) }.joined(separator: "")
    }

    static func randomSentence() -> String {
        (0...50).map { _ in randomWord() }.joined(separator: " ")
    }
}


extension UICollectionView.CellRegistration {

    var cellProvider: (UICollectionView, IndexPath, Merchandise) -> Cell {
        { collectionView, indexPath, product in
            collectionView.dequeueConfiguredReusableCell(utilizing: self, for: indexPath, merchandise: product)
        }
    }
}

Now we will use the brand new UICollectionViewDiffableData class to specify our sections and gadgets inside the gathering view. You possibly can outline your sections as an enum, and on this case we will use a String kind as our gadgets. There’s a nice tutorial by AppCoda about diffable information sources.

Lengthy story brief, it is best to make a brand new cell configuration the place now you should use the ReusableCell with a CustomView, then it’s doable to setup the diffable information supply with the cellProvider on the cellRegistration object. Lastly we will apply an preliminary snapshot by appending a brand new part and our gadgets to the snapshot. You possibly can replace the information supply with the snapshot and the great factor about is it which you can additionally animate the modifications if you need. 😍

enum Part {
    case `default`
}

class ViewController: UIViewController {

    let collectionView = UICollectionView(body: .zero, collectionViewLayout: .createListLayout())
    var dataSource: UICollectionViewDiffableDataSource<Part, String>!
    let information: [String] = (0..<10).map { _ in String.randomSentence() }

    override func loadView() {
        tremendous.loadView()

        collectionView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(collectionView)
        NSLayoutConstraint.activate([
            view.topAnchor.constraint(equalTo: collectionView.topAnchor),
            view.bottomAnchor.constraint(equalTo: collectionView.bottomAnchor),
            view.leadingAnchor.constraint(equalTo: collectionView.leadingAnchor),
            view.trailingAnchor.constraint(equalTo: collectionView.trailingAnchor),
        ])
    }

    override func viewDidLoad() {
        tremendous.viewDidLoad()

        collectionView.delegate = self

        createDataSource()
        applyInitialSnapshot()
    }

    func createDataSource() {
        let cellRegistration = UICollectionView.CellRegistration<ReusableCell<CustomView>, String> { cell, indexPath, mannequin in
            cell.view.label.textual content = mannequin
        }

        dataSource = UICollectionViewDiffableDataSource<Part, String>(collectionView: collectionView,
                                                                         cellProvider: cellRegistration.cellProvider)
    }
    
    func applyInitialSnapshot() {
        var snapshot = NSDiffableDataSourceSnapshot<Part, String>()
        snapshot.appendSections([.default])
        snapshot.appendItems(information)
        dataSource.apply(snapshot, animatingDifferences: true)
    }
}

extension ViewController: UICollectionViewDelegate {

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        let merchandise = dataSource.itemIdentifier(for: indexPath)

        print(merchandise ?? "n/a")
    }
}

You continue to should implement a delegate methodology if you would like to deal with cell choice, however fortuitously the diffable information supply has an itemIdentifier methodology to lookup components inside the information supply.

As you possibly can see it is fairly simple to provide you with a generic cell that can be utilized to render a customized view inside a set view. I imagine that the “official” cell configuration based mostly strategy is a little more sophisticated, plus it’s important to write various code if it involves fashionable assortment views.

I’ll replace my unique assortment view framework with these new methods for certain. The brand new compositional structure is far more highly effective in comparison with common move layouts, diffable information sources are additionally wonderful and the brand new cell registration API can also be good. I imagine that the gathering view group at Apple did an incredible job throughout the years, it is nonetheless certainly one of my favourite elements if it involves UIKit improvement. I extremely advocate studying these fashionable methods. 👍