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?
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);
}
}
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)
}
}
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)
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With