webentwicklung-frage-antwort-db.com.de

TableView-Suche in Swift

Ich habe zwei Arrays: FirstTableArray (einschließlich Markennamen) und SecondTableArray (einschließlich Modelle).

Ich möchte eine Suche hinzufügen, durch die das Telefonmodell anhand des Namens gefunden werden kann.

import UIKit
import MessageUI

class FirstTableViewController: UITableViewController {

    var FirstTableArray = [String]()
    var SecondTableArray = [SecondTable]()

override func viewDidLoad() {

    super.viewDidLoad()

    self.navigationController?.navigationBar.isTranslucent = false
    self.navigationController?.navigationBar.barStyle = .black
    self.navigationController?.navigationBar.tintColor = UIColor.white

// First Table Array

    FirstTableArray = ["Apple", "Samsung"]

// Second Table Array

    SecondTableArray = [
    SecondTable(SecondTitle: ["iPhone 5s", "iPhone 6", "iPhone 6s"]),
    SecondTable(SecondTitle: ["Galaxy S4", "Galaxy S5", "Galaxy S6"]), 
    ]   
    }

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

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let Cell = self.tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as UITableViewCell
    Cell.textLabel?.text = FirstTableArray[(indexPath as NSIndexPath).row]
    return Cell
    }

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    let indexPath : IndexPath = self.tableView.indexPathForSelectedRow!
    let DestViewController = segue.destination as! SecondTableViewController
    let SecondTableArrayTwo = SecondTableArray[(indexPath as NSIndexPath).row]
    DestViewController.SecondTableArray = SecondTableArrayTwo.SecondTitle
    } 
}

Kannst du mir dabei helfen?

4
user6023982

Ich arbeite heute das gleiche durch und fand dieses Tutorial sehr einfach zu folgen: https://github.com/codepath/ios_guides/wiki/Search-Bar-Guide

Sie werden durch die Schritte zum Hinzufügen der Suchleiste in Interface Builder, zum Einrichten des Delegaten und zum Einschließen einer Methode zum Filtern der Ergebnisse geführt.


Das Durchsuchen einer Sammlung von Elementen durch Benutzer ist in iOS-Projekten eine recht häufige Aufgabe. Eine Standardschnittstelle zum Implementieren von Suchverhalten ist die Suchleiste.

Es gibt einige gebräuchliche Methoden, um mit Suchleisten zu arbeiten:

  • Direkt mit einer UISearchBar. Dies ist die einfachste Möglichkeit, UISearchBars zu verwenden. Dies kann äußerst flexibel sein, wenn Sie Ihre eigene Suchoberfläche entwerfen und programmieren möchten, bietet jedoch nicht so viele integrierte Funktionen wie die anderen Methoden.

  • Verwenden eines UISearchDisplayControllers zur Verwaltung einer Suchoberfläche. Mit dem UISearchDisplayController können Sie eine Standard-Suchoberfläche mit integrierten Animationen präsentieren. Diese Methode zwingt Sie, Suchergebnisse in einer Tabellenansicht anzuzeigen. - veraltet

  • Verwenden eines UISearchControllers zur Verwaltung einer Suchoberfläche. Das
    UISearchController ist ein neuerer Controller (nur in iOS 8+ verfügbar)
    , mit dessen Hilfe Sie eine Suchoberfläche mit einer beliebigen Ansicht präsentieren können
    zeigt die Suchergebnisse an.

In diesem Handbuch werden die Grundlagen der Arbeit mit diesen Klassen beschrieben. Keine dieser Klassen implementiert tatsächlich das "Such" -Verhalten beim Finden von Elementen, die mit einer bestimmten Abfragezeichenfolge übereinstimmen, da die Bestimmung, welche Objekte übereinstimmen, vom domänenspezifischen Anwendungsfall abhängt (z. B. wenn Sie nach "Personen" suchen, die Sie möglicherweise nur mit deren übereinstimmen möchten) Namen, während Sie beim Durchsuchen von E-Mails möglicherweise eine Volltextsuche mit Vorindex wünschen. Sie müssen jedes Such-/Filterverhalten selbst implementieren.

Direkt mit UISearchBars arbeiten

