Increasing UITableView tranparency as it's scrolled beyond edge of content

Question

I am trying to replicate a cool UI feature that the app Snapchat has. When you scroll past the normal height of the table view, the more you scroll up the more transparent the cells become, as shown in the attached image. Currently, I have a background image behind my table view, and scrolling the table beyond the edge of its content reveals part of that image. However, what I don't know is how to make the table cells become progressively more transparent as one scrolls the table further. Any help would be greatly appreciated.

Answer 1

You can use property alpha to create transparent view.

use - (void)scrollViewDidScroll:(UIScrollView *) ScrollView when scrolling starts change the alpha value, set alpha value to tableview or cell. set delegate for table view before proceeding.

for cell you can set alpha value like this cell.contentView.alpha=0.2; I hope this could solve if any mistake am glade to see where i did mistake

Answer 2

So this is the way I approached using @Vijay_07's answer:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // Fades out top and bottom cells in table view as they leave the screen
    NSArray *visibleCells = [self.tableView visibleCells];

    CGPoint offset = self.tableView.contentOffset;
    CGRect bounds = self.tableView.bounds;
    CGSize size = self.tableView.contentSize;
    UIEdgeInsets inset = self.tableView.contentInset;
    float y = offset.y + bounds.size.height - inset.bottom;
    float h = size.height;


    if (y > h) {
        self.tableView.alpha = 1 - (y/h - 1)*4;
        for (UITableViewCell *cell in visibleCells) {
            cell.contentView.alpha = 1 - (y/h - 1)*4;
        }
    } else {
        for (UITableViewCell *cell in visibleCells) {
            cell.contentView.alpha = 1;
        }
        self.tableView.alpha = 1;
    }
}

Meanwhile:

1) in your storyboard make sure you use a UIImageView below the table

2) in the viewDidLoad do this:

UIImageView *myImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"SAMEIMAGE HERE!!.png"]];
[self.tableView setBackgroundView: myImage];
[self.tableView setBackgroundColor:[UIColor clearColor]];
[self scrollViewDidScroll:self.tableView];

3) in your .h add <UIScrollViewDelegate>

and you should be fine.