Este proyecto ha sido probado con Xcode 9 y Swift 4.

Crea un nuevo proyecto

Puede ser solo una aplicación de vista única.

Agrega el código

Cree un nuevo archivo Cocoa Touch Class (Archivo> Nuevo> Archivo …> iOS> Clase Cocoa Touch). Llámalo MyCollectionViewCell . Esta clase contendrá los puntos de venta de las vistas que agregue a su celda en el guión gráfico.

 import UIKit class MyCollectionViewCell: UICollectionViewCell { @IBOutlet weak var myLabel: UILabel! } 

Conectaremos esta salida más tarde.

Abra ViewController.swift y asegúrese de tener el siguiente contenido:

 import UIKit class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate { let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard var items = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"] // MARK: - UICollectionViewDataSource protocol // tell the collection view how many cells to make func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return self.items.count } // make a cell for each cell index path func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { // get a reference to our storyboard cell let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell // Use the outlet in our custom class to get a reference to the UILabel in the cell cell.myLabel.text = self.items[indexPath.item] cell.backgroundColor = UIColor.cyan // make cell more visible in our example project return cell } // MARK: - UICollectionViewDelegate protocol func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { // handle tap events print("You selected cell #\(indexPath.item)!") } } 

Notas

• UICollectionViewDataSource y UICollectionViewDelegate son los protocolos que sigue la vista de colección. También puede agregar el protocolo UICollectionViewFlowLayout para cambiar el tamaño de las vistas mediante progtwigción, pero no es necesario.
• Simplemente estamos poniendo cadenas simples en nuestra grilla, pero ciertamente podrías hacer imágenes más tarde.

Configura el guión gráfico

Arrastre una Vista de Colección al Controlador de Vista en su guión gráfico. Puede agregar restricciones para que llene la vista principal si lo desea.

Asegúrese de que sus valores predeterminados en el Inspector de atributos también

• Artículos: 1
• Diseño: flujo

La pequeña casilla en la parte superior izquierda de la Vista de Colección es una Celda de Vista de Colección. Lo usaremos como nuestro prototipo de celular. Arrastre una etiqueta a la celda y céntrela. Puede cambiar el tamaño de los bordes de las celdas y agregar restricciones para centrar la etiqueta si lo desea.

Escriba “celda” (sin comillas) en el cuadro Identificador del Inspector de Atributos de la Celda de Vista de Colección. Tenga en cuenta que este es el mismo valor que let reuseIdentifier = "cell" en ViewController.swift.

Y en el Inspector de identidad para la celda, establezca el nombre de clase en MyCollectionViewCell , nuestra clase personalizada que creamos.

Conecte los sockets

• Enganche la etiqueta en la celda de la colección a myLabel en la clase MyCollectionViewCell . (Puede mantener presionada la tecla Control ).
• Enganche el delegate Collection View y dataSource al Controlador de Vista. (Haga clic con el botón derecho en Vista de colección en el contorno del documento. A continuación, haga clic y arrastre la flecha más hacia arriba hasta View Controller).

Terminado

Esto es lo que parece después de agregar restricciones para centrar la etiqueta en la celda y fijar la vista de colección a las paredes del elemento principal.

Haciendo mejoras

El ejemplo anterior funciona pero es bastante feo. Aquí hay algunas cosas con las que puedes jugar:

Color de fondo

En Interface Builder, vaya a su Vista de colección> Atributo Inspector> Ver> Fondo .

Espaciado celular

Cambiar el espacio mínimo entre celdas a un valor más pequeño hace que se vea mejor. En Interface Builder, vaya a la Vista de colección> Inspector de tamaño> Min Space y haga los valores más pequeños. “Para celdas” es la distancia horizontal y “Para líneas” es la distancia vertical.

Forma de celda

Si desea esquinas redondeadas, un borde y similares, puede jugar con la layer celdas. Aquí hay un código de muestra. Lo pondría directamente después de cell.backgroundColor = UIColor.cyan en el código anterior.

 cell.layer.borderColor = UIColor.black.cgColor cell.layer.borderWidth = 1 cell.layer.cornerRadius = 8 

Vea esta respuesta para otras cosas que puede hacer con la capa (sombra, por ejemplo).

Cambiar el color cuando se toca

Mejora la experiencia del usuario cuando las células responden visualmente a los grifos. Una forma de lograr esto es cambiar el color de fondo mientras se toca la celda. Para hacer eso, agregue los dos métodos siguientes a su clase ViewController :

 // change background color when user touches cell func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) { let cell = collectionView.cellForItem(at: indexPath) cell?.backgroundColor = UIColor.red } // change background color back when user releases touch func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) { let cell = collectionView.cellForItem(at: indexPath) cell?.backgroundColor = UIColor.cyan } 

Aquí está el aspecto actualizado:

Estudio adicional

• Un tutorial sencillo de UICollectionView
• Tutorial UICollectionView Parte 1: Primeros pasos
• Tutorial UICollectionView Parte 2: Vistas reutilizables y selección de celda

Versión UITableView de esta Q & A

• Ejemplo UITableView para Swift

Delegados y fonts de datos de UICollectionView

 //MARK: UICollectionViewDataSource override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int { return 1 //return number of sections in collection view } override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 10 //return number of rows in section } override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCellWithReuseIdentifier("collectionCell", forIndexPath: indexPath) configureCell(cell, forItemAtIndexPath: indexPath) return cell //return your cell } func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) { cell.backgroundColor = UIColor.blackColor() //Customise your cell } override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView { let view = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "collectionCell", forIndexPath: indexPath) as UICollectionReusableView return view } //MARK: UICollectionViewDelegate override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) { // When user selects the cell } override func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) { // When user deselects the cell } 

UICollectionView es igual que UITableView, pero nos brinda la funcionalidad adicional de simplemente crear una vista de cuadrícula, que es un poco problemática en UITableView. Será una publicación muy larga. Menciono un enlace desde donde obtendrás todo en simples pasos.

La implementación de UICollectionView es bastante interesante. Puede obtener un código fuente bastante simple y un video tutorial desde este enlace:

https://github.com/Ady901/Demo02CollectionView.git

https://www.youtube.com/watch?v=5SrgvZF67Yw

extensión ViewController: UICollectionViewDataSource {

 func numberOfSections(in collectionView: UICollectionView) -> Int { return 2 } func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return nameArr.count } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DummyCollectionCell", for: indexPath) as! DummyCollectionCell cell.titleLabel.text = nameArr[indexPath.row] cell.userImageView.backgroundColor = .blue return cell } 

}

extensión ViewController: UICollectionViewDelegate {

 func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { let alert = UIAlertController(title: "Hi", message: "\(nameArr[indexPath.row])", preferredStyle: .alert) let action = UIAlertAction(title: "OK", style: .default, handler: nil) alert.addAction(action) self.present(alert, animated: true, completion: nil) } 

}