Get current y value location on screen of each UITableViewCell

Question

I have a UITableViewController with a custom class for my UITableViewCell. I have a UIImageView and a UILabel on this UITableViewCell.

I want the content on the UITableViewCell to become a bit more translucent/transparent when it is above a certain y value on the screen, so you get a "fading effect", similar to the Rdio app:

UIImageView and UILabel are 1.0">

MyUIViewController.h

@property (strong, nonatomic) IBOutlet UITableView *tableview;

MyUIViewController.m

@synthesize tableview;

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    NSArray *listOfVisibleCells = tableview.visibleCells;

    for (int i=0; i<[listOfVisibleCells count]; i++) {

        MTTableViewCell *cell = [listOfVisibleCells objectAtIndex:i];

        /* Smooth fade out */
        if (scrollView.contentOffset.y > (cell.frame.origin.y + 10)) {
            [cell.companyImage setAlpha:0.7];
        }
        if (scrollView.contentOffset.y > (cell.frame.origin.y + 20)) {
            [cell.companyImage setAlpha:0.5];
        }
        if (scrollView.contentOffset.y > (cell.frame.origin.y + 30)) {
            [cell.companyImage setAlpha:0.3];
        }
        if (scrollView.contentOffset.y > (cell.frame.origin.y + 40)) {
            [cell.companyImage setAlpha:0.1];
        }

        /* Fade in */
        if (scrollView.contentOffset.y < (cell.frame.origin.y + 10)) {
            [cell.companyImage setAlpha:1.0];
        }
    }
}

Answer 1

This line:

if (scrollView.contentOffset.y > ((i*90)+30) ) {

should be:

if (scrollView.contentOffset.y > (cell.frame.origin.y + 30)) {

Answer 2

I suppose that you can use UITableView Delegate methods to handle these.

UITableViewDelegate :

Tells the delegate the table view is about to draw a cell for a particular row.

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

UIScrollViewDelegate :

Tells the delegate when the user scrolls the content view within the receiver.You can also know the content offset.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

Following these methods,you can detect current UITableViewCell or the offset.y value.

Hope this can help you.

Answer 3

Even though you have received your desired answer, I will add an alternate way to do this.

In your scrollViewDidScroll: method:

if ([myTableView indexPathsForVisibleRows].count) {

    NSIndexPath* firstCellIndexPath = [myTableView indexPathsForVisibleRows].firstObject;

    CGRect cellRect = [myTableView rectForRowAtIndexPath:firstCellIndexPath];//frame of cell with respect to the table content

    CGFloat yOriginForTopCell = [myTableView convertRect:cellRect toView:self.view].origin.y;//get y-origin after converting the co-ordinates to self.view

    NSLog(@"%f", yOriginForTopCell);
}

Here, you get the y-origin of the very first visible cell inside the table irrespective of the scroll state. Once you get your origin, you can use it in whatever way you like. Advantage being, no calculations required on your end. Just choose a value for your top edge (where fading must begin) preferably your topBar/navBar y-origin + height, which turns out to be a constant value.

You may set your alpha dynamically, with a more gradual fade with:

customCell* yourCell = (customCell*)[myTableView cellForRowAtIndexPath:firstCellIndexPath];

yourCell.yourView.alpha = yOriginForTopCell/<CONSTANT_VALUE>;//yourCell = `MTTableViewCell` | yourView = `companyImage`

Here your CONSTANT_VALUE should preferably be 64px(if using native UINavigationBar) or yourTopBar.frame.origin.y + yourTopBar.frame.size.height (if using a custom view at the top).

Try this solution for once.