UITableView im Griff – Teil 2

Liste um Sections ergänzen

Im ersten Teil dieser Artikelreihe haben wir uns mit der grundlegenden Erstellung von Table-Views mithilfe von Storyboards beschäftigt. In diesem zweiten Teil setzen wir uns mit den sogenannten Sections auseinander. Die erlauben es uns, die Zellen innerhalb einer Table-View in unterschiedliche Gruppen zu unterteilen. Standardmäßig besitzt jede Table-View genau eine solche Section, in der alle Zellen landen und angezeigt werden. Eine Table-View kann aber alternativ eine beliebige Anzahl solcher Sections besitzen.

Anzahl der Sections definieren

Möchte man mehr als eine Section in einer Table-View nutzen, muss man zunächst die Methode numberOfSections(in:) des UITableViewDataSource-Protokolls implementieren. Die wird – analog zu den aus dem ersten Teil dieser Artikelreihe bekannten Methoden tableView(_:numberOfRowsInSection:) und tableView(_:cellForRowAt:) – automatisch durch die Table-View auf ihrem Data Source aufgerufen, sobald die Table-View geladen und erstellt wird.

numerOfSections(in:) dient dazu, die Anzahl der Sections für eine Table-View festzulegen. Dazu gibt man als Rückgabewert der Methode eben jene gewünschte Anzahl als Integer zurück. Als Parameter erhält man durch die Methode die Table-View, die nach jener Section-Anzahl fragt. Die auszuwerten ist aber nur dann relevant, falls der Data Source als Quelle für mehr als eine Table-View dient, was eher nicht die Regel ist. In jedem anderen Fall kann der Table-View-Parameter getrost ignoriert werden.

Zellen anpassen

Definiert man mehr als seine Section für eine Table-View, wird man in der Regel aber auch die Implementierung der bereits bekannten Data Source-Methoden tableView(_:numberOfRowsInSection:) und tableView(_:cellForRowAt:) anpassen müssen.

Erstere definiert die Anzahl der Zellen innerhalb einer Section. Dazu erhält man als Parameter neben der Table-View den Index der Section, für die die Table-View die entsprechende Zellenanzahl erfragt. Wie oft diese Methode aufgerufen wird, hängt von der zuvor definierten Section-Anzahl ab. Die erste Section entspricht dem Index 0, die zweite dem Index 1 und so weiter.

Ebenso wird man diese Section-Information auch in der zweiten genannten Methode tableView(_:cellForRowAt:) auswerten müssen. Dazu nutzt man den als Parameter übergebenen Index-Path. Während man mittels der row-Property auf den Index der zu kreierenden Zelle zugreift, liefert die section-Property den zugehörigen Section-Index zurück.

Praktische Umsetzung

Nach der Theorie folgt an dieser Stelle die Praxis. Anhand eines kleinen Beispiels demonstriere ich euch die Konfiguration zweier Sections in einer Table-View. Basis für die Zellen sind zwei Arrays. firstSectionElements liefert die Titel für die Zellen der ersten Section, secondSectionElements die für die zweite. Entsprechend wird der Data Source implementiert. Die Methode numberOfSections(in:) liefert 2 zurück, um zu signalisieren, dass die Table-View in zwei Sections unterteilt werden soll. tableView(_:numberOfRowsInSection:) und tableView(_:cellForRowAt:) werten den Section-Parameter aus und liefern entsprechend die passenden Inhalte.

Übrigens: Der verwendete Zell-Identifier BasicCell stammt aus dem ersten Teil dieser Artikelreihe. Damit das Code-Beispiel funktioniert, muss also eine entsprechende Projektkonfiguration erfolgen wie in jenem Artikel beschrieben.

class ViewController: UIViewController, UITableViewDataSource {
    
    private let firstSectionElements = ["Thomas", "Mark", "Tobias"]
    
    private let secondSectionElements = ["Michaela", "Sabine"]
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        switch section {
        case 0:
            return firstSectionElements.count
        case 1:
            return secondSectionElements.count
        default:
            return 0
        }
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let basicCell = tableView.dequeueReusableCell(withIdentifier: "BasicCell", for: indexPath)
        if indexPath.section == 0 {
            let cellContent = firstSectionElements[indexPath.row]
            basicCell.textLabel?.text = cellContent
        } else if indexPath.section == 1 {
            let cellContent = secondSectionElements[indexPath.row]
            basicCell.textLabel?.text = cellContent
        }
        return basicCell
    }
    
}

Wundert euch übrigens nicht, falls das Ergebnis bei Ausführung dieses Code-Beispiels unscheinbar erscheint und alle Zellen schlicht untereinander aufgeführt werden, ohne dass eine Trennung nach Sections ersichtlich ist. Das hängt damit zusammen, das wir weder einen Titel für die Sections gesetzt haben noch einen alternativen Style der Table-View verwenden, bei dem die logische Trennung der Sections sichtbar wird. Dazu kommen wir noch. 🙂

Euer Thomas

Weitere Artikel dieser Reihe

• Teil 1: Einfache Table-Views erstellen: http://letscode.thomassillmann.de/uitableview-im-griff-teil-1/