Ejemplo UITableView para Swift

He estado trabajando con Swift e iOS durante varios meses. Estoy familiarizado con muchas de las formas en que se hacen las cosas, pero no soy lo suficientemente bueno como para escribir las cosas sin mirar. Agradecí a Stack Overflow en el pasado por proporcionarme respuestas rápidas para volver a encarrilarme con temas sobre los que me he oxidado (por ejemplo, AsyncTask , ejemplo de Android ).

El UITableView de iOS está en esta categoría para mí. Las he hecho algunas veces, pero olvidé cuáles son los detalles. No pude encontrar otra pregunta en StackOverflow que simplemente pida un ejemplo básico y estoy buscando algo más corto que muchos de los tutoriales que están en línea (aunque este es muy bueno).

Estoy proporcionando una respuesta a continuación para mi futura referencia y la tuya.

El siguiente ejemplo es una adaptación y simplificación de una publicación más larga de We ❤ Swift. Así es como se verá:

enter image description here

Crear un nuevo proyecto

Puede ser simplemente la aplicación de vista única habitual.

Agrega el código

Reemplace el código ViewController.swift con lo siguiente:

 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).") } } 

Lea los comentarios dentro del código para ver qué está sucediendo. Los aspectos más destacados son

  • El controlador de vista adopta los protocolos UITableViewDelegate y UITableViewDataSource .
  • El método numberOfRowsInSection determina cuántas filas habrá en la vista de tabla.
  • El método cellForRowAtIndexPath configura cada fila.
  • Se didSelectRowAtIndexPath método didSelectRowAtIndexPath cada vez que se didSelectRowAtIndexPath una fila.

Agregar una vista de tabla al guión gráfico

Arrastre una UITableView a su Controlador de Vista. Use la distribución automática para fijar los cuatro lados.

enter image description here

Conecte los sockets

Controle el arrastre desde la Vista de tabla en IB hasta la salida tableView en el código.

Terminado

Eso es todo. Debería poder ejecutar su aplicación ahora.

Esta respuesta fue probada con Xcode 9 y Swift 4


Variaciones

Eliminación de fila

Solo debe agregar un único método al proyecto básico anterior si desea permitir que los usuarios eliminen filas. Vea este ejemplo básico para aprender cómo.

enter image description here

Distancia entre filas

Si desea tener espacio entre las filas, vea este ejemplo suplementario .

enter image description here

Celdas personalizadas

El diseño predeterminado para las celdas de la vista de tabla puede no ser lo que necesita. Vea este ejemplo para ayudarlo a comenzar a crear sus propias celdas personalizadas.

enter image description here

Altura de celda dinámica

A veces no quieres que todas las celdas tengan la misma altura. Comenzando con iOS 8 es fácil establecer automáticamente la altura dependiendo del contenido de la celda. Vea este ejemplo para todo lo que necesita para comenzar.

enter image description here

Otras lecturas

  • Crear una vista de tabla (tutorial de Apple Docs)
  • Tutoriales de Ray Wenderlich
  • Tutorial de iOS y Swift: UITableViewController
  • Tutorial de vista de tabla de iOS con Swift

Para mayor información, y para aquellos que no deseen usar el Interface Builder, aquí hay una forma de crear la misma tabla que en la respuesta de Suragch, totalmente programática, aunque con un tamaño y una posición diferentes.

 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).") } } 

Asegúrese de recordar haber import UIKit .

 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; } } 

Aquí está la versión de Swift 4.

 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).") } } 

En Swift 4.1 y Xcode 9.4.1

1) Agregue UITableViewDataSource, UITableViewDelegate delegado a su clase.

2) Crear variable y matriz de vista de tabla.

3) En viewDidLoad crear vista de tabla.

4) Llamar delegates de la vista de tabla

5) Llame a las funciones delegadas de la vista de tabla según sus requisitos.

 import UIKit class yourViewController: UIViewController , UITableViewDataSource, UITableViewDelegate { // 1 var yourTableView:UITableView = UITableView()// 2 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 } 

Si está usando el guión gráfico, no necesita el paso 3 .

Pero necesita crear IBOutlet de su vista de tabla, luego paso 4 .