Two animations in TableViewController when row is selected

Question

I am implementing TableViewController. Besides smaller problems with UITableViewCellStyle and NavigationControllerTitle (I think I can solve them on my own) I constantly am tearing my hair out about how to implement some animation. Please note that I have searched many topics (this one too: Can you do custom animations for UITableView Cell Inserts?) and googled as much as I could and I do not know how to call things I have to do. So i drawed it to be clear.

There are few cells with small random coloured rectangle on the left. When I click on cell this rectangle expands on full width, without covering the CellText.

The second Animation happens simultaneously, and It's inserts some kind of array, with images, expanding to the bottom and sliding down the cell under it.

I really tried to do write this, but everything I could do was sliding whole view to the right, into nowhere.

Here's my .m file i think i should work on. If I should paste You any other parts, let me know.

-(void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    int selectedRow = indexPath.row;
    NSLog(@"touch on row %d", selectedRow);
    [self animate]; 
}
- (void)animate
{
    [[self.tableView visibleCells] enumerateObjectsUsingBlock:^(UITableViewCell *cell, NSUInteger idx, BOOL *stop) {
        [cell setFrame:CGRectMake(0, cell.frame.origin.y, cell.frame.size.width, cell.frame.size.height)];
        [UIView animateWithDuration:0.2 animations:^{
            [cell setFrame:CGRectMake(320, cell.frame.origin.y, cell.frame.size.width, cell.frame.size.height)];
        }];
    }];
}

Thank You for Your patience, please understand that I would really like to understand how to do it.

score 1 · Answer 1 · answered Nov 06 '15 at 19:55

I really tried to do write this, but everything I could do was sliding whole view to the right, into nowhere.

Yes, it looks like that's exactly what the code you've posted here would do. You're taking all of the visible cells (not just the one that's been selected) and moving them all a full screen-width to the right (offscreen).

My guess is what you want to do is tell the cell to expand that rectangle of color to the right instead. So in -tableView:didSelectRowAtIndexPath: send a message to the cell to modify itself:

-(void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    MyTableViewCell *cell = (MyTableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
    [cell setExpanded:YES animated:YES];
}

Now the cell is responsible for animating that background color to its full width. -setExpanded:YES animated: is just a method name I made up. You can call it whatever makes sense in your app. It might look something like this (written in Safari, so don't expect perfection):

- (void)setExpanded:(BOOL)expanded animated:(BOOL)animated
{
    _expanded = expanded;  // Assumes you have a property for this.

    CGRect frame = self.colorView.frame;
    if (expanded) {
        frame.size.width = self.contentRect.bounds.size.width;
    }
    else {
        frame.size.width = 40.0f;
    }

    [UIView animateWithDuration:0.2 animations:^{
        self.colorView.frame = frame;
    }];
}

Sliding the other content down is a little harder. Is this content part of the cell, a new cell, or a view added over the table view? I'd probably add it as a new cell, so you could animate it into place with the table view's normal insert animation.

For now I would like to add something like Grid View with this downsliding. I did this first animation though, I will post that later. — Drwalcore, Nov 09 '15 at 13:06

score 0 · Accepted Answer · edited Nov 11 '15 at 01:36

I found half of the answer to that. Animation across the screen was pretty tricky, but I did it with little help of another programmer.

 -(void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

{

    [tableView deselectRowAtIndexPath:indexPath animated:YES];

    int selectedRow = indexPath.row;
    NSLog(@"touch on row %d", selectedRow);


    PrototypeCell *prototypeCell =(PrototypeCell *)[tableView cellForRowAtIndexPath:indexPath];
    if (prototypeCell.stretched == NO){
    [UIView animateWithDuration:1 animations:^{
        prototypeCell.View.frame = CGRectMake(0, 0, 320, 120);}
                     completion: nil];
        prototypeCell.stretched = YES;}
    else {
        [UIView animateWithDuration:1 animations:^{
            prototypeCell.View.frame = CGRectMake(0, 0, 15, 120);}
                         completion: nil];
        prototypeCell.stretched = NO;
    }
}

I had to create PrototypeCell to gain access to view. This is half of problem solved. :) It even rolls back when I touch it a second time.

Two animations in TableViewController when row is selected

2 Answers2