So erstellen Sie scrollbare Listen mit protokollorientiertem Design und UICollectionViewCompositionalLayout

Dieser Artikel ist eine Fortsetzung meiner Serie zur Verwendung eines protokollorientierten Ansatzes beim Skalieren von Projekten mit einer großen Codebasis.

Wenn Sie die vorherige Artikel , empfehle ich Ihnen dringend, sich mit den darin enthaltenen Ansätzen und Schlussfolgerungen vertraut zu machen. Kurz gesagt wurde ein Fall mit der Erstellung einer universellen Klasse betrachtet, die die Erstellung eines Konstruktors für die Verwendung von Scroll-Listen basierend auf UICollectionViewFlowLayout ermöglicht.

Die Motivation für diesen Ansatz ist ganz einfach: Wir möchten die Menge an Boilerplate-Code reduzieren, indem wir universelle Tools erstellen, die den Routineaufwand reduzieren, ohne dass die Flexibilität verloren geht.

In diesem Artikel werden wir eine ähnliche Aufgabe weiter betrachten, indem wir UICollectionViewCompositionalLayout , unterstützt von iOS 13+, und sehen Sie, welche Nuancen dieses Framework mit sich bringt.

Wie zuvor werden wir dieses Problem in vier Schritten lösen:

1. Schreiben einer Abstraktion des Datentyps von Scroll-Elementen;
2. Schreiben einer Basisklasse für scrollbare Elemente;
3. Schreiben einer Implementierung für Listen;
4. Anwendungsfälle

1. Abstrakte Scroll-Elemente

Die Schaffung einer Abstraktion ist zweifellos die wichtigste Phase des Designs. Um die Grundlage für ein skalierbares System zu legen, ist es notwendig, von den qualitativen und quantitativen Eigenschaften scrollender Elemente zu abstrahieren. Es ist auch wichtig, die Anforderungen für ein gleichartiges Layout zu erfüllen.

Lassen Sie uns einen solchen Begriff einführen: als Abschnitt. Ein Abschnitt besteht aus einem oder mehreren Elementen mit demselben Layout.

Wir verwenden den Abschnitt als Abstraktion über die scrollbaren Elemente:

 protocol BaseSection { var numberOfElements: Int { get } func registrate(collectionView: UICollectionView) func cell(for collectionView: UICollectionView, indexPath: IndexPath) -> UICollectionViewCell func header(for collectionView: UICollectionView, indexPath: IndexPath) -> UICollectionReusableView func footer(for collectionView: UICollectionView, indexPath: IndexPath) -> UICollectionReusableView func section() -> NSCollectionLayoutSection func select(row: Int) }

Die Verantwortung für die Gestaltung des Layouts übertragen wir in den Absatz. Dort wird auch das Vorhandensein ergänzender Ansichten, wie Kopf- oder Fußzeile, festgelegt.

2. Scrollliste

Die Basisklasse wird als scrollbare Liste verwendet. Die Aufgabe der Basisklasse besteht darin, die abstrakten Daten der BaseSection zu übernehmen und darzustellen. In unserem Fall werden UICollectionView und UICollectionViewCompositionalFlowLayout als Visualisierungstool verwendet:

 class SectionView: UIView { override init(frame: CGRect) { super.init(frame: frame) commonInit() } required init?(coder: NSCoder) { super.init(coder: coder) commonInit() } private func commonInit() { collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight] collectionView.frame = bounds addSubview(collectionView) } private(set) lazy var flowLayout: UICollectionViewCompositionalLayout = { let layout = UICollectionViewCompositionalLayout { [weak self] index, env in self?.sections[index].section() } return layout }() private(set) lazy var collectionView: UICollectionView = { let collectionView = UICollectionView(frame: .zero, collectionViewLayout: flowLayout) collectionView.backgroundColor = .clear collectionView.delegate = self collectionView.dataSource = self return collectionView }() private var sections: [BaseSection] = [] public func set(sections: [BaseSection], append: Bool) { sections.forEach { $0.registrate(collectionView: collectionView) } if append { self.sections.append(contentsOf: sections) } else { self.sections = sections } collectionView.reloadData() } public func set(contentInset: UIEdgeInsets) { collectionView.contentInset = contentInset } } extension SectionView: UICollectionViewDataSource { func numberOfSections(in collectionView: UICollectionView) -> Int { sections.count } func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { sections[section].numberOfElements } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { sections[indexPath.section].cell(for: collectionView, indexPath: indexPath) } func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { kind == UICollectionView.elementKindSectionHeader ? sections[indexPath.section].header(for: collectionView, indexPath: indexPath) : sections[indexPath.section].footer(for: collectionView, indexPath: indexPath) } } extension SectionView: UICollectionViewDelegate { func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { sections[indexPath.section].select(row: indexPath.row) } }

