Tweetbot banner image pull down to zoom image - ios

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)
}
}

Answer 4

I think it's simply resize the image view to fit the vertial space, while keeping the same aspect ratio.

Answer 5

Swift 2 version of Nic Hubbard's answer:
var imageView: UIImageView!
var cachedImageViewSize: CGRect!
override func viewDidLoad(){
super.viewDidLoad()
self.imageView = UIImageView(image: UIImage(named: "church-welcome.png"))
self.imageView.contentMode = .ScaleAspectFill
self.cachedImageViewSize = self.imageView.frame
self.tableView.addSubview(self.imageView)
self.tableView.sendSubviewToBack(self.imageView)
self.tableView.tableHeaderView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 170))
}
func scrollViewDidScroll(scrollView: UIScrollView) {
var 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 6

The above mentioned solutions will actually not really provide the exact implementation of how it is in Tweetbot or Tinder [target's profile picture zooming].
I also had to solve this problem and the most perfect implementation I found is to use 2 main elements:
1) Tableview which has content inset
2) Imageview on top of that table view which has an outlet for top constraint and height constraint and which is on top of that empty space provided by the tableview content inset.
So first make sure to set the insets for the tableView and initial height constraint for the imageView. You can do this in viewDidLoad for example.
imageViewHeightConstraint.constant = view.frame.height * 0.3
tableView.contentInset = UIEdgeInsets(top: view.frame.height * 0.3, left: 0, bottom: 0, right: 0)
Then just listen to thew scrollViewDidScroll delegate method and modify the constraints accordingly.
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let contentOffset = scrollView.contentOffset.y
if -contentOffset >= view.frame.height * 0.3 {
//reset the top constraint
topConstraint.constant = 0
//make the imageview bigger by the additional content offset value
imageViewHeightConstraint.constant = -contentOffset
} else {
topConstraint.constant = -(view.frame.height * 0.3 + contentOffset)
}
}
You may need to inverse the signs according to how you've set your own constraints. And probably there's a way to optimize and not modify the constraints that often, but you get the idea.
Please also note that you need to:
imageView.contentMode = .scaleAspectFill
layer.masksToBounds = true
Otherwise the image will be drawn on top of your first tableView cells [dependent on the image size it may come to cover to whole table view] because it is drawn outside its "bounds".