Question

I currently have a list of documents, displayed one after another. When some of these documents animate towards another document (to create a folder), I want to fill the blank space that’s remaining with the previous documents, move them up 165 pixels (each document thumbnail’s height) each.

So, I thought I could just do exactly that. But there can be more than one view that animates, so it doesn’t really work.

For instance, 2 documents (which are above a document) may disappear, followed by a blank space after that document (where a previous document used to be), then another 2 documents, followed by 3 blank spaces, then another 4 documents.

Example:
White spaces indicate a document which is gone, black indicate documents which exist



I decided on a method that might work:

• Find out how many blank spaces are above a document (until it hits another document, so it’s not the total number of blank spaces above the document, just the number until it reaches a document)

then

• Calculate how many pixels to move it up by multiplying the count of ‘transparent’ documents above the current document by 165

and repeat this process for every single document, starting at the bottom of the list.

So I tried writing some code for that, but it doesn’t completely move all the documents. Instead, it moves the first document, but no others.

Here’s my code:

incCtr is the number of blank spaces above the document.

for (int i = [documentThumbnails count]-1; i != 0; i--) {
    int ctr = i;
    int incCtr = 0;

    //while there is a blank space, increment incCtr
    while (![self thumbnailExistsAtSpecificIndex:ctr-1]) {
        ctr--;
        incCtr++;
    }

    uint32_t toMoveUpYCoordinate;
    thumbnailView *object = [documentThumbnails objectAtIndex:i];

    toMoveUpYCoordinate = (165 * incCtr);

    object.frame = CGRectMake(13, object.frame.origin.y-toMoveUpYCoordinate, object.frame.size.width, object.frame.size.height);;
}

Any help on this would be appreciated.

Answer 1

You need to think more generically…. picture the boxes as a list, you can render the list (position the boxes according to their sequence), now if you remove one or two boxes (or any number!) you simply re-render the list in an animation block and everything works…

Check out my article on doing exactly this. It works in a grid but the principles are the same, you just layout the items vertically only.