Im Vergleich zur Verwendung von UICollectionViewCompositionalLayout können Sie mit UICollectionViewFlowLayout die Konfiguration des Zellen-, Kopf- und Fußzeilenlayouts von Delegatenmethoden in den Layouttext übertragen.

3. Implementieren von scrollbaren Elementen

Ausgehend von der Tatsache, dass der Abschnitt, der die Möglichkeit zur Anzeige von Fuß- und Kopfzeilen beinhaltet, als Abstraktion betrachtet wurde, ist es notwendig, dies auch in der Implementierungsklasse zu berücksichtigen.

In diesem Fall sehen die Anforderungen für jede Zelle folgendermaßen aus:

 protocol SectionCell: UICollectionViewCell { associatedtype CellData: SectionCellData func setup(with data: CellData) -> Self static func groupSize() -> NSCollectionLayoutGroup } protocol SectionCellData { var onSelect: VoidClosure? { get } } typealias VoidClosure = () -> Void

Die Konfiguration der Zellengröße verlagern wir auf den Zuständigkeitsbereich der Zelle, zudem berücksichtigen wir die Möglichkeit durch Antippen einer beliebigen Zelle eine Aktion zu erhalten.

Die Anforderungen für Kopf- und Fußzeilen sehen folgendermaßen aus:

 protocol SectionHeader: UICollectionReusableView { associatedtype HeaderData func setup(with data: HeaderData?) -> Self static func headerItem() -> NSCollectionLayoutBoundarySupplementaryItem? } protocol SectionFooter: UICollectionReusableView { associatedtype FooterData func setup(with data: FooterData?) -> Self static func footerItem() -> NSCollectionLayoutBoundarySupplementaryItem? }

Basierend auf den Anforderungen an Scroll-Elemente können wir die Implementierung des Abschnitts entwerfen:

 class Section<Cell: SectionCell, Header: SectionHeader, Footer: SectionFooter>: BaseSection { init(items: [Cell.CellData], headerData: Header.HeaderData? = nil, footerData: Footer.FooterData? = nil) { self.items = items self.headerData = headerData self.footerData = footerData } private(set) var items: [Cell.CellData] private let headerData: Header.HeaderData? private let footerData: Footer.FooterData? var numberOfElements: Int { items.count } func registrate(collectionView: UICollectionView) { collectionView.register(Cell.self) collectionView.registerHeader(Header.self) collectionView.registerFooter(Footer.self) } func cell(for collectionView: UICollectionView, indexPath: IndexPath) -> UICollectionViewCell { collectionView .dequeue(Cell.self, indexPath: indexPath)? .setup(with: items[indexPath.row]) ?? UICollectionViewCell() } func header(for collectionView: UICollectionView, indexPath: IndexPath) -> UICollectionReusableView { collectionView .dequeueHeader(Header.self, indexPath: indexPath)? .setup(with: headerData) ?? UICollectionReusableView() } func footer(for collectionView: UICollectionView, indexPath: IndexPath) -> UICollectionReusableView { collectionView .dequeueFooter(Footer.self, indexPath: indexPath)? .setup(with: footerData) ?? UICollectionReusableView() } func section() -> NSCollectionLayoutSection { let section = NSCollectionLayoutSection(group: Cell.groupSize()) if let headerItem = Header.headerItem() { section.boundarySupplementaryItems.append(headerItem) } if let footerItem = Footer.footerItem() { section.boundarySupplementaryItems.append(footerItem) } return section } func select(row: Int) { items[row].onSelect?() } }

