← Zurück zum Blog

Die Standard-Styles von UITableView

Der style, den Sie einem UITableView übergeben, ist die erste Entscheidung über seine Darstellung — und die, die man am leichtesten auf Autopilot trifft. Es ist nur ein Argument bei der Initialisierung, prägt aber den gesamten Charakter des Bildschirms: ob Zeilen von Kante zu Kante laufen, ob Abschnitte als abgerundete Karten erscheinen, wie sich Header beim Scrollen verhalten. Es gibt drei eingebaute Styles. Hier sehen Sie, wie sie tatsächlich aussehen und wann ich welchen verwende.

Vergleich der drei UITableView-Stile nebeneinander: plain (Zeilen über die volle Breite mit einem angehefteten Abschnitts-Header), grouped (Zeilen über die volle Breite in beabstandeten Abschnitten) und insetGrouped (Zeilen in abgerundeten, von den Bildschirmrändern eingerückten Karten)

Alle drei ordnen dieselben Zellen an; was sich ändert, ist der Umgang mit Abschnitten und Rändern. plain ist eine durchgehende Liste. grouped und insetGrouped teilen die Liste in visuell unterscheidbare Abschnitte auf — der Unterschied liegt darin, ob diese Abschnitte die volle Breite einnehmen oder eingerückt mit abgerundeten Ecken erscheinen.

Style plain ↴

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

Die Voreinstellung. Die Zeilen laufen über die volle Breite der Tabelle, und Abschnitts-Header und -Footer sind fixiert — sie bleiben oben stehen, während Sie an ihnen vorbeiscrollen. Das ist der Style für lange, gleichförmige Listen, bei denen der Inhalt im Vordergrund steht: ein Mail-Posteingang, eine Kontaktliste, Suchergebnisse. Wenn Sie einen durchgehenden Strom ähnlicher Zeilen zeigen, greifen Sie zu plain.

Style grouped ↴

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

Abschnitte werden zu visuell unterscheidbaren Blöcken mit Abstand dazwischen, und die Header scrollen mit dem Inhalt weg, statt oben stehen zu bleiben. Die Zeilen nehmen weiterhin die volle Breite ein. So sahen die Einstellungen vor iOS 13 aus, und der Style passt weiterhin, wenn Sie einige klar beschriftete Gruppen haben und keine eingerückten Karten möchten.

Style insetGrouped ↴

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

Mit iOS 13 eingeführt: grouped, aber mit eingerückten Zeilen und abgerundeten Ecken, sodass jeder Abschnitt wie eine Karte auf dem Hintergrund wirkt. Das ist die moderne Einstellungen-Optik und meine Voreinstellung für alles Formularartige — Präferenzen, Konto-Bildschirme, alles mit beschrifteten Feldern in kurzen Gruppen.

Den Stil setzen

Sie wählen den Style einmal, bei der Initialisierung:

let tableView = UITableView(frame: .zero, style: .insetGrouped)

Zwei Dinge sollte man wissen. insetGrouped erfordert iOS 13+, und style ist nach der Initialisierung schreibgeschützt — den Style einer Table View zur Laufzeit umzuschalten, geht nicht. Wenn Sie ihn wechseln müssen, erzeugen Sie die Table View neu oder legen ihn vorab in Ihrem Storyboard/Xib fest.

Jenseits von UITableView

Dieselben drei Darstellungen begegnen Ihnen auch in UIKit und SwiftUI:

  • In SwiftUI: List { … }.listStyle(.plain), .grouped oder .insetGrouped.
  • In einer modernen Liste mit compositional layout: UICollectionLayoutListConfiguration(appearance:) nimmt dieselben .plain / .grouped / .insetGroupedplus .sidebar, das UITableView.Style nicht hat. Wenn Sie Listen-UI mit Collection Views bauen, ist das der Weg. Die Zellenseite davon habe ich in Standard-Content-Konfigurationen für Listen behandelt.

Welchen sollten Sie verwenden?

  • Lange, gleichförmige Liste? plain.
  • Einstellungen oder ein Formular mit gruppierten Feldern? insetGrouped.
  • Gruppierte Abschnitte, aber Sie wollen die klassische Optik über die volle Breite? grouped.

Im Zweifel ist insetGrouped in einer modernen App die sichere, nativ wirkende Voreinstellung.

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