UITableView mit Suche – Swift iOS

In diesem Tutorial erfahren Sie, wie Sie mit Swift 4 eine UITableView mit Suchleiste in iOS erstellen können. Die folgenden Schritte sind ausgeführt:

Videoanleitung:

1. Erstellen Sie ein neues Projekt in XCode.
2. Ziehen Sie eine „Tabellenansicht“ in Ihr Storyboard und legen Sie sie dort ab.
3. Öffnen Sie den Assistenten in der oberen Menüleiste Herausgeber> Assistant.
4. Halten Sie die Umschalttaste gedrückt und ziehen Sie Ihre Tabellenansicht per Drag & Drop in Ihren Controller, um eine Steckdose zu erstellen. Gib ihm einen Namen wie „Tabellenansicht“.

@IBOutlet weak var tableview: UITableView!

5. Verbinden Sie die Datenquelle und delegieren Sie Ihre Tabellenansicht mit Ihrem Controller.
6. Erweitern Sie Ihren View Controller von UITableViewDataSource und UITableViewDelegate.

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

7. Erstellen Sie ein Array von Daten. Möglicherweise erhalten Sie dies von der API:

private var array: [String] = ["Cow", "Lion", "Wolf", "Camel", "Tiger"]

8. Registrieren Sie jetzt Ihre Tabellenansicht in der in Swift integrierten Zelle für die Tabellenansicht:

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    
    self.tableview.register(UITableViewCell.self, forCellReuseIdentifier: "cellIdentifier")
}

9. Erstellen Sie nun 3 Funktionen:
   • 1st gibt die Gesamtzahl der Elemente zurück, die in der Tabellenansicht angezeigt werden müssen.
   • 2nd zeigt die Werte aus dem Array in jeder Tabellenansichtszelle an.
   • 3rd wird immer dann aufgerufen, wenn auf ein Zellenelement getippt oder geklickt wird.

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return self.array.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell: UITableViewCell = self.tableview.dequeueReusableCell(withIdentifier: "cellIdentifier")!
    
    cell.textLabel?.text = self.array[indexPath.row]
    
    return cell
}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    print(self.array[indexPath.row])
}

10. Ziehen Sie dann die Suchleiste in Ihr Storyboard oben in der Tabellenansicht und legen Sie sie dort ab, und erstellen Sie den Ausgang in Ihrem Controller wie in Schritt 4.

@IBOutlet weak var searchBar: UISearchBar!

11. Verbinden Sie den Delegierten mit Ihrem Controller wie in Schritt 5.
12. Implementieren Sie die UISearchBarDelegate in Ihrer Controller-Klasse:

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, UISearchBarDelegate {

13. Erstellen Sie ein weiteres Array, das die Anfangswerte enthält:

private var initialArray: [String] = ["Cow", "Lion", "Wolf", "Camel", "Tiger"]

14. Erstellen Sie abschließend eine Funktion, die aufgerufen wird, wenn Sie etwas in die Suchleiste eingeben. Diese Funktion durchsucht den Text in allen Anfangswerten des Arrays. Sie können die Groß- und Kleinschreibung der Suche nicht berücksichtigen, indem Sie sowohl den Text in Kleinbuchstaben als auch den Text der Suchleiste und des Arrays verkleinern. Wir müssen auch eine Bedingung setzen, dass, wenn die Suchleiste leer ist, alle Werte aus dem anfänglichen Array angezeigt werden. Zuletzt müssen Sie die Daten in der Tabellenansicht neu laden, um die gesuchten Daten anzuzeigen.

func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
    let text: String = self.searchBar.text ?? ""
    self.array = []
    for item in self.initialArray {
        if (item.lowercased().contains(text.lowercased())) {
            self.array.append(item)
        }
    }
    if (text.isEmpty) {
        self.array = self.initialArray
    }
    self.tableview.reloadData()
}

Download-Link generieren