Generika, die die Anforderungen dafür implementieren, fungieren als Zellen-, Kopf- oder Fußzeilentypen.

Im Großen und Ganzen ist die Implementierung abgeschlossen, ich möchte jedoch noch ein paar Helfer hinzufügen, die die Menge an Boilerplate-Code weiter reduzieren. Insbesondere wird es in der Praxis nicht immer sinnvoll sein, einen solchen generischen Abschnitt zu haben, aus dem einfachen Grund, dass der Fuß- oder Kopfbereich nicht immer verwendet wird.

Fügen wir hier einen Abschnitt hinzu, der ähnliche Fälle berücksichtigt:

 class SectionWithoutHeaderFooter<Cell: SectionCell>: Section<Cell, EmptySectionHeader, EmptySectionFooter> {} class EmptySectionHeader: UICollectionReusableView, SectionHeader { func setup(with data: String?) -> Self { self } static func headerItem() -> NSCollectionLayoutBoundarySupplementaryItem? { nil } } class EmptySectionHeader: UICollectionReusableView, SectionHeader { func setup(with data: String?) -> Self { self } static func headerItem() -> NSCollectionLayoutBoundarySupplementaryItem? { nil } }

Damit kann der Entwurf als abgeschlossen betrachtet werden. Ich schlage vor, mit den Anwendungsfällen selbst fortzufahren.

4. Anwendungsfälle

Lassen Sie uns einen Abschnitt mit Zellen fester Größe erstellen und auf dem Bildschirm anzeigen:

 class ColorCollectionCell: UICollectionViewCell, SectionCell { func setup(with data: ColorCollectionCellData) -> Self { contentView.backgroundColor = data.color return self } static func groupSize() -> NSCollectionLayoutGroup { let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalWidth(0.5)) let item = NSCollectionLayoutItem(layoutSize: itemSize) let group = NSCollectionLayoutGroup.horizontal(layoutSize: itemSize, subitem: item, count: 2) group.interItemSpacing = .fixed(16) return group } } class ColorCollectionCellData: SectionCellData { let onSelect: VoidClosure? let color: UIColor init(color: UIColor, onSelect: VoidClosure? = nil) { self.onSelect = onSelect self.color = color } }

Lassen Sie uns eine Implementierung der Kopf- und Fußzeile erstellen:

 class DefaultSectionHeader: UICollectionReusableView, SectionHeader { let textLabel: UILabel = { let label = UILabel() label.font = .systemFont(ofSize: 32, weight: .bold) return label }() override init(frame: CGRect) { super.init(frame: frame) commonInit() } required init?(coder: NSCoder) { super.init(coder: coder) commonInit() } private func commonInit() { addSubview(textLabel) textLabel.numberOfLines = .zero textLabel.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ textLabel.topAnchor.constraint(equalTo: topAnchor), textLabel.bottomAnchor.constraint(equalTo: bottomAnchor), textLabel.leftAnchor.constraint(equalTo: leftAnchor), textLabel.rightAnchor.constraint(equalTo: rightAnchor) ]) } func setup(with data: String?) -> Self { textLabel.text = data return self } static func headerItem() -> NSCollectionLayoutBoundarySupplementaryItem? { let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(20)) let header = NSCollectionLayoutBoundarySupplementaryItem( layoutSize: headerSize, elementKind: UICollectionView.elementKindSectionHeader, alignment: .top, absoluteOffset: .zero ) header.pinToVisibleBounds = true return header } } class DefaultSectionFooter: UICollectionReusableView, SectionFooter { let textLabel: UILabel = { let label = UILabel() label.font = .systemFont(ofSize: 12, weight: .light) return label }() override init(frame: CGRect) { super.init(frame: frame) commonInit() } required init?(coder: NSCoder) { super.init(coder: coder) commonInit() } private func commonInit() { addSubview(textLabel) textLabel.numberOfLines = .zero textLabel.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ textLabel.topAnchor.constraint(equalTo: topAnchor), textLabel.bottomAnchor.constraint(equalTo: bottomAnchor), textLabel.leftAnchor.constraint(equalTo: leftAnchor), textLabel.rightAnchor.constraint(equalTo: rightAnchor) ]) } func setup(with data: String?) -> Self { textLabel.text = data return self } static func footerItem() -> NSCollectionLayoutBoundarySupplementaryItem? { let footerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(20)) let footer = NSCollectionLayoutBoundarySupplementaryItem( layoutSize: footerSize, elementKind: UICollectionView.elementKindSectionFooter, alignment: .bottom, absoluteOffset: .zero ) return footer } }

