ios - UICollectionView que anima el cambio de tamaño de celda causa un comportamiento no deseado

animation flowlayout

Question

Tengo un UICollectionViewController que usa un UICollectionViewFlowLayout estándar para mostrar una sola columna vertical de celdas. Estoy intentando crear una animación de expansión / colapso en una celda cuando se toca una celda. Uso el siguiente código para lograr esto:

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath (NSIndexPath *)indexPath
{
    [self.feedManager setCurrentlySelectedCellIndex:indexPath.item];
    [self.collectionView performBatchUpdates:nil completion:nil];
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //Return the size of each cell to draw
    CGSize cellSize = (CGSize) { .width = 320, .height = [self.feedManager heightForCellAtIndexPath:indexPath] };
    return cellSize;
}

La propiedad ''selectedCellIndex'' en mi objeto de administración le dice al modelo de datos que devuelva un tamaño expandido o contraído dentro de heightForCellAtIndexpath:

[self.collectionView performBatchUpdates:nil completion:nil];

A continuación, el performBatchUpdates:completiong: anima este cambio de tamaño muy bien. ¡Sin embargo! Cuando ocurre la animación, la celda en expansión puede hacer que una celda parcialmente visible en la parte inferior de la pantalla salga de la pantalla.

Si este es el caso y posteriormente colapso esta celda, la celda ahora fuera de la pantalla se ajustará a su posición anterior sin animación, mientras que todas las otras celdas visibles se animarán como se desee. Mi intuición dice que este es el comportamiento correcto ya que la celda está fuera de la pantalla cuando se realiza la animación de colapso y no se está incluyendo en el proceso de representación de la animación. Mi pregunta es: ¿cómo evito que esto suceda?

Preferiría que todas las celdas se animasen juntas independientemente de si están fuera de la pantalla o no. ¿Alguna idea?

Answer 1

Este es un error UICollectionViewFlowLayout , pero hay una solución. El problema es que los atributos devueltos por initialLayoutAttributesForAppearingItemAtIndexPath: tienen los marcos incorrectos. Específicamente, tienen los marcos de la posición final, en pantalla en lugar de la posición inicial, fuera de pantalla. Solo necesita anular este método y devolver los fotogramas correctos. La estructura básica de la anulación se vería así:

- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath
{
    UICollectionViewLayoutAttributes *pose = [super initialLayoutAttributesForAppearingItemAtIndexPath:itemIndexPath];
    if (<test for incorrect frame>) {
        CGRect frame = pose.frame;
        frame.origin.y = <calculate correct frame>;
        pose.frame = frame;
    }
    return pose;
}

Usted será responsable de identificar los escenarios en los que es necesario ajustar los marcos, lo que puede implicar mantener su propio estado interno. No he trabajado en esta lógica, pero hice una prueba cruda y pude obtener una animación fluida.

Generalizando un poco, es mi experiencia que UICollectionViewFlowLayout tiene tantos UICollectionViewFlowLayout y hay tantos casos de esquina con los que lidiar si tienes elementos que se mueven dentro y fuera de la pantalla combinados con inserciones, eliminaciones o movimientos que he encontrado es más fácil rodar mis propios diseños simples. Si no va a hacer inserciones, eliminaciones o movimientos, anular UICollectionViewFlowLayout puede ser su mejor UICollectionViewFlowLayout .

Dejame saber si necesitas mas ayuda.

EDITAR

Si está interesado en ver el diseño de una tercera parte, abro el diseño de cuadrícula personalizado VCollectionViewGridLayout y agregué un proyecto de ejemplo que demuestra la altura de la celda de expansión uniforme. Intenta ejecutar el proyecto Expandir . También hay un proyecto Sort & Filter con clasificación y filtrado animados. Ambos proyectos le permiten alternar entre el diseño del flujo y el diseño de la cuadrícula para que pueda ver la mejora.