23. Juli 2019

Tutorial: Daten aus einem Swift-Array mit einem UITableViewController anzeigen

Dieses Tutorial für zeigt Schritt für Schritt, wie Daten aus einem Swift-Array mit einem UITableView/UITableViewController zur Anzeige gebracht werden:

  1. Verwende für dieses Tutorial die aktuelle Version von Xcode (dieses Tutorial wurde zuletzt getestet am 24.7.2019 mit Xcode 10.2).

  2. Erstelle mit File » New » Project ⌘⇧N ein neues iOS » Application » Single View Application-Projekt:

    Single View Application erstellen

  3. Nenne das Projekt „Countries“ und wähle als Language Swift:

    Projekteinstellungen Xcode-Projekt
  4. Entferne mit Edit » Delete ⌘⌫ den bestehenden Controller im Storyboard. Entferne zudem die bestehende Quelltextdatei ViewController.swift (bestätige die Lösung mit Move to Trash um die Datei auch aus dem Projektordner zu löschen):

    Bestehenden ViewController entfernen
  5. Erstelle mit File » New » File ⌘N eine neue Cocoa Touch Class. Achte dabei darauf, dass iOS » Source ausgewählt ist, um eine Quelltextdatei für iOS zu erstellen:

    New Cocoa Touch Class
  6. Wähle UITableViewController für Subclass aus und gib als Name „CountriesTableViewController“ an:

    UITableViewController Klasse erstellen
  7. Füge dem Storyboard einen neuen TableViewController hinzu, indem Du in der Objekt Library nach table suchst und einen neuen Table View Controller auf das Storyboard ziehst:

    UITableViewController im Storyboard hinzufügen
  8. Wähle den View-Controller aus und konfiguriere ihn mit Is Initial View Controller als Eintrittspunkt für das Storyboard:

    Set Initial View Controller
  9. Gib die erstellte Klasse als Custom Class für den Controller an:

    Set Initial View Controller
  10. Wähle die Zelle aus. Konfiguriere den Style auf „Basic“ und vergib den Identifier „CountryCell“, um die Zelle später im Code referenzieren zu können:

    Cell: Reuse Identifier
  11. Erstelle mit File » New File… eine neue Swift-Datei Countries.swift und lege hier einige Beispieldaten für die Anzeige in dem Table-View an:

    struct Country {
        
        var iso2 : String
        var name : String
        
        static let allCountries = [
            Country(iso2: "be", name: "Belgien"),
            Country(iso2: "bg", name: "Bulgarien"),
            Country(iso2: "el", name: "Griechenland"),
            Country(iso2: "lt", name: "Litauen"),
            Country(iso2: "pt", name: "Portugal")
        ]
        
    }
  12. Öffne CountriesTableViewController.swift, deklariere eine Eigenschaft countries und weise die Liste aller Länder dazu:

    class CountriesTableViewController: UITableViewController {
    
        let countries = Country.allCountries
        
        override func viewDidLoad() {
            super.viewDidLoad()
    
            // ...
        }
        
        // ...
        
    }
  13. Implementiere die Methoden numberOfSections und tableView:numberOfRowsInSection: so dass die korrekte Anzahl der Einträge anhand der Länder-Liste zurückgeliefert wird:

    // MARK: - Table view data source
    
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return countries.count
    }

    Entferne die #warning-Marker der Xcode-Vorlage.
    Tipp: Die Methode numberOfSections kann auch entfallen wenn nur ein Abschnitt benötigt wird.

  14. Ent-kommentiere die Methode tableView:cellForRowAtIndexPath: und implementiere sie so, dass die Zellen gemäß der Listeneinträge befüllt werden:

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CountryCell", for: indexPath)
        
        let country = self.countries[indexPath.row]
    cell.textLabel?.text = country.name
        
        return cell
    }
  15. Entferne den verbleibenden Code in der Klasse.

  16. Starte die App mit Product » Run ⌘R und prüfe, dass die Einträge in der Tabelle angezeigt werden:

    Daten in Tabelle anzeigen