ios - Expanda UILabel dentro de UITableView con el botón "más" como Instagram

objective-c uitableviewautomaticdimension

Question

Tengo un proyecto (que ha sido escrito por otras personas) donde hay un feed con contenido y texto que se muestra dentro de una vista de tabla. Cada publicación corresponde a una sección en la vista de tabla, y cada sección tiene sus propias filas correspondientes a elementos como contenido, texto, botón Me gusta, etc.

Necesito mostrar una etiqueta corta para los subtítulos posteriores con un botón "más" dentro de la celda de la vista de tabla, y cuando se toca más botón, la etiqueta se expandirá al tamaño que corresponda, todo sucediendo dentro de una celda de vista de tabla. Cuando se toca el botón más, cambio la propiedad numberOfLines la etiqueta a cero, y como las celdas tienen altura automática, todo lo que necesito es volver a cargar esa celda de subtítulos en particular. (la celda se muestra correctamente con el tamaño expandido si configuro numberOfLines a 0 en primer lugar antes de mostrar la celda).

He intentado:

[tableView beginUpdates]; tableView endUpdates];

He probado varias opciones de animación con:

[tableView reloadRowsAtIndexPaths:@[myPath] withRowAnimation:UITableViewRowAnimation(Bottom,Top,None etc)];

He intentado:

[tableView reloadSections:[NSIndexSet indexSetWithIndex:myPath.section] withRowAnimation:UITableViewRowAnimation(Top,Bottom,None etc)];

Pero todos producen el mismo resultado: todo el diseño de la vista de la tabla se desordena: salta a otra celda, algunas vistas se quedan en blanco, las celdas se superponen entre sí, el video dentro de las celdas deja de reproducirse y la etiqueta no se expande (pero se actualiza por dentro en sí, por ejemplo, ese breve texto de vista previa con una línea anima desde arriba / abajo, etc. pero no se expande).

¿Qué podría estar causando el desorden de toda la vista de tabla y cómo puedo volver a cargar solo una celda correctamente con una animación de expansión, sin desordenar todo el diseño? He visto muchas preguntas y respuestas sobre esto, pero todas recomiendan las opciones que ya he probado y explicado anteriormente.

Mi aplicación se dirige a iOS 8.0+

ACTUALIZACIÓN: Aquí está el código relevante (con algunas partes relacionadas con el funcionamiento interno que no están relacionadas con el diseño, eliminado):

MyCell *cell = (MyCell *)[tableView dequeueReusableCellWithIdentifier: MyCellIdentifier forIndexPath:indexPath];
cell.delegate = self;
cell.indexPathToReloadOnAnimation = indexPath;
cell.shouldShortenCaption = YES;

id post = self.posts[indexPath.section] ;
[cell setPost:post];

return cell;

Y dentro de setPost: ::

if(self.shouldShortenCaption){
    captionLabel.numberOfLines = 2;
}else{
    captionLabel.numberOfLines = 0;
}
NSString *text = [some calculated (deterministic) text from post object];

La acción del botón es simple:

self.shouldShortenCaption = NO;
[one of the reload codes that I''ve written above in the question]

ACTUALIZACIÓN 2: Aquí hay algunos métodos más con respecto al problema:

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    if (section < self.posts.count) {
        return 59;
    }else
        return 0;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    if (section < self.posts.count) {
        MyFeedHeader *header = [tableView dequeueReusableCellWithIdentifier:MyFeedHeaderIdentifier];
        header.delegate = self;
        [header setPostIndex:section];
        [header setPost:self.posts[section]] ;

        return header;
    }
    else
        return nil;
}

Encabezado setPost: método básicamente establece los textos relevantes en etiquetas (que no tienen nada que ver con el título, son celdas completamente diferentes. La celda problemática no es la celda del encabezado). La tabla no tiene ningún método de pie de página. El único método con respecto a la altura es el de arriba.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    if (section >= self.posts.count) {
        return 1;
    }
    id post = self.posts[section];
    [calculate number of rows, which is deterministic]
    return [number of rows];
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    BOOL hasCursor = self.cursor && self.hasMore ? 1 : 0;
    return self.posts.count + hasCursor;
}

(El recuento de publicaciones y el cursor y hasMore también son deterministas).

ACTUALIZACIÓN 3: hice una pregunta (que no era un duplicado, aunque hay preguntas similares) y obtuve una respuesta útil que resolvió mi problema. ¿Pueden los votantes negativos explicar por qué han votado negativamente?

Answer 1

Aquí hay un ejemplo: https://github.com/DonMag/DynamicCellHeight

La Tabla B es una forma de lograr "Más / Menos" (la Tabla A fue para otro diseño con el que jugué). Utiliza el [tableView beginUpdates]; tableView endUpdates]; [tableView beginUpdates]; tableView endUpdates]; método de activar el rediseño de la tabla.

La clave es configurar correctamente todas sus restricciones, por lo que el motor de diseño automático hace lo que espera.

El ejemplo está en Swift, pero debería traducirse fácilmente de nuevo a Obj-C (creo que lo hice primero en Obj-C).

Editar: algunas notas adicionales ...

Esto está utilizando un método bastante estándar de celdas de vista de tabla de altura dinámica. Las restricciones de espacio vertical entre los elementos efectivamente "empujan" los límites de la celda. El toque aquí alterna la propiedad numberOfLines de la etiqueta entre 2 y 0 (cero significa tantas líneas como sea necesario). Las llamadas secuenciales a beginUpdates / endUpdates en la vista de tabla le endUpdates al motor de diseño automático que vuelva a calcular las alturas de fila sin necesidad de volver a cargar los datos.

Para este ejemplo, UIView un pequeño "truco" para obtener el efecto de expansión / colapso suave ... La etiqueta multilínea que ves aquí está contenida en una UIView (con clipsToBounds verdadero). Hay una segunda etiqueta multilínea duplicada (alfa 0 para que no sea visible) que controla la altura. Descubrí que cambiar el número de numberOfLines en la etiqueta visible se "ajustaba" a 2 líneas, y luego se producía la animación de cambio de tamaño ... dando como resultado que el texto "saltara".

Solo por el gusto de hacerlo, agregué la versión "no tan buena" a mi repositorio de GitHub por el bien de la comparación.