How to make scrollView to scroll ImageView until the center? - ios

Question

Sorry for the header, I just did not know how to call it.
I want to make my scrollView able to scroll from top or bottom until the circle in the center, like LinkedIn does it:
So there you can scroll your image until the circle in the center. How can I improve my code, to achieve this?
My code is:
scrollView!.delegate = self
imageView.frame = CGRectMake(0, 0, (scrollView?.frame.width)!, (scrollView?.frame.height)!)
if let validImage = self.avatarImage {
self.imageView.image = validImage
imageView.contentMode = .ScaleAspectFill
imageView.frame = avatarImageFrame!
}
imageView.userInteractionEnabled = true
scrollView?.addSubview(imageView)
scrollView?.contentSize = (avatarImage?.size)!
let scrollViewFrame = scrollView?.frame
let scaleWidth = (scrollViewFrame?.size.width)! / (scrollView?.contentSize.width)!
let scaleHeight = (scrollViewFrame?.size.height)! / (scrollView?.contentSize.height)!
let minScale = min(scaleHeight, scaleWidth)
scrollView?.minimumZoomScale = minScale
scrollView?.maximumZoomScale = 1
scrollView?.zoomScale = minScale
centerScrollViewContents()
}
func centerScrollViewContents() {
let boundsSize = scrollView?.bounds.size
var contentsFrame = imageView.frame
if contentsFrame.size.width < boundsSize?.width {
contentsFrame.origin.x = ((boundsSize?.width)! - contentsFrame.size.width) / 2
} else {
contentsFrame.origin.x = 0
}
if contentsFrame.size.height < boundsSize?.height {
contentsFrame.origin.y = ((boundsSize?.height)! - contentsFrame.size.height) / 2
} else {
contentsFrame.origin.y = 0
}
contentsFrame.size.height = UIScreen.mainScreen().bounds.height
imageView.frame = contentsFrame
}
func scrollViewDidZoom(scrollView: UIScrollView) {
centerScrollViewContents()
}

Answer 1

There are many ways to achieve this. Probably what would work best with the scroll view is to set the frame of the scroll view the same as is the frame of the circle. The content size should still be the same as the background (or rather the image in your case) and when you first enter the screen the content offset should be set so that the image is in center.
So till now you can imagine a small scroll view just behind the circle but the rest of the background is missing. To fix this all you need to do is disable bound clipping on the scroll view which is set to true by default. So set "clip subviews" to false.
Now you can already see the whole image and bouncing is correct to always keep the image inside the circle but one more thing is missing. Since the scroll view is actually quite small you can see you may not interact with it outside its frame. This is a natural behavior which can be changed by overriding a method called hitTest. This method will return a view which should collect the interaction. So we need to subclass the superview of the scroll view:
Regardless of where you do this in the interface builder or in the code I expect you have some view (will call it background) which contains a scroll view (the small one) and an overlay (the one with the circle). The background must be subclassed and have a reference to the scroll view. Then simply override the hit test method like so:
override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? {
var myFrame = frame
myFrame.origin = CGPointZero // maybe this should be commented out
if CGRectContainsPoint(myFrame, point) {
return scrollView
} else {
return super.hitTest(point, withEvent: event)
}
}
By doing this the scroll view is interactable from anywhere within the background, whole image is visible on the background, the image will always be within the circle.
Good luck.