Distorting UITableViewCell when scrolling?

Question

I try to make some special effects in an iOS App when user scrolls the UITableView. The effects I would like to implement is:

enter image description here

which is from here.

It is made by Capptivate, but I read through the website & I'm still confused where can I obtain the library.

I know Core Graphics / Core Animation / QuartzCore Framework may help, as hinted by this tutorial. So, assuming the effect is based on a UITableView, how can I distort the UITableViewCell like the screenshot above?

I can make curved table cell by:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString * CellIdentifier = @"Cell";
    UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 

    if (![cell.backgroundView isKindOfClass:[CustomCellBackground class]]) {
        CustomCellBackground * backgroundCell = [[CustomCellBackground alloc] init];
        cell.backgroundView = backgroundCell;
    }

    if (![cell.selectedBackgroundView isKindOfClass:[CustomCellBackground class]]) {
        CustomCellBackground * selectedBackgroundCell = [[CustomCellBackground alloc] init];
        selectedBackgroundCell.selected = YES;
        cell.selectedBackgroundView = selectedBackgroundCell;
    }

    NSString * entry;

    if (indexPath.section == 0) {
        entry = self.thingsToLearn[indexPath.row];
        ((CustomCellBackground *) cell.backgroundView).lastCell = indexPath.row == self.thingsToLearn.count - 1;
        ((CustomCellBackground *)cell.selectedBackgroundView).lastCell = indexPath.row == self.thingsToLearn.count - 1;
    } else {
        entry = self.thingsLearned[indexPath.row];
        ((CustomCellBackground *)cell.backgroundView).lastCell = indexPath.row == self.thingsLearned.count - 1;
        ((CustomCellBackground *)cell.selectedBackgroundView).lastCell = indexPath.row == self.thingsLearned.count - 1;
    }

    cell.textLabel.text = entry;
    cell.textLabel.backgroundColor = [UIColor clearColor];
    cell.textLabel.highlightedTextColor = [UIColor blackColor];

    return cell;
}

but I have no clue how to make it responsive to scrolling.

My Question is: in short, how can I make curved UITableViewCell when scrolling?

There are more SO questions I read:

and some tutorials:

Note: I'm working on iOS 7+ only.

If you are working in a table with a fixed number of elements (like a menu) then I would go for subviews and then use Quartz to create paths with a Bezier curve controlled from the touchesMoved method, instead of using UITableView and UITableViewCells. Keep in mind that at the end all you see in your app is pretty much a UIView or subclass of it.....e — eharo2, May 10 '14 at 04:12
Also, check this example of manipulating a Bezier curve in touchesMoved, I posted, and that may help you. http://stackoverflow.com/questions/22720179/uibezierpath-manipulation-on-ios/22720507#22720507 — eharo2, May 10 '14 at 04:16

score 2 · Accepted Answer · answered Nov 19 '14 at 11:10

2

Please have a look at this github library - https://github.com/brocoo/BRFlabbyTable

answered Nov 19 '14 at 11:10

Aditya Aggarwal

517
6
18

Distorting UITableViewCell when scrolling?

1 Answers1