Muy buenas, me llamo Miguel y aquí les traigo otro nuevo tutorial.
Índice
Exordio
En esta publicación, te mostraré cómo crear un UITableView
que tiene espacio entre las celdas. Me encontré con este diseño cuando estaba trabajando recientemente en la aplicación de un cliente.
Quería alejarme del aspecto básico de la vista de tabla y usar algo más adaptado a la UI / UX
de la aplicación del cliente. Para aquellos que trabajan como desarrolladores de software independientes, la versatilidad en el diseño es esencial porque no todos los clientes quieren lo mismo.
Para lograr un diseño de vista de tabla limpio con espacio entre las celdas; debe trabajar con secciones en lugar de filas. Veamos cómo crear un UITableView
con espaciado y diseño limpio. Esta publicación asume que tiene experiencia previa con Swift
, Xcode
y UITableViews
.
Puede encontrar el código fuente de esta publicación en GitHub. Asegúrese de comenzar con la rama ‘inicio’ del repositorio.
Lo que ya está configurado
Si abre el proyecto y lo ejecuta en un dispositivo o simulador, verá el diseño de la interfaz de usuario actual. He configurado una aplicación básica de reseñas de restaurantes, todo hecho de forma programática, y trabajaremos con la choza de hamburguesas ficticia de Rusty Nail.
El primer controlador de vista que ve es el RestaurantReviewsViewController
clase. Hay dos clases en el grupo View
; uno para una costumbre UITableViewCell
y uno para una costumbre UIView
.
En el estado actual de la aplicación, puede ver el UIView
en acción, ya que este es el círculo naranja que contiene el logotipo del restaurante.
RestaurantReviewsViewController
. Primero, he almacenado una estructura personalizada llamada Review
que tiene tres propiedades; el autor de la reseña, el restaurante que recibe la reseña y el texto de la reseña.
También hay un método llamado setupView
que configura los elementos de la interfaz de usuario de la vista y un método llamado applyAutoConstraints
que activa las restricciones para dichos elementos de la interfaz de usuario.
Además, en el viewDidLoad
método, se establece el color de fondo de la vista y el setupView
se llama al método. Por último, verá una sección marcada Extensions
y un método que hace un UIView
encerrado en un círculo.
Ahora que hemos revisado el código actual del controlador de vista principal, construyamos esa vista de tabla. Si desea echar un vistazo al otro código proporcionado en el proyecto, tómese su tiempo y conozca cómo funciona todo en conjunto.
Brevemente, el RestaurantReviewCell
es una celda de vista de tabla personalizada que contiene dos etiquetas; uno para el nombre de la persona que revisa el restaurante y otro para la reseña.
Configurar la vista de tabla
Para comenzar, inicialice el data
matriz con algunas reseñas. En este caso, he utilizado personajes del programa Bob’s Burgers. Los datos se inicializan en el método setupView
.
data = [ Review(writer: “Calvin”, receiver: “Rusty Nail Burgers”, reviewText: “Okay burgers. Okay tenant. Would like to see them pay rent on time.”), Review(writer: “Felix”, receiver: “Rusty Nail Burgers”, reviewText: “Though my brother isn’t a fan of Bob’s cooking, I can’t find a better burger on the wharf.”), Review(writer: “Teddy”, receiver: “Rusty Nail Burgers”, reviewText: “I’m here everyday. Couldn’t ask for a better hangout spot.”), Review(writer: “Mickey”, receiver: “Rusty Nail Burgers”, reviewText: “Hey Bob! Thanks for feeding me during that heist. I will definitely be back to visit.”), Review(writer: “Marshmellow”, receiver: “Rusty Nail Burgers”, reviewText: “Hey Bob.”), Review(writer: “Rudy”, receiver: “Rusty Nail Burgers”, reviewText: “My dad drops me off here every once in a while. I like to sit in the back corner and enjoy my food.”), ]
A continuación, configure el delegate
y dataSource
del reviewTableView
. Me conformaré con UITableViewDelegate
y UITableViewDataSource
protocolos en la sección marcada Extensions
aunque puede hacer esto directamente desde la clase RestaurantReviewsViewController
.
Agregue lo siguiente al método setupView
después reviewTableView
se inicializa:
reviewTableView.delegate = self reviewTableView.dataSource = self
Los setupview
el método ahora debería verse así:
func setupView() { data = [ Review(writer: “Calvin”, receiver: “Rusty Nail Burgers”, reviewText: “Okay burgers. Okay tenant. Would like to see them pay rent on time.”), Review(writer: “Felix”, receiver: “Rusty Nail Burgers”, reviewText: “Though my brother isn’t a fan of Bob’s cooking, I can’t find a better burger on the wharf.”), Review(writer: “Teddy”, receiver: “Rusty Nail Burgers”, reviewText: “I’m here everyday. Couldn’t ask for a better hangout spot.”), Review(writer: “Mickey”, receiver: “Rusty Nail Burgers”, reviewText: “Hey Bob! Thanks for feeding me during that heist. I will definitely be back to visit.”), Review(writer: “Marshmellow”, receiver: “Rusty Nail Burgers”, reviewText: “Hey Bob.”), Review(writer: “Rudy”, receiver: “Rusty Nail Burgers”, reviewText: “My dad drops me off here every once in a while. I like to sit in the back corner and enjoy my food.”), ] restaurantImageViewBackground = RestaurantImageViewBackground() view.addSubview(restaurantImageViewBackground) restaurantImageView = UIImageView(image: UIImage(named: “cheese-burger”)) restaurantImageView.translatesAutoresizingMaskIntoConstraints = false restaurantImageViewBackground.addSubview(restaurantImageView) restaurantNameLabel = UILabel() restaurantNameLabel.translatesAutoresizingMaskIntoConstraints = false restaurantNameLabel.text = “Rusty Nail Burgers” restaurantNameLabel.font = UIFont.boldSystemFont(ofSize: 28) restaurantNameLabel.textColor = .black view.addSubview(restaurantNameLabel) starStackView = UIStackView() starStackView.translatesAutoresizingMaskIntoConstraints = false starStackView.alignment = .center starStackView.axis = .horizontal starStackView.spacing = 5 for _ in 0…5 { let starView = UIImageView(image: UIImage(systemName: “star.fill”)) starView.frame = CGRect(x: 0, y: 0, width: 40, height: 40) starView.tintColor = .black starStackView.addArrangedSubview(starView) } view.addSubview(starStackView) reviewTableView = UITableView() reviewTableView.translatesAutoresizingMaskIntoConstraints = false reviewTableView.delegate = self reviewTableView.dataSource = self view.addSubview(reviewTableView) applyAutoConstraints() }
Los UITableViewDataSource
se configura como cualquier otra vista de tabla. Devolvemos una fila en cada sección y configuramos las celdas según nuestra costumbre la clase RestaurantReviewCell
.
Antes de configurar la celda, registre la clase UITableViewCell
utilizada con la vista de tabla. Agregue lo siguiente a preparar UITableView
:
reviewTableView.register(RestaurantReviewCell.self, forCellReuseIdentifier: “reviewCell”)
Para configurar la celda, agregue lo siguiente al método cellForRowAt
:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { // 1 let cell = tableView.dequeueReusableCell(withIdentifier: “reviewCell”, for: indexPath) as! RestaurantReviewCell // 2 if let writer = data[indexPath.section].writer { cell.reviewerLabel.text = “\(writer) said:” } if let reviewText = data[indexPath.section].reviewText { cell.reviewLabel.text = “\(reviewText)” } // 3 return cell }
1. Quite la celda, usando el identificador "reviewCell"
y la clase "RestaurantReviewCell"
.
2. Extraiga los datos, según la sección que se muestra. Primero, desenvuelva el valor de la propiedad "writer"
de nuestra fuente de datos (recuerde que es del tipo "Review"
). Luego, desenvuelve el valor de "reviewText"
.
3. Devuelve el celular.
IU Trabajar con la vista de tabla
A continuación, en ´UITableViewDelegate`
, establezca el número de secciones de la vista de tabla en el ´recuento`
de la matriz ´datos`
para crear el número de secciones necesarias para mostrar la cantidad correcta de datos.
func numberOfSections(in tableView: UITableView) -> Int return data.count
Establezca la altura de las filas en 140
(esto se puede cambiar según su caso de uso).
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat return 140
Ahora, para agregar el espacio a las celdas, debemos crear una vista para el encabezado de cada sección. Llame al método ´viewForHeaderInSection`
y agregue lo siguiente:
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? // 1 let headerView = UIView() // 2 headerView.backgroundColor = view.backgroundColor // 3 return headerView
Aquí está el desglose de lo que se acaba de agregar:
1. Cree la vista de encabezado como una ´UIView`
.
2. Establezca el color de fondo del encabezado en la propiedad ´view.backgroundColor`
del controlador de vista. (Esto crea un efecto de diseño que hace que el encabezado parezca transparente).
3. Devuelve el ´headerView`
para establecer el encabezado de cada sección de la vista de tabla.
Esto produce un espaciado básico entre las celdas. La altura del encabezado se puede configurar de la siguiente manera:
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat return 20
Los UITableViewDelegate
y UITableViewDataSource
debería verse así:
extension RestaurantReviewsViewController: UITableViewDelegate { func numberOfSections(in tableView: UITableView) -> Int { return data.count } func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { return 140 } func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { let headerView = UIView() headerView.backgroundColor = view.backgroundColor return headerView } func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { return 20 } }extension RestaurantReviewsViewController: UITableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 1 } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: “reviewCell”, for: indexPath) as! RestaurantReviewCell if let writer = data[indexPath.section].writer { cell.reviewerLabel.text = “\(writer) said:” } if let reviewText = data[indexPath.section].reviewText { cell.reviewLabel.text = “\(reviewText)” } return cell } }
Anteriormente mencioné un diseño «limpio». En este momento, el diseño de cada celda parece un básico UITableViewCell
; un rectángulo blanco.
Para aumentar la ‘limpieza’ del diseño, cambie el leadingAnchor
y trailingAnchor
para empujar los lados de la vista de la mesa a 20 puntos de cada lado de la vista:
reviewTableView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20), reviewTableView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
Las celdas siguen siendo rectángulos blancos básicos, aunque el RestaurantReviewCell
tiene su layer.cornerRadius
establecido en 20
. Esto se debe a que el color de fondo de la vista de tabla es blanco.
Para solucionar esto, debemos eliminar el color de fondo de la vista de tabla, que actualmente es blanco. Quite el fondo de la vista de tabla configurando la propiedad backgroundColor
de la vista de tabla para .clear
.
reviewTableView.backgroundColor = .clear
Finalmente, dado que esta es una lista básica, tocar las celdas es inútil y no mejora la experiencia del usuario. Para deshabilitar el toque en la vista de tabla, configure la propiedad allowsSelection
a false
.
reviewTableView.allowsSelection = false
Espero que te haya sido de utilidad. Gracias por leer este tutorial.
Añadir comentario