Im Kern ist eine Suchleiste nichts anderes als ein verherrlichtes Textfeld, das mit einer Bereichskontrolle, einigen Animationen und einigen Schaltflächen versehen ist. Jede Suchleiste verfügt über einen Stellvertreter, mit dem Sie auf Benutzeraktionen reagieren können. Die wichtigsten Delegate-Methoden sind:

  • textDidChange - In den meisten Fällen reagieren Sie auf dieses Ereignis, indem Sie die angezeigten Suchergebnisse aktualisieren, während der Benutzer eine Abfrage eingibt
  • searchBarSearchButtonClicked - In einigen Fällen möchten Sie bei langsamen Suchvorgängen (z. B. wenn ein langsamer API-Aufruf erforderlich ist) warten, bis der Benutzer auf die Suchschaltfläche tippt, bevor Sie die Suchergebnisse aktualisieren.

Beispiel für die Suche in einer Tabelle

Wir beginnen mit einer Single-View-Anwendung mit einem einfachen UITableView. Sie können eine UISearchBar wie bei jedem anderen Steuerelement hinzufügen, indem Sie eine auf Ihren View Controller im Interface Builder ziehen oder sie programmgesteuert hinzufügen.

Die Delegate-Eigenschaft der Suchleiste muss auf ein Objekt festgelegt sein, das UISearchBarDelegate implementiert. Normalerweise lässt du deinen View Controller UISearchBarDelegate implementieren und setzt searchBar.delegate = self in der viewDidLoad-Methode.

enter image description here

Der Code zum Implementieren des Suchverhaltens lautet wie folgt. Wir pflegen ein zusätzliches Array filtersData, um Datenzeilen darzustellen, die mit unserem Suchtext übereinstimmen. Wenn sich der Suchtext ändert, aktualisieren wir filtersData und laden unsere Tabelle neu.

class ViewController: UIViewController, UITableViewDataSource, UISearchBarDelegate {
    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var searchBar: UISearchBar!

let data = ["New York, NY", "Los Angeles, CA", "Chicago, IL", "Houston, TX",
    "Philadelphia, PA", "Phoenix, AZ", "San Diego, CA", "San Antonio, TX",
    "Dallas, TX", "Detroit, MI", "San Jose, CA", "Indianapolis, IN",
    "Jacksonville, FL", "San Francisco, CA", "Columbus, OH", "Austin, TX",
    "Memphis, TN", "Baltimore, MD", "Charlotte, ND", "Fort Worth, TX"]

var filteredData: [String]!

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.dataSource = self
    searchBar.delegate = self
    filteredData = data
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "TableCell", for: indexPath) as UITableViewCell
    cell.textLabel?.text = filteredData[indexPath.row]
    return cell
}

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

// This method updates filteredData based on the text in the Search Box
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
    // When there is no text, filteredData is the same as the original data
    // When user has entered text into the search box
    // Use the filter method to iterate over all items in the data array
    // For each item, return true if the item should be included and false if the
    // item should NOT be included
    filteredData = searchText.isEmpty ? data : data.filter({(dataString: String) -> Bool in
        // If dataItem matches the searchText, return true to include it
        return dataString.range(of: searchText, options: .caseInsensitive) != nil
    })

    tableView.reloadData()
}
}

So sieht das beim Laufen aus. Beachten Sie, dass die Suchergebnisse in derselben Tabelle angezeigt werden und keine separate Suchoberfläche angezeigt wird.

source: imgur.com

Beispiel für die Suche in einer Sammlungsansicht

Da die UISearchBar recht einfach ist, kann sie mit jeder beliebigen Ansicht kombiniert werden, um eine eigene Suchoberfläche zu erstellen. So könnte es in Kombination mit einer Sammlungsansicht aussehen.

enter image description here

Der Code hierfür ist im Wesentlichen derselbe wie bei Tabellenansichten.

Abbrechen der Suche und Ausblenden der Tastatur

Sobald der Benutzer auf die Suchleiste tippt, wird die Tastatur angezeigt, und Sie werden feststellen, dass sie nicht ausgeblendet wird, wenn Sie auf X tippen. Sie können die Schaltfläche Abbrechen anzeigen, wenn der Benutzer auf die Suchleiste tippt, und die Schaltfläche ausblenden, wenn der Benutzer auf Abbrechen tippt Tastatur.

