UITableView-Beispiel für Swift


74

Ich arbeite jetzt seit einigen Monaten mit Swift und iOS. Ich bin mit vielen Methoden vertraut, aber ich bin nicht gut genug, um Dinge aufzuschreiben, ohne hinzuschauen. Ich habe Stack Overflow in der Vergangenheit für schnelle Antworten geschätzt, um mich wieder auf den richtigen Weg zu Themen zu bringen, bei denen ich verrostet bin (z. B. AsyncTask Android-Beispiel ).

iOS UITableViewist in dieser Kategorie für mich. Ich habe sie ein paar Mal gemacht, aber ich vergesse die Details. Ich konnte auf StackOverflow keine andere Frage finden, die nur nach einem einfachen Beispiel fragt, und ich suche nach etwas, das kürzer ist als viele der Online-Tutorials (obwohl dieses sehr gut ist).

Ich gebe unten eine Antwort für meine zukünftige Referenz und Ihre.


Hier ist ein Tutorial mit Erklärungen. weniger als 10 Minuten und Schritt für Schritt. youtube.com/watch?v=ExZRzXhJitc
Chanaka Caldera

Antworten:


206

Das folgende Beispiel ist eine Anpassung und Vereinfachung eines längeren Beitrags von We ❤ Swift. So wird es aussehen:

Geben Sie hier die Bildbeschreibung ein

Erstellen Sie ein neues Projekt

Es kann nur die übliche Single View-Anwendung sein.

Fügen Sie den Code hinzu

Ersetzen Sie den Code ViewController.swift durch Folgendes:

import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // Data model: These strings will be the data for the table view cells
    let animals: [String] = ["Horse", "Cow", "Camel", "Sheep", "Goat"]
    
    // cell reuse id (cells that scroll out of view can be reused)
    let cellReuseIdentifier = "cell"
    
    // don't forget to hook this up from the storyboard
    @IBOutlet var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Register the table view cell class and its reuse id
        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)
        
        // (optional) include this line if you want to remove the extra empty cell divider lines
        // self.tableView.tableFooterView = UIView()

        // This view controller itself will provide the delegate methods and row data for the table view.
        tableView.delegate = self
        tableView.dataSource = self
    }
    
    // number of rows in table view
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.animals.count
    }
    
    // create a cell for each table view row
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // create a new cell if needed or reuse an old one
        let cell:UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!
        
        // set the text from the data model
        cell.textLabel?.text = self.animals[indexPath.row]
        
        return cell
    }
    
    // method to run when table view cell is tapped
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("You tapped cell number \(indexPath.row).")
    }
}

Lesen Sie die In-Code-Kommentare, um zu sehen, was passiert. Die Highlights sind

  • Der View Controller übernimmt die Protokolle UITableViewDelegateund UITableViewDataSource.
  • Die numberOfRowsInSectionMethode bestimmt, wie viele Zeilen in der Tabellenansicht vorhanden sind.
  • Die cellForRowAtIndexPathMethode richtet jede Zeile ein.
  • Die didSelectRowAtIndexPathMethode wird jedes Mal aufgerufen, wenn auf eine Zeile getippt wird.

Fügen Sie dem Storyboard eine Tabellenansicht hinzu

Ziehen Sie a UITableViewauf Ihren View Controller. Verwenden Sie das automatische Layout, um die vier Seiten zu fixieren.

Geben Sie hier die Bildbeschreibung ein

Schließen Sie die Steckdosen an

ControlZiehen Sie von der Tabellenansicht in IB zum tableViewAusgang im Code.

Fertig

Das ist alles. Sie sollten Ihre App jetzt ausführen können.

Diese Antwort wurde mit Xcode 9 und Swift 4 getestet


Variationen

Zeilenlöschung

Sie müssen dem obigen Basisprojekt nur eine einzige Methode hinzufügen, wenn Sie Benutzern das Löschen von Zeilen ermöglichen möchten. In diesem grundlegenden Beispiel erfahren Sie, wie.

Geben Sie hier die Bildbeschreibung ein

Zeilenabstand

Wenn Sie einen Abstand zwischen Ihren Zeilen wünschen, lesen Sie dieses ergänzende Beispiel .

Geben Sie hier die Bildbeschreibung ein

Benutzerdefinierte Zellen

Das Standardlayout für die Tabellenansichtszellen entspricht möglicherweise nicht Ihren Anforderungen. Schauen Sie sich dieses Beispiel an, um mit dem Erstellen eigener benutzerdefinierter Zellen zu beginnen.

Geben Sie hier die Bildbeschreibung ein

Dynamische Zellenhöhe

Manchmal möchten Sie nicht, dass jede Zelle dieselbe Höhe hat. Ab iOS 8 ist es einfach, die Höhe abhängig vom Zelleninhalt automatisch einzustellen. In diesem Beispiel finden Sie alles, was Sie für den Einstieg benötigen.

Geben Sie hier die Bildbeschreibung ein

Weiterführende Literatur


1
TODO: Hinzufügen / Verknüpfen zu einem statischen Tabellenansicht Beispiel
Suragch

