library - Tamaño automático de UITableViewCell en iOS 8

swift libraries

Question

Tengo una subclase UITableViewCell que contiene una etiqueta multilínea, y me gustaría que la celda se dimensione de forma dinámica en función del contenido de esa etiqueta. Soy consciente de que iOS 8 introdujo celdas de tamaño automático basadas en restricciones de AutoLayout, y he encontrado varios ejemplos de esto ya en SO, pero todavía tengo problemas para implementar este comportamiento de forma adecuada.

Aquí está mi implementación de updateConstraints:

- (void)updateConstraints {
    [super updateConstraints];

    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[_nameLabel(==20)]-10-[_tweetLabel]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_nameLabel, _tweetLabel)]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[_avatarView]-10-[_nameLabel]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_avatarView, _nameLabel)]];

    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_nameLabel]-10-[_tweetLabel]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_nameLabel, _tweetLabel)]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[_avatarView]-10-[_tweetLabel]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_avatarView, _tweetLabel)]];

    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[_avatarView(==45)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_avatarView)]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[_avatarView(==45)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_avatarView)]];
}

En el controlador de vista de tabla, establecí el alto de fila en UITableViewAutomaticDimension (y también establecí una altura de fila estimada). En tiempo de ejecución, recibo una serie de errores de diseño automático y todas las celdas de la vista de tabla aparecen casi completamente superpuestas.

Los conflictos de diseño automático se encuentran entre las siguientes restricciones:

• V:|-(10)-[_nameLabel]
• V:[_nameLabel(20)]
• V:[_nameLabel]-(10)-[_tweetLabel]
• V:[_tweetLabel]-(10)-|
• V:[cell(44)]

Sospecho que la última restricción, "UIView-Encapsulated-Layout-Height", que obliga a una altura de 44, es la causa del problema, pero no estoy muy seguro de dónde viene eso, así que espero que alguien pueda arrojar algo de luz sobre la cuestión.

Answer 1

Para implementar alturas de fila automáticas para celdas de vista de tabla, debe hacer lo siguiente:

1. Implemente las restricciones de diseño automático dentro del contenido de la celda que permita que la vista exprese su altura preferida. Asegúrese de configurar UILabel s para ajustar la palabra en varias líneas.

   Asegúrese de haber definido una cadena axial de restricciones en ambas dimensiones, es decir, restricciones que colectivamente se unen desde un borde de la vista al otro. Quizás la forma más fácil de asegurarse de que estas restricciones sean correctas es implementar su contenido personalizado como una antigua UIView (que es fácil de probar), y luego usar restricciones para que UITableViewCell.contentView abraza esa vista. (Utilizo esta idea para automatizar la creación de la "celda de ajuste de vista").

2. Establecer tableView.rowHeight = UITableViewAutomaticDimension

3. Establezca tableView.estimatedRowHeight = 400 o algún otro valor razonablemente generoso para solucionar algunos errores de UIKit cuando la estimación sea demasiado baja.

He pasado una gran cantidad de tiempo trabajando con esta característica. Este repositorio de github muestra siete ejemplos completos de celdas de vista de tabla de tamaño propio que contienen una sola etiqueta de texto de envoltura: programática, basada en plumines, basada en guiones gráficos, etc.

Finalmente, no se preocupe demasiado si ve advertencias sobre restricciones insatisfactorias que mencionan "UIView-Encapsulated-Layout-Height" o similar la primera vez que se carga la vista de tabla. Este es un artefacto del proceso inicial de UITableView para crear una celda, determinar cuál debe ser su tamaño en función de las restricciones de diseño automático y mantener la UITableViewCell contentView su contentView . El repositorio que mencioné anteriormente tiene una discusión y un código más extensos para explorar este rincón algo incómodo de la API.

Solo debe preocuparse por las advertencias de restricción de restricciones si persisten incluso después de que la celda se haya cargado y se haya desplazado un poco, o si inicialmente está viendo diseños incorrectos. En este caso, una vez más, el primer paso siempre debe ser asegurar que sus restricciones sean correctas desarrollándolas y probándolas de manera aislada, si es posible, en una UIView simple.

Answer 2

¿Estás seguro de que tienes -traducirAutoresizingMaskIntoConstraints establecido en NO en la celda? Si no lo hace, el sistema genera restricciones basadas en la máscara de aumento automático, que era la forma anterior de hacer el diseño en iOS, y debe deshabilitarse cuando se usa Diseño automático.

Answer 3

Me acabo de enterar de este problema.

De numerosos otros puestos de recomiendan:

self.contentView.autoresizingMask = UIViewAutoresizingFlexibleHeight;

Eso no funcionó para mí al principio. Descubrí que también tengo que hacer :

self.frame = CGRectMake(0, 0, self.frame.size.width, 50);

El método init de mi celda personalizada se parece a él:

-(id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

    if(self)
    {
        [self initViews];
        [self initConstraints];
    }

    return self;
}

Puse el código en mi método "initViews":

-(void)initViews
{
    ...

    // fixes an iOS 8 issue with UIViewEncapsulated height 44 bug
    self.contentView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
    self.frame = CGRectMake(0, 0, self.frame.size.width, 50);
}

El problema desapareció y mi celda parece correcta también.

¿Esto funciona para tí?