how to expand image on UITableView like in CNN app

Question

I have the CNN app on my iPhone.

If you open it will show "top stories", and has always a picture on the top of the table.

When we slide our finger down it expands/zooms the image.

When we slide our finger up to show more rows it does not move the image upwards at the same speed has the table rows instead the table rows move faster than the picture going off the screen.

Do you know how to do this effect?

Answer 1

You need UIImageView to UIScrollView contentInset and set top inset more than zero.

UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

UIImage *topImage = [UIImage imageNamed:@"photo"];
topImage.frame = CGRectMake(0, -topImage.frame.size.height, topImage.frame.size.width, topImage.frame.size.height);
[scroll addSubview:topImage];

self.contentInset = UIEdgeInsetsMake(topImage.frame.size.height, 0, 0, 0);

After that set UIScrollView's contentOffset like this

scroll.contentOffset = CGPointMake(0, topImage.frame.size.height);

So you have the UIScrollView with image inside it. Now you just need to add delegate to UIScrollView and wait for - (void)scrollViewDidScroll:(UIScrollView *)scrollView. Resize image and change contentInset right after this method called.

This advice you also can apply to UITableView similar way, or create category on UIScrollView.

I also advice you to read code of this project https://github.com/samvermette/SVPullToRefresh. It's also about UITableView and adding view to it's top side