Es gibt eine raffinierte searchBarTextDidBeginEditing-Methode für UISearchBarDelegate, die aufgerufen wird, wenn der Benutzer mit der Bearbeitung des Suchtexts beginnt. Sie können die Schaltfläche Abbrechen in dieser Methode anzeigen:

func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
        self.searchBar.showsCancelButton = true
}

Wenn der Benutzer auf die Abbrechen-Schaltfläche tippt, wird die searchBarCancelButtonClicked-Methode des Delegaten aufgerufen. An dieser Stelle können Sie die Schaltfläche Abbrechen ausblenden, vorhandenen Text in der Suchleiste löschen und die Tastatur folgendermaßen ausblenden:

func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        searchBar.showsCancelButton = false
        searchBar.text = ""
        searchBar.resignFirstResponder()
}

Verwenden von UISearchControllern (iOS 8 +)

Eine neuere Möglichkeit, die Darstellung einer Suchoberfläche (nur in iOS 8 und höher verfügbar) zu verwalten, ist der UISearchController. Dieser Controller übernimmt einen Teil der Logik und Animation der Darstellung einer separaten Suchoberfläche für Sie, während Sie weiterhin festlegen können, wie Ihre Suchergebnisse angezeigt werden.

Beispiel für die Suche in einer Tabelle

Derzeit ist in der Interface Builder-Objektbibliothek für einen UISearchController kein integriertes Objekt vorhanden. Der einfachste Weg, eine zu erstellen, besteht darin, sie programmgesteuert zu erstellen. Dadurch wird auch eine UISearchBar erstellt und die searchBar-Eigenschaft des Suchcontrollers darauf festgelegt. Sie können diese Suchleiste programmgesteuert zu Ihrer Ansichtshierarchie hinzufügen.

Um Ihre Suchergebnisse zu aktualisieren, müssen Sie das UISearchResultsUpdating-Protokoll implementieren und die searchResultsUpdater-Eigenschaft des Suchcontrollers festlegen.

Sie müssen das UISearchControllerDelegate nicht implementieren, es sei denn, Sie müssen die Ereignisse rund um die Darstellung der Suchoberfläche einbinden.

Alles in allem sieht der Code so aus. Beachten Sie, dass wir den Suchtext in der Suchleiste in updateSearchResultsForSearchController lesen müssen. Eine weitere zu beachtende Sache ist, dass wir die definePresentationContext-Eigenschaft dieses View-Controllers auf true setzen. Dies bedeutet, dass der Such-Controller den Frame dieses View-Controllers (im Gegensatz zum Root-View-Controller) verwenden sollte, wenn er die Suchoberfläche anzeigt. In diesem Fall bedeutet dies, dass die Suchoberfläche über der Trägerleiste angezeigt wird.

class ViewController: UIViewController, UITableViewDataSource, UISearchResultsUpdating {
    @IBOutlet weak var tableView: UITableView!

let data = ["New York, NY", "Los Angeles, CA", "Chicago, IL", "Houston, TX",
    "Philadelphia, PA", "Phoenix, AZ", "San Diego, CA", "San Antonio, TX",
    "Dallas, TX", "Detroit, MI", "San Jose, CA", "Indianapolis, IN",
    "Jacksonville, FL", "San Francisco, CA", "Columbus, OH", "Austin, TX",
    "Memphis, TN", "Baltimore, MD", "Charlotte, ND", "Fort Worth, TX"]

var filteredData: [String]!

var searchController: UISearchController!

override func viewDidLoad() {
    super.viewDidLoad()

    tableView.dataSource = self
    filteredData = data

    // Initializing with searchResultsController set to nil means that
    // searchController will use this view controller to display the search results
    searchController = UISearchController(searchResultsController: nil)
    searchController.searchResultsUpdater = self

    // If we are using this same view controller to present the results
    // dimming it out wouldn't make sense. Should probably only set
    // this to yes if using another controller to display the search results.
    searchController.dimsBackgroundDuringPresentation = false

    searchController.searchBar.sizeToFit()
    tableView.tableHeaderView = searchController.searchBar

    // Sets this view controller as presenting view controller for the search interface
    definesPresentationContext = true
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("TableCell") as UITableViewCell
    cell.textLabel?.text = filteredData[indexPath.row]
    return cell
}

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

func updateSearchResultsForSearchController(searchController: UISearchController) {
    if let searchText = searchController.searchBar.text {
        filteredData = searchText.isEmpty ? data : data.filter({(dataString: String) -> Bool in
            return dataString.rangeOfString(searchText, options: .CaseInsensitiveSearch) != nil
        })

        tableView.reloadData()
    }
}
}

