Agregar espacio entre las celdas de un UITableView

Muy buenas, me llamo Miguel y aquí les traigo otro nuevo tutorial.

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.

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
}

Esto es lo que hace

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:

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

Para terminar

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.