Make Top image in UIScrollView enlarge on scroll view bounds? - ios

Question

I have a UIScroll view with a UIView inside as content view. The layout is:
self.scrollView = UIScrollView()
self.view.addSubview(self.scrollView)
self.scrollView.backgroundColor = UIColor.yellowColor()
// pin all edges to the edges of the superview (self.view)
self.scrollView.snp_makeConstraints { (make) -> Void in
make.edges.equalTo(self.view)
}
// create contentView
self.contentView = UIView()
self.contentView.backgroundColor = UIColor.redColor()
self.scrollView.addSubview(self.contentView)
// pin the edges of the contentView to the scrollView
self.contentView.snp_makeConstraints { (make) -> Void in
make.edges.equalTo(self.scrollView)
}
In my contentView I have a UIImageView at the top and some UILabels below:
let imageView = UIImageView(...)
let labe1 = UILabel(...)
let labe2 = UILabel(...)
self.contentView.addSubView(imageView)
self.contentView.addSubView(labe1)
self.contentView.addSubView(labe2)
Here is how it looks like:
When I pull down the scroll view the scroll view bounces at the top. I want that the image enlarges when the scroll view bounces.
I did this with the UIScrollViewDelegate:
func scrollViewDidScroll(scrollView: UIScrollView) {
let offsetY: CGFloat = scrollView.contentOffset.y
if offsetY < -64 {
let progress:CGFloat = fabs(offsetY + 64) / 100
self.imageView.transform = CGAffineTransformMakeScale(1 + progress, 1 + progress)
}
}
This works but the problem is that when the image is transformed it should not overlay the border to the red area which contains the Labels. Here is what happens when I bounce:
I want that the image still enlarges but not overlapping the border to the red area. How can I do that?

Answer 1

I suggest you to resize the whole UIScrollView with pager view - don't forget to reset its's frame back to prevent wrong paging.

Answer 2

Just add an empty UIView with some background color as highlighted in image
Or in your code
let imageView = UIImageView(...)
let labe1 = UILabel(...)
let labe2 = UILabel(...)
self.contentView.addSubView(imageView)
//add one more UIView with some background color here
self.contentView.addSubView(labe1)
self.contentView.addSubView(labe2)