Altura automática de una UITableViewCell

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í:

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.

¿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:

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.