2
wunderbare Antwort! Ich würde auch einige andere allgemeine Funktionen hinzufügen, wie das tableView.tableFooterView = UIView()Entfernen leerer Tabellenansichtszeilen durch Hinzufügen einer Fußzeile in viewDidLoad (), Hinzufügen cell.imageView!.image = UIImage(named: "image")für das cell.backgroundColor = UIColor
Zeilensymbolbild

23

Der Vollständigkeit halber und für diejenigen, die den Interface Builder nicht verwenden möchten, finden Sie hier eine Möglichkeit, dieselbe Tabelle wie in Suragchs Antwort vollständig programmatisch zu erstellen - allerdings mit einer anderen Größe und Position.

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource  {

    var tableView: UITableView = UITableView()
    let animals = ["Horse", "Cow", "Camel", "Sheep", "Goat"]
    let cellReuseIdentifier = "cell"

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.frame = CGRectMake(0, 50, 320, 200)
        tableView.delegate = self
        tableView.dataSource = self
        tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)

        self.view.addSubview(tableView)
    }

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

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell:UITableViewCell = tableView.dequeueReusableCellWithIdentifier(cellReuseIdentifier) as UITableViewCell!

        cell.textLabel?.text = animals[indexPath.row]

        return cell
    }

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        print("You tapped cell number \(indexPath.row).")
    }

}

Stellen Sie sicher, dass Sie sich daran erinnert haben import UIKit.


1
Es wäre großartig, wenn Sie den Code hinzufügen könnten, der erforderlich ist, damit die Tabellenansicht den Bildschirm ausfüllt. Derzeit belegt es nur das Rechteck, das Sie fest codiert haben.
Chris Gillum


1
tableView.registerClass wurde für diejenigen, die sich fragen, in tableView.register geändert.
Rmalmoe

9

In Swift 4.1 und Xcode 9.4.1

  1. Fügen Sie UITableViewDataSource, UITableViewDelegate hinzu, das an Ihre Klasse delegiert ist.

  2. Erstellen Sie eine Tabellenansichtsvariable und ein Array.

  3. In viewDidLoad erstellen Sie eine Tabellenansicht.

  4. Delegierte der Tabellenansicht aufrufen

  5. Delegate-Funktionen für die Aufrufe der Tabellenansicht basierend auf Ihren Anforderungen.

import UIKit
// 1
class yourViewController: UIViewController , UITableViewDataSource, UITableViewDelegate { 

// 2
var yourTableView:UITableView = UITableView()
let myArray = ["row 1", "row 2", "row 3", "row 4"]

override func viewDidLoad() {
    super.viewDidLoad()

    // 3
    yourTableView.frame = CGRect(x: 10, y: 10, width: view.frame.width-20, height: view.frame.height-200)
    self.view.addSubview(yourTableView)

    // 4
    yourTableView.dataSource = self
    yourTableView.delegate = self

}

// 5
// MARK - UITableView Delegates
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return myArray.count
}

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

var cell : UITableViewCell? = tableView.dequeueReusableCell(withIdentifier: "cell")
    if cell == nil {
        cell = UITableViewCell(style: UITableViewCellStyle.default, reuseIdentifier: "cell")
    }
    if self. myArray.count > 0 {
        cell?.textLabel!.text = self. myArray[indexPath.row]
    }
    cell?.textLabel?.numberOfLines = 0

    return cell!
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

    return 50.0
}

Wenn Sie ein Storyboard verwenden, ist Schritt 3 nicht erforderlich.

Sie müssen jedoch vor Schritt 4 ein IBOutlet für Ihre Tabellenansicht erstellen.


0

Hier ist die Swift 4 Version.

import Foundation
import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource
{ 
    var tableView: UITableView = UITableView()
    let animals = ["Horse", "Cow", "Camel", "Sheep", "Goat"]
    let cellReuseIdentifier = "cell"

    override func viewDidLoad()
    {
        super.viewDidLoad()

        tableView.frame = CGRect(x: 0, y: 50, width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height)
        tableView.delegate = self
        tableView.dataSource = self
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)

        self.view.addSubview(tableView)
    }

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

    internal func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
    {
        let cell:UITableViewCell = tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!

        cell.textLabel?.text = animals[indexPath.row]

        return cell
    }

    private func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: IndexPath)
    {
        print("You tapped cell number \(indexPath.row).")
    }

}

0
//    UITableViewCell set Identify "Cell"
//    UITableView Name is  tableReport

UIViewController,UITableViewDelegate,UITableViewDataSource,UINavigationControllerDelegate, UIImagePickerControllerDelegate {

    @IBOutlet weak var tableReport: UITableView!  

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return 5;
        }

        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableReport.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
            cell.textLabel?.text = "Report Name"
            return cell;
        }
}

2
Können Sie eine Erklärung hinzufügen, wie sich dies von den anderen Antworten unterscheidet?
Suragch

Zum späteren Nachschlagen: Dies ist eine vereinfachte Version - sie enthält das absolute Minimum für eine Tabellenansicht. Das ist der Unterschied.m
oscarfrederiksen
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.