Erstellen einer Stateful TableView für iOS


Verschiedene Zustände von UITableView

Es ist ziemlich offensichtlich, dass wir beim Laden von Daten für a häufig mit den folgenden Zuständen konfrontiert werden UITableView.

  1. Daten sind für die Tabellenansicht verfügbar.
  2. Die Daten wurden erfolgreich geladen, aber die Liste ist leer.
  3. Die Serverseite hat unerwartet aufgelegt (😇 Ich bin an der Reihe, aufzumuntern).
  4. Die Anwendung konnte den Server nicht erreichen. Auszeit anfordern (⏱).
  5. Überhaupt keine Internetverbindung.
  6. Jeder andere unbekannte Fehler (🤔).

In meinen letzten beiden Projekten bin ich ihnen oft begegnet. Wie üblich habe ich versucht, eine eigene Lösung zu finden. Dies führte dazu, dass ich meine allererste erstellte Schote Bibliothek. Das hört sich wirklich gut an (💪).

Eine leichte Hülle darüber UITableView:

Ich habe das Problem endlich gelöst, nachdem ich einen Wrapper erstellt habe UITableView. Es ist im Grunde eine Unterklasse von UITableView mit ein paar Dienstprogrammen, um die richtige Nachricht anzuzeigen, abhängig von den Zuständen der oben erwähnten Tabellenansicht.

Wie man anfängt ?

Erstellen Sie ein Einzelansichtsprojekt mit Xcode und installieren Sie die folgende Pod-Bibliothek mit cocoapods. Wenn während der Installation wiederholt der folgende Fehler auftritt pod init

-bash: /usr/local/bin/pod: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory

Sie müssen Pods erneut installieren macOS HighSierra verwenden

sudo gem install cocoapods`

Jetzt einschließen SDStateTableView in deiner Podfile.

pod 'SDStateTableView'

Nachdem Sie die Installation mit abgeschlossen haben pod install Befehl, müssen Sie die öffnen .xcworkspace Datei auf Xcode.

Wenn bei der Installation des Pods Probleme auftreten, können Sie das Starter-Projekt von herunterladen GitHub.

Wenn alles in Ordnung war, können Sie die Ihres Projekts ersetzen Assets.xcassets mit dem erforderlichen Vermögen aus GitHub. Es enthält einige Assets, die je nach Status in der Tabellenansicht angezeigt werden.

Entschuldigung, ich werde Ihnen nicht zeigen, wie ich diese Bibliothek in meinem Kundenprojekt mit Originaldatensätzen verwendet habe. Aber ich verspreche Ihnen, dass Sie in der Lage sein werden, alle Zustände zu verarbeiten, die ich oben für eine UITableView erwähnt habe.

Lassen Sie uns die grundlegende Benutzeroberfläche erstellen:

Öffne das Main.storyboard Datei. Lassen Sie uns per Drag-and-Drop a UITableView aus dem Abschnitt UI-Bibliothek auf der Controller-Szene anzeigen mit folgenden Einschränkungen.


Hinzufügen einer TableView und Einrichten von Layouteinschränkungen

Wählen Sie nun die Tabellenansicht aus Dokumentausgangsbereichöffnen Sie die Identitätsinspektor und setzen Sie die Klasse dieser Tabellenansicht auf SDStateTableView. Fügen Sie eine Prototypzelle hinzu und legen Sie fest TableViewCell als die wiederverwendbare Kennung dafür. Vergessen Sie nicht, den ViewController als Datenquelle der TableView festzulegen.

Es ist an der Zeit, einige Schaltflächen hinzuzufügen, um mit der Tabellenansicht zu spielen. Fügen Sie sechs Schaltflächen in zwei hinzu UIStackViewAuf diese Weise wird das endgültige Layout dem folgenden ähnlich sein. Wir werden den Status der Tabellenansicht beim Antippen dieser Ereignisse ändern.


Schaltflächenstapel und seine Einschränkungen hinzufügen

Es ist Zeit, etwas Code hinzuzufügen:

Jetzt offen ViewController.swift und fügen Sie die import-Anweisung hinzu import SDStateTableView einfach unter dem import UIKit line. Erstelle ein IBOutlet für die benannte Tabellenansicht stateTableView.

@IBOutlet weak var stateTableView: SDStateTableView!

Fügen Sie nun für die Handhabung der Berührung der sechs Schaltflächen Folgendes hinzu IBActionist im ViewController.swift Datei.

// MARK: IBActions

extension ViewController {

@IBAction func dataAvailableButtonTapped(_ sender: UIButton) {

}
  @IBAction func noDataAvailableButtonTapped(_ sender: UIButton) {

}
  @IBAction func errorWithImageButtonTapped(_ sender: UIButton) {

}
  @IBAction func errorWithTitleButtonTapped(_ sender: UIButton) {

}
  @IBAction func loadingDataButtonTapped(_ sender: UIButton) {

}
  @IBAction func noInternetButtonTapped(_ sender: UIButton) {

}
}

Daten in TableView anzeigen:

Um einige Daten in der Tabellenansicht anzuzeigen, werden wir die implementieren UITableViewDataSource Methoden auf folgende Weise.

// MARK: - UITableViewDataSource Methods

extension ViewController: UITableViewDataSource {
   func numberOfSections(in tableView: UITableView) -> Int {
       return 1
   }

func tableView(_ tableView: UITableView, 
                 numberOfRowsInSection section: Int) -> Int {

switch (tableView as! SDStateTableView).currentState { case .dataAvailable: tableView.separatorStyle = .singleLine return 14 default: tableView.separatorStyle = .none return 0 }
    }

func tableView(_ tableView: UITableView, 
            cellForRowAt indexPath: IndexPath) -> UITableViewCell {

let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell")

cell?.textLabel?.text = "Row number \(indexPath.row)"
         return cell!
    }
}

Es gibt nichts Besonderes in diesen Codezeilen außer der fetter Bereich. Ich aktiviere nur den Trennzeichenstil auf meinen Standardstil ( .einzelne Zeile ), nur wenn Daten für die Tabellenansicht vorhanden sind, ansonsten ist der Separator-Stil .keiner.

Wie verwalte ich die Zustände?

Das Warten hat ein Ende, wir sind mit der Codierung fast fertig, mit Ausnahme der folgenden Änderungen an der IBAction Methoden. Lass uns das tun.

Das ist es, wir sind alle fertig. Lassen Sie uns das Projekt ausführen und sehen, was passiert.

Endgültige Ausgabe:

Endgültige Ausgabe

Das abgeschlossene Projekt finden Sie unter GitHub. Wenn Sie diesen Blog lieben, vergessen Sie nicht, zu klatschen!

Aktionen:

Vergiss nicht, meine anderen Blogs zu lesen😏.

1. Überwachung des Netzwerkerreichbarkeitsstatus unter iOS

  1. Teil 1.
  2. Teil 2 .

2. Eine intelligente Möglichkeit, Farbschemata für die Entwicklung von iOS-Anwendungen zu verwalten.

3. Einfachere Handhabung von Schriften in der iOS-Entwicklung.

4. Entwicklung eines winzigen Loggers in Swift.

5. Ein paar Git-Tricks und Tipps.

Similar Posts

Leave a Reply

Your email address will not be published.