Question

I have a dynamic table view with cells populating from a db.
When a cell is selected the user should have the possibility to choose few other options.
I know how to push another view when the cell is selected but I don’t like this approach graphically.
It could be better if, for example, the same cell could flip over and show the options (then flip back) maybe with a swipe.
Or the entire cell could slide off the screen revealing the options, or another view could slide down from the cell and then slide back up.

Which of these solutions is the easiest to do?
Can anyone point me to the right direction? I don’t need the code of course, I’m here to learn and I just need to know what to look at.
Until now, I’ve read something about subclassing the UITableViewCell, but, honestly, I haven’t got it yet.
Any input will be greatly appreciated.

Answer 1

You would use a UITableViewCell subclass with a foreground and a background view and a UIPanGestureRecognizer. this recognizer will trigger the swipe and handles the moving of the foreground view.

that said, you’ll find a implementation here: https://github.com/spilliams/sparrowlike

the important bits:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"CustomCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    // Configure the cell...
    UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
    [panGestureRecognizer setDelegate:self];
    [cell addGestureRecognizer:panGestureRecognizer];

    return cell;
}

#pragma mark - Gesture recognizer delegate
- (BOOL)gestureRecognizerShouldBegin:(UIPanGestureRecognizer *)panGestureRecognizer
{
    CustomCell *cell = (CustomCell *)[panGestureRecognizer view];
    CGPoint translation = [panGestureRecognizer translationInView:[cell superview] ];
    return (fabs(translation.x) / fabs(translation.y) > 1) ? YES : NO;
}

#pragma mark - Gesture handlers

-(void)handlePan:(UIPanGestureRecognizer *)panGestureRecognizer
{
    float threshold = (PAN_OPEN_X+PAN_CLOSED_X)/2.0;
    float vX = 0.0;
    float compare;
    NSIndexPath *indexPath = [self.tableView indexPathForCell:(CustomCell *)[panGestureRecognizer view] ];
    UIView *view = ((CustomCell *)panGestureRecognizer.view).frontView;

    switch ([panGestureRecognizer state]) {
        case UIGestureRecognizerStateBegan:
            if (self.openCellIndexPath.section != indexPath.section || self.openCellIndexPath.row != indexPath.row) {
                [self snapView:((CustomCell *)[self.tableView cellForRowAtIndexPath:self.openCellIndexPath]).frontView toX:PAN_CLOSED_X animated:YES];
                [self setOpenCellIndexPath:nil];
                [self setOpenCellLastTX:0];
            }
            break;
        case UIGestureRecognizerStateEnded:
            vX = (FAST_ANIMATION_DURATION/2.0)*[panGestureRecognizer velocityInView:self.view].x;
            compare = view.transform.tx + vX;
            if (compare > threshold) {
                [self snapView:view toX:PAN_CLOSED_X animated:YES];
                [self setOpenCellIndexPath:nil];
                [self setOpenCellLastTX:0];
            } else {
                [self snapView:view toX:PAN_OPEN_X animated:YES];
                [self setOpenCellIndexPath:[self.tableView indexPathForCell:(CustomCell *)panGestureRecognizer.view] ];
                [self setOpenCellLastTX:view.transform.tx];
            }
            break;
        case UIGestureRecognizerStateChanged:
            compare = self.openCellLastTX+[panGestureRecognizer translationInView:self.view].x;
            if (compare > PAN_CLOSED_X)
                compare = PAN_CLOSED_X;
            else if (compare < PAN_OPEN_X)
                compare = PAN_OPEN_X;
            [view setTransform:CGAffineTransformMakeTranslation(compare, 0)];
            break;
        default:
            break;
    }
}
-(void)snapView:(UIView *)view toX:(float)x animated:(BOOL)animated
{
    if (animated) {
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
        [UIView setAnimationDuration:FAST_ANIMATION_DURATION];
    }

    [view setTransform:CGAffineTransformMakeTranslation(x, 0)];

    if (animated) {
        [UIView commitAnimations];
    }
}