CODEWITHSUNDEEP
iosobjective-cuitableview
zeroonnet
zeroonnet

Reputation: 175

how to expand image on UITableView like in CNN app

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?

Upvotes: 3

Views: 1498

Answers (3)

Denis
Denis

Reputation: 3353

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

Upvotes: 1

SolidSun
SolidSun

Reputation: 2189

My guess is that the top cell (or cells) of the tableview are transparent and there is a UIImageView behind the tableview that is resized/moved based on how the table view is scrolled.

Since the table view inherits from UIScrollView, its delegate (UITableViewDelegate) inherits from the UIScrollViewDelegate protocol which is notified when a the user scrolls the scroll view. Implement the - (void)scrollViewDidScroll:(UIScrollView *)scrollView method to receive these notifications and check the contentOffset property on the scroll view.

You may have to implement you own table view controller to build the desired UI in the interface builder.

Upvotes: 0

Alec
Alec

Reputation: 483

It seems like a completely custom effect that you will have to implement yourself. To point you in the right direction, I'd first monitor contentOffset changes in the scrollViewDidScroll: messages sent by your myTableView instance, and when the contentOffset.y < 0, change the scale of your imageView via 

[myImageView setValue:[NSNumber numberWithFloat:scaleIncrementAmountFloat] forKeyPath:@"transform.scale"];

Upvotes: 0

Related Questions