Reusable views inside a generic cell
All of us like to create customized views for constructing varied person interface parts, 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 individual UIContentConfiguration, identical to the built-in ones that you should use to setup cells to appear like record gadgets. In case you check out the trendy assortment views pattern code, which I extremely suggest, you may see how you can implement customized content material configurations to be able to create your individual cell varieties. There are some things that I do not like about this strategy. 😕
To start with, your view has to adapt to the UIContentView protocol, so you need to deal with extra config associated stuff contained in the view. I desire 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 handle the configuration updates. What if there was another manner?
Let’s begin our setup by creating a brand new subclass for our future cell object, we’re merely going to offer the standard initialize technique that I at all times use for my subclasses. Apple typically calls this technique configure of their samples, however they’re roughly the identical. 😅
import UIKit
open class CollectionViewCell: UICollectionViewCell {
@accessible(*, unavailable)
non-public override init(body: CGRect) {
tremendous.init(body: body)
self.initialize()
}
@accessible(*, unavailable)
public required init?(coder aDecoder: NSCoder) {
fatalError("init(coder) isn not accessible")
}
open func initialize() {
}
}All proper, that is only a primary subclass so we do not have to take care of the init strategies anymore. Let’s create yet another subclass primarily based 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),
])
}
}By utilizing this reusable cell kind, it will be potential 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(purple: .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 further padding. You possibly can retailer all of your subviews as sturdy properties, since Apple goes to handle the deinit, despite the fact that the addSubview creates a powerful reference, you do not have to fret about it anymore.
If you wish to create a cell that helps dynamic top, you must merely pin the sting structure constraints, however if you would like to make use of a hard and fast top cell you’ll be able to add your individual top anchor constraint with a relentless worth. It’s a must to 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 mandatory constraints.
Compositional structure fundamentals
The UICollectionViewCompositionalLayout class is a extremely adaptive and versatile structure software that you should use to construct trendy assortment view layouts. It has three most important parts which you can configure to show your customized person interface parts in many alternative methods.
You mix the parts by build up from gadgets into a gaggle, from teams into a piece, and eventually right into a full structure, like on this instance of a primary record structure:
There are many nice assets 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, by utilizing and estimated top to help dynamic cell sizes. I suppose that is fairly a standard 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 potential 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()
}
}You too can create your individual auto structure helper extensions, or use SnapKit to rapidly setup your structure constraints. It’s comparatively simple to work with anchors, you must 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 price to say that just about the whole lot we discuss this tutorials is barely accessible on iOS14+ so in case you are planning to help an older model you will not be capable of use these options.
If you wish to be taught extra concerning the subject, I would prefer to suggest an article by Donny Wals and there’s a nice, however a bit longer submit by John Sundell about trendy 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 couple 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 quick, you must make a brand new cell configuration the place now you should use the ReusableCell with a CustomView, then it’s potential 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 in order for you. 😍
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 technique if you would like to deal with cell choice, however thankfully the diffable information supply has an itemIdentifier technique to search for parts inside the information supply.
As you’ll be able to see it is fairly simple to give you a generic cell that can be utilized to render a customized view inside a group view. I imagine that the “official” cell configuration primarily based strategy is a little more difficult, plus you need to write numerous code if it involves trendy assortment views.
I will replace my unique assortment view framework with these new methods for positive. The brand new compositional structure is far more highly effective in comparison with common move layouts, diffable information sources are additionally superb and the brand new cell registration API can be good. I imagine that the gathering view staff at Apple did an incredible job throughout the years, it is nonetheless one in all my favourite parts if it involves UIKit improvement. I extremely suggest studying these trendy methods. 👍
