← Zurück zum Blog

Standard-Content-Konfigurationen für Listen in Swift

Eine Liste mit einer Collection View zu bauen, läuft im Kern auf zwei Konfigurationsobjekte hinaus: Das eine bestimmt das Erscheinungsbild des Abschnitts, das andere den Inhalt jeder Zeile. Weil beide „configuration“ im Namen tragen, verwechselt man sie leicht. Deshalb lohnt es sich, sie sauber zu trennen, bevor man sich die Voreinstellungen ansieht.

  • UICollectionLayoutListConfiguration(appearance:) legt den Abschnitt fest — plain, grouped, insetGrouped oder sidebar. Es ist die Collection-View-Entsprechung zu UITableView.Style, ergänzt um sidebar für Source-List-UIs.
  • UIListContentConfiguration legt die Zelle fest — ihre Voreinstellungen (.cell(), .subtitleCell(), .valueCell(), .accompaniedSidebarCell() sowie .header() / .footer() für Supplementary Views) bestimmen, wo Text, Sekundärtext und Bild platziert werden. Üblicherweise beginnen Sie mit cell.defaultContentConfiguration(), das die Voreinstellung zurückgibt, die zum aktuellen Appearance passt.

Zusammenbau einer Liste mit einer collection view: eine list configuration (appearance: plain, grouped, insetGrouped, sidebar) speist eine list section, die ein compositional layout speist, das die collection view antreibt

Die Verdrahtung ist knapp:

// 1. The section appearance
let config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
let layout = UICollectionViewCompositionalLayout.list(using: config)

// 2. The cell content, inside a cell registration
let registration = UICollectionView.CellRegistration<UICollectionViewListCell, Item> { cell, _, item in
    var content = UIListContentConfiguration.valueCell()   // or .cell(), .subtitleCell(), .sidebarCell()…
    content.text = item.title
    content.secondaryText = item.detail
    cell.contentConfiguration = content
}

Die Screenshots unten zeigen die Standard-Presets der Content Configuration — cell, subtitleCell, valueCell und die Header-/Footer-Varianten — in jeder Appearance. So sehen Sie, wie sich dieselben Presets je nach Abschnittsstil verändern.

Appearance plain ↴

Swift-Standard-Listen-Inhaltskonfiguration mit dem Erscheinungsbild plain im Dunkelmodus Swift-Standard-Listen-Inhaltskonfiguration mit dem Erscheinungsbild plain im Hellmodus

Zeilen von Kante zu Kante mit fixierten Abschnitts-Headern — die klassische Alltagsliste. Die Presets hier (cell, subtitleCell, valueCell, plainHeader, plainFooter) sind die, zu denen Sie am häufigsten greifen werden.

Appearance grouped ↴

Swift-Standard-Listen-Inhaltskonfiguration mit dem Erscheinungsbild grouped im Dunkelmodus Swift-Standard-Listen-Inhaltskonfiguration mit dem Erscheinungsbild grouped im Hellmodus

Zeilen über die volle Breite, in Abschnitte mit Abstand gegliedert, mit Headern, die mit dem Inhalt mitscrollen — die klassische Gruppierung im Stil der älteren Einstellungen.

Appearance insetGrouped ↴

Swift-Standard-Listen-Inhaltskonfiguration mit dem Erscheinungsbild insetgrouped im Dunkelmodus Swift-Standard-Listen-Inhaltskonfiguration mit dem Erscheinungsbild insetgrouped im Hellmodus

grouped, aber mit eingerückten Zeilen und abgerundeten Karten — die moderne Einstellungen-Optik und eine gute Voreinstellung für Formulare.

Appearance sidebar ↴

Swift-Standard-Listen-Inhaltskonfiguration mit dem Erscheinungsbild sidebar im Dunkelmodus Swift-Standard-Listen-Inhaltskonfiguration mit dem Erscheinungsbild sidebar im Hellmodus

Die Appearance für Source Lists und Navigations-Sidebars — denken Sie an die Dateien- oder Notizen-Sidebar auf dem iPad: einklappbare Abschnitte und die Presets sidebarCell / sidebarHeader, die kompakter und leichter wirken als ihre plain-Gegenstücke.

Das Quell-Repository habe ich verwendet, um die Fenster in den Bildern oben zu erzeugen.