A very fun thing to do in a lot of these apps is pulling down on lists and zooming in on the header image. Thus its not surprising that this feature is found in many popular apps on the Appstore. In today's video, I'll show you how to utilize a scrollview and its content offset to implement this effect. The math is surprisingly straightforward once you understand how the offset is changing over time as you drag downwards.
Comments (8)
nycheesecake
4 years ago
Hi Brian,
For a weird reason, my "handleTapDismiss" won't fire unless I tap on the very top of the screen (just below the notch area). Any idea why?
Christophe Bugnon
4 years ago
Hey Brian, you just have to apply min on Y.
Your image will not go away on left or right as you had on this before fixing the bug.
Like this:
let changeY = scrollView.contentOffset.y
let changeYMin = min(0, changeY)
let width = view.frame.width - changeYMin * 2
imageView.frame = CGRect(x: +changeYMin, y: +changeYMin, width: width, height: width)
David Guarino
4 years ago
I like it! Nice job Chris
Tube
4 years ago
deltaY
Cinquain
4 years ago
That video was pure fire! Great work Brian
fef
4 years ago
hi Brian, think we can do more simple mathematically, what do you think about this one :
let y = scrollView.contentOffset.y
let width = max (view.frame.width - y , view.frame.width)
image.frame = CGRect = (x: 0 , y: y , width: width, height: width )
image.center.x = scrollView.center.x
Brian Voong
4 years ago
dclawson
4 years ago
Nice work! Always cool to see different ways to approach things.
RobinHe0212
4 years ago
Cool idea. But one more thing u can improve . Check the y value ,if is negative , image.frame = CGRect = (x: 0 , y: -y , width: width, height: width ), otherwise, u cannot pull up the scollview
Alija Sirbic
4 years ago
Hi Brian, I created a StretchyHeader Layout from your tutorial but in the Header i created another collectionview with horizontal scrolling for images.
Now when scrolling the main collectionview vertically the header is only stretching the horizontal collectionview and not the cell with image inside. So the image is not stretching. How can I fix this?
Brian Voong
4 years ago
richardbranson
4 years ago
i can't download any project 32 33 or any other
antoinenei
3 years ago
Hey Brian, thanks a lot for the wonderful course. I'm having trouble making the scroll view scroll down once the screen fills up with information. In stead of scrolling down, the screen bounces back at the top when going down. I've been trying to fix this bug for a while now. Do you have the same behaviour? Do you know why that is? Thank you!
antoinenei
3 years ago
I tried adding the following at the end of the setupLayout():
let contentRect: CGRect = scrollView.subviews.reduce(into: .zero) { rect, view in
rect = rect.union(view.frame)
}
scrollView.contentSize = contentRect.size
as recommended here: https://stackoverflow.com/questions/2944294/how-do-i-auto-size-a-uiscrollview-to-fit-its-content
But I don't get any change. I'm confused as well because when printing scrollView.frame.height and scrollView.frame.width gives 0.0 and 0.0
Anyone know how to solve this?
Thanks!
antoinenei
3 years ago
Sorry for cluttering the comments section, but this will be useful for those looking for this solution:
You first need to paste this extension at the end of your UserDetailsController:
extension UIScrollView{
func setContentViewSize(offset:CGFloat = 0.0) {
// dont show scroll indicators
showsHorizontalScrollIndicator = false
showsVerticalScrollIndicator = false
var maxHeight : CGFloat = 0
for view in subviews {
if view.isHidden {
continue
}
let newHeight = view.frame.origin.y + view.frame.height
if newHeight > maxHeight {
maxHeight = newHeight
}
}
// set content size
self.contentSize = CGSize(width: contentSize.width, height: maxHeight + offset)
// show scroll indicators
showsHorizontalScrollIndicator = true
showsVerticalScrollIndicator = true
}
}
Then call it in an override of ViewDidAppear as so:
override func viewDidAppear(_ animated: Bool) {
scrollView.setContentViewSize()
}