Tweetbot banner image pull down to zoom image

Question

Tweetbot and Kickstarter for iOS uses a cool feature on user profiles that have a banner image. If you pull down on the tableView the image zooms.

I have it partially working using the following, it changes the height of the image, but strangely, not the width:

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

    UIImageView *imageView = (UIImageView *)self.tableView.tableHeaderView;
    CGFloat y = -scrollView.contentOffset.y;
    imageView.frame = CGRectMake(0, scrollView.contentOffset.y, self.cachedImageViewSize.size.width+y, self.cachedImageViewSize.size.height+y);
    NSLog(@"%@", NSStringFromCGRect(imageView.frame));

}

Does anyone know how to recreate this effect?

Answer 1

Ok, I figured it out. Here is what I did:

- (void)viewDidLoad {
    [super viewDidLoad];

    self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"church-welcome.png"]];
    self.imageView.contentMode = UIViewContentModeScaleAspectFill;
    self.cachedImageViewSize = self.imageView.frame;
    [self.tableView addSubview:self.imageView];
    [self.tableView sendSubviewToBack:self.imageView];
    self.tableView.tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 170)];

}

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

    CGFloat y = -scrollView.contentOffset.y;
    if (y > 0) {
        self.imageView.frame = CGRectMake(0, scrollView.contentOffset.y, self.cachedImageViewSize.size.width+y, self.cachedImageViewSize.size.height+y);
        self.imageView.center = CGPointMake(self.view.center.x, self.imageView.center.y);
    }

}

Answer 2

The above answer for Swift:

Variable Decelerations:

var imageView: UIImageView!
var cachedImageViewSize: CGRect!

viewDidLoad:

var imageView: UIImageView!
var cachedImageViewSize: CGRect!

override func viewDidLoad() {
    super.viewDidLoad()

    self.imageView = UIImageView(image: UIImage(named: "image-plane"))
    imageView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 170)
    self.imageView.contentMode = .ScaleAspectFill
    self.cachedImageViewSize = self.imageView.frame
    self.tableView.addSubview(self.imageView)
    self.imageView.center = CGPointMake(self.view.center.x, self.imageView.center.y)
    self.tableView.sendSubviewToBack(self.imageView)
    self.tableView.tableHeaderView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 170))
}

scrollViewDidScroll:

override func scrollViewDidScroll(scrollView: UIScrollView) {

        let y: CGFloat = -scrollView.contentOffset.y
        if y > 0 {
            self.imageView.frame = CGRectMake(0, scrollView.contentOffset.y, self.cachedImageViewSize.size.width + y, self.cachedImageViewSize.size.height + y)
            self.imageView.center = CGPointMake(self.view.center.x, self.imageView.center.y)
        }
    }

Answer 3

Swift 3.0 version of Nic Hubbard's answer:

override func viewDidLoad() {

    self.imageView = UIImageView(image: UIImage(named: "header-image"))
    imageView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 170)
    self.imageView.contentMode = .scaleAspectFill
    self.cachedImageViewSize = self.imageView.frame
    self.tableView.addSubview(self.imageView)

    self.imageView.center = CGPoint(x: self.view.center.x, y:self.imageView.center.y)
    self.tableView.sendSubview(toBack: self.imageView)
    self.tableView.tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 170))
}

override func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let y: CGFloat = -scrollView.contentOffset.y
    if y > 0 {
        self.imageView.frame = CGRect(x: 0, y: scrollView.contentOffset.y, width: self.cachedImageViewSize.size.width + y, height: self.cachedImageViewSize.size.height + y)
        self.imageView.center = CGPoint(x: self.view.center.x, y: self.imageView.center.y)
    }
}