Scaling of image on scroll in a UITableView

Question

I'm trying to recreate this effect -

There's a UIImageView in the header section of a UITableView. When the user scrolls down, the size of the image reduces and scrolls under the navigation bar and when they scroll back up the UIImageView expands and comes back to it's original position.

Twitter for iOS has this effect on your profile.

So far this is what I know - The code will come under the scrollViewDidScroll method and I'll have to use 2 images, one large and one small. I need help figuring out how to transition between these 2 images inside the method.

I'd put image behind of tableview and resize it on scroll. `contentInset` and `contentOffset` are both perfect to make this effect work with least efforts. — Ben Affleck, Dec 17 '14 at 17:10

Sean Dev · Accepted Answer · 2015-02-27T14:17:42.870

If you want to achieve the Twitter scrolling-expanding UIImageView there is a tutorial by Yari D'areglia that outlines how to do this. You might find it useful. The link includes a video to demonstrate the desired effect.

http://www.thinkandbuild.it/implementing-the-twitter-ios-app-ui/

Alternative Source Code

#define IMAGE_VIEW_TAG 100
#define IMAGE_SCROLL_VIEW_TAG 101

    #pragma mark - ScrollView Delegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
        if(scrollView.tag == IMAGE_SCROLL_VIEW_TAG) return;

    UITableView * tv = (UITableView*) scrollView;
    UITableViewCell * cell = [tv cellForRowAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:0]];
    UIScrollView * svImage = (UIScrollView*)[cell viewWithTag:IMAGE_SCROLL_VIEW_TAG];
    CGRect frame = svImage.frame;
    frame.size.height =  MAX((_imageHeaderHeight-tv.contentOffset.y),0);
    frame.origin.y = tv.contentOffset.y;
    svImage.frame = frame;
    svImage.zoomScale = 1 + (abs(MIN(tv.contentOffset.y,0))/320.0f);
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
        return [scrollView viewWithTag:IMAGE_VIEW_TAG];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
        UITableViewCell * cell;

        NSLog(@"Row %@", indexPath);
        if(indexPath.row == 0){
                static NSString * headerId = @"headerCell";
                cell = [tableView dequeueReusableCellWithIdentifier:headerId];
                if(!cell) {

// create cell as it doesn't exist
                            cell = [[UITableViewCell alloc]initWithFrame:CGRectMake(0.0, 0.0, self.view.frame.size.width, _imageHeaderHeight)];
                            cell.backgroundColor = [UIColor clearColor];
                            cell.selectionStyle = UITableViewCellSelectionStyleNone;

                        // image view
                        UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0.0f, 0.0f, cell.contentView.frame.size.width, _imageHeaderHeight)];
                        imageView.contentMode = UIViewContentModeScaleAspectFill;
                        imageView.tag = IMAGE_VIEW_TAG;
                        imageView.clipsToBounds = YES;
                        imageView.autoresizingMask = UIViewAutoresizingFlexibleHeight;

                        UIScrollView * svImage = [[UIScrollView alloc]initWithFrame:imageView.frame];
                        svImage.delegate = self;
                        svImage.userInteractionEnabled = NO;

                        [svImage addSubview:imageView];

                        // image
                        svImage.tag = IMAGE_SCROLL_VIEW_TAG;
                        svImage.backgroundColor = [UIColor blackColor];
                        svImage.zoomScale = 1.0f;
                        svImage.minimumZoomScale = 1.0f;
                        svImage.maximumZoomScale = 2.0f;
                        [cell.contentView addSubview:svImage];
                        UIImageView * headerInfo = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]];

                    [cell.contentView addSubview:headerInfo];

                    CGRect headerFrame = headerInfo.frame;
                    headerFrame.size.height = 149.0f;
                    headerFrame.origin.y = _imageHeaderHeight - 149.0f;
                    headerInfo.frame = headerFrame;
}
// cell exists - grab a reference to the image it displays
            UIImageView *imageView = (UIImageView*)[cell viewWithTag:IMAGE_VIEW_TAG];

// maybe change the imageView
return cell;
}

Taken From Michael Henry: https://github.com/michaelhenry/MHYahooParallaxView

Scaling of image on scroll in a UITableView

1 Answers1