Fügen wir der Scroll-Liste einen neuen Abschnitt hinzu:

 class ViewController: UIViewController { let sectionView = SectionView() override func loadView() { view = sectionView } override func viewDidLoad() { super.viewDidLoad() sectionView.backgroundColor = .white sectionView.set( sections: [ Section<ColorCollectionCell, DefaultSectionHeader, DefaultSectionFooter>( items: [ .init(color: .blue) { print(#function) }, .init(color: .red) { print(#function) }, .init(color: .yellow) { print(#function) }, .init(color: .green) { print(#function) }, .init(color: .blue) { print(#function) } ], headerData: "COLOR SECTION", footerData: "footer text for color section" ) ], append: false ) } }

Insgesamt haben wir mit nur wenigen Codezeilen einen Abschnitt mit 5 mehrfarbigen Zellen mit einer zum Bildschirm proportionalen Größe, einer Kopf- und einer Fußzeile implementiert.

Versuchen wir, einen ähnlichen Ansatz für Zellen mit dynamischer Größe zu verwenden.

 class DynamicCollectionCell: UICollectionViewCell, SectionCell { let textLabel = UILabel() override init(frame: CGRect) { super.init(frame: frame) commonInit() } required init?(coder: NSCoder) { super.init(coder: coder) commonInit() } private func commonInit() { contentView.addSubview(textLabel) textLabel.numberOfLines = .zero textLabel.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ textLabel.topAnchor.constraint(equalTo: contentView.topAnchor), textLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor), textLabel.leftAnchor.constraint(equalTo: contentView.leftAnchor), textLabel.rightAnchor.constraint(equalTo: contentView.rightAnchor) ]) } func setup(with data: DynamicCollectionCellData) -> Self { textLabel.text = data.text return self } static func groupSize() -> NSCollectionLayoutGroup { let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(20)) let item = NSCollectionLayoutItem(layoutSize: itemSize) let group = NSCollectionLayoutGroup.vertical(layoutSize: itemSize, subitems: [item]) return group } } class DynamicCollectionCellData: SectionCellData { let text: String var onSelect: VoidClosure? init(text: String) { self.text = text } } class ViewController: UIViewController { ... override func viewDidLoad() { super.viewDidLoad() ... sectionView.set( sections: [ SectionWithoutHeaderFooter<DynamicCollectionCell>( items: [ .init(text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"), .init(text: "when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."), .init(text: "It was popularised"), .init(text: "the 1960s with the release of Letraset sheets containing"), .init(text: "Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.") ] ), ... ], append: false ) } }

Als Ergebnis müssen wir beim Erstellen von Bildlauflisten auf Basis von UICollectionViewCompositionalLayout keinen Boilerplate-Code mehr schreiben.

Der Quellcode kann eingesehen werden Hier .