So sieht das beim Laufen aus. Beachten Sie, dass wir im Gegensatz zum Beispiel für den Suchanzeigen-Controller dieselbe Tabellenansicht verwenden, um die Suchergebnisse anzuzeigen, anstatt eine separate Tabellenansicht zu überlagern. Anders als bei der Arbeit mit nur der Suchleiste ist bei der Umstellung auf die Suchoberfläche jedoch immer noch eine Animation integriert.

Außerdem erhalten Sie die Logik, die Abbrechen-Schaltfläche anzuzeigen und die Tastatur auszublenden, wenn der Benutzer auf die Abbrechen-Schaltfläche tippt, wenn Sie diese verwenden.

enter image description here

Beispiel für die Suche in einer Sammlungsansicht

Genauso einfach können wir den Suchcontroller verwenden, um eine Sammlungsansicht vor Ort zu durchsuchen. Wir haben immer noch die Darstellung einer Suchoberfläche, aber anders als beim Arbeiten mit dem Suchanzeigen-Controller sind wir nicht darauf beschränkt, eine Tabellenansicht zum Anzeigen der Suchergebnisse zu verwenden.

enter image description here

Der Code dafür ist fast der gleiche wie beim Durchsuchen der obigen Tabellenansicht. Der einzige bemerkenswerte Unterschied ist, dass wir im Interface Builder eine Platzhalteransicht für die Suchleiste einführen mussten, da es immer noch einige Macken gibt, die Suchleiste eines Suchcontrollers in der Zusatzansicht einer Sammlungsansicht zu platzieren.

class ViewController: UIViewController, UICollectionViewDataSource, UISearchResultsUpdating {
    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var searchBarPlaceholder: UIView!
    ...
    override func viewDidLoad() {
        ...
        searchController.searchBar.sizeToFit()
        searchBarPlaceholder.addSubview(searchController.searchBar)
        automaticallyAdjustsScrollViewInsets = false
        definesPresentationContext = true
    }

    ...
}

Suchleiste in der Navigationsansicht

Eine häufige Anforderung besteht darin, die Suchleiste in der Navigationsleiste zu platzieren.

enter image description here

Dies kann programmgesteuert in viewDidLoad Ihres View Controllers wie folgt konfiguriert werden.

Wenn Sie direkt mit einer Suchleiste arbeiten:

// create the search bar programatically since you won't be
// able to drag one onto the navigation bar
searchBar = UISearchBar()
searchBar.sizeToFit()

// the UIViewController comes with a navigationItem property
// this will automatically be initialized for you if when the
// view controller is added to a navigation controller's stack
// you just need to set the titleView to be the search bar
navigationItem.titleView = searchBar

Verwenden eines Suchanzeige-Controllers:

searchDisplayController?.displaysSearchBarInNavigationBar = true

Verwenden eines Suchcontrollers:

searchController.searchBar.sizeToFit()
navigationItem.titleView = searchController.searchBar

// By default the navigation bar hides when presenting the
// search interface.  Obviously we don't want this to happen if
// our search bar is inside the navigation bar.
searchController.hidesNavigationBarDuringPresentation = false
52
Gibraltar

Ich würde vorschlagen, eine UISearchBar zu implementieren und Ihre Klasse als Delegat zur UISearchBar hinzuzufügen. Anschließend können Sie in den Delegates-Methoden den Text für die Suchleiste verwenden und die Suche in der Datei selbst durchführen und die Tableview-Daten entsprechend neu laden 

Bearbeiten: Sie können dieses Tutorial verwenden, um UISearchBar in einer UITableView zu implementieren https://www.raywenderlich.com/472-uisearchcontroller-tutorial-getting-started

1
John