Alexandre Freire

Blog sobre desarrollo en Swift, iOS y Xcode

Altura automática de una UITableViewCell

Mar 23, 2020

Para crear una celda personalizada que calcule automáticamente su altura no es suficiente utilizar AutoLayout.

Puede que tengas las constraints perfectamente configuradas y sin ningún conflicto. Sin embargo, la celda no calcula automáticamente su altura y Xcode te lanza el siguiente error en la consola:

[Warning] Warning once only: Detected a case where constraints ambiguously suggest a height of zero for a table view cell's content view. We're considering the collapse unintentional and using standard height instead.

En este artículo te voy a contar la clave para que tu UITableViewCell calcule su altura automáticamente según su contenido.

Caso práctico

Supón que estamos creando una app de noticias y su principal pantalla es una lista de artículos. El ArticleListViewController tiene una UITableView que utiliza una celda personalizada, llamada ArticleCell.

Para simplificar el tutorial, esta celda tiene únicamente un UILabel con la propiedad numberOfLines igual a 0, para que pueda tener tantas líneas como sea necesario.

Además, éste siempre estará centrado verticalmente y con un margen de 24 puntos tanto a la Izquierda como a la derecha.

Después de configurar las AutoLayout constraints quedaría así:

UITableViewCell
constraints

Lo siguiente que tendrías que hacer según la mayoría de la documentación, incluida la de Apple, es configurar la propiedad rowHeight del UITableView dentro de ArticleListViewController. En el método viewDidLoad(), añade lo siguiente:

override func viewDidLoad() {
    super.viewDidLoad()
    // Configure tableView dataSource, custom cells, etc...
    // ... 
        
    tableView.rowHeight = UITableView.automaticDimension
}

Si ejecutas ahora el proyecto, te encontrarás que las celdas no crecen automáticamente basadas en su contenido, y Xcode te lanza el error del que te hablé arriba:

[Warning] Warning once only: Detected a case where constraints ambiguously suggest a height of zero for a table view cell's content view. We're considering the collapse unintentional and using standard height instead.

Resizable Cells

¿Cómo se soluciona el error?

El truco está en añadir constraints a todos los extremos de la celda: top, bottom, trailing y leading.

Es decir, el UILabel debe de tener, como mínimo:

  • Una contraint al leading de la super vista
  • Una constraint al trailing de la super vista
  • Una contraint al top de la super vista
  • Una constraint al bottom de la super vista

En el caso de esta celda, te faltan las constraints al top y al bottom de la celda. Personalmente, yo suelo poner la distancia mínima (con la opción “mayor o igual”) y dejar a AutoLayout que haga el resto:

UITableViewCell con constraints
constraints

Únete a la newsletter para no perderte ningún nuevo tutorial: recibe un email cuando se publiquen nuevos artículos o vídeos y no pierdas la oportunidad de seguir aprendiendo. 

Conclusión

Como puedes ver, utilizar AutoLayout y tener las constraints bien configuradas y sin conflictos no es suficiente. El truco es añadir constraints a todos los extremos: leading, trailing, top y bottom. Sólo así AutoLayout será capaz de calcular automáticamente la altura de la celda.

Si te ha resultado útil el post, ¿me haces un favor? Compártelo en tus redes sociales para ayudar a más gente. Si tienes cualquier duda no dudes en dejarme un comentario.

¿Me ayudas a compartir en redes sociales?
Share on Facebook
Facebook
Pin on Pinterest
Pinterest
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Buffer this page
Buffer
Share on Reddit
Reddit

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *