Question

I have an application where I’m using a zooming scrollView to do image cropping to a rectangle with a fixed aspect ratio. I have a mask where I darken the parts of the image that will be cropped. Currently I add this subview to the UIScrollView’s parent, making them siblings, where this mask is ‘higher’ than the scrollview. Looks great. Except…

This mask is also masking the scrollIndicators and therefore looks a bit dumb. I could turn off the scrollIndicators, or, ideally, I’d like to place this UIView underneath the scrollIndicators, but not get scrolled with other content, which is what would happen if I made it a subview of the scrollview via [scrollView addSubview: myMaskView];

Anyone know if this is possible?

Answer 1

First, subclass UIScrollView so that you can modify the default behavior of scroll view.

Second create an image view with your image, and put both the image view and your mask view to a scroll view, this way your views will be underneath the scroll indicator.

Third, in your scroll view delegate method viewForZoomingInScrollView:, return your image view, so that only the image view zooms. Note that the scroll view will adjust the content size to be the size of the returned view, but it’s fine as long as your image view takes up the whole content size.

And last, override layoutSubviews method, move the mask view to visible bounds of scroll view. The layoutSubviews method is said to be called every frame of scrolling, so the position change won’t be visible to end user.

For more details you can refer WWDC session video “Advanced ScrollView Techniques”.

EDIT: OK, just found that you can avoid overriding layoutSubviews by implementing the delegate method scrollViewDidScroll.