Scaling down UIImageView placed in a UIScrollView - ios

Question

In Xcode 5 I have created a universal app, with a UIScrollView containing an UIImageView (here fullscreen):
Since I've set all UI properties in the Interface Builder (the image to be displayed, the UIImageView dimensions of 1000 x 1000 pixels and the UIImageView Mode set to "Scale To Fill"), the actual source code in the ViewController.m is very short:
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
/*
if (UI_USER_INTERFACE_IDIOM() != UIUserInterfaceIdiomPad) {
_imageView.frame = CGRectMake(_imageView.frame.origin.x,
_imageView.frame.origin.y,
800, 800);
}
*/
_scrollView.contentSize = _imageView.bounds.size;
NSLog(#"%s: _scrollView %# %#",
__PRETTY_FUNCTION__,
NSStringFromCGPoint(_scrollView.frame.origin),
NSStringFromCGSize(_scrollView.frame.size));
NSLog(#"%s: _imageView %# %#",
__PRETTY_FUNCTION__,
NSStringFromCGPoint(_imageView.frame.origin),
NSStringFromCGSize(_imageView.frame.size));
}
This works surprisingly (for me as iOS newbie) well in iPhone and iPad - and the app can even be rotated.
However the image displayed for iPhone is a bit too large and needs to be scaled down for more comfortable playing:
I was hoping, that since the UIImageView Mode is "Scale To Fill", I would just need to change its frame (or bounds? I've tried both) - as in the commented code shown above.
But this doesn't work - the scrolling breaks (can't scroll to the image bottom anymore).
Any advice please?
(I also hope to add a pinch and double tap gesture recognisers later - and scale the UIImageView in them as well).
UPDATE:
I've tried following Andrei's suggestion (thanks!) by adding the following code to the viewDidLayoutSubviews, but the image hasn't scaled down:
if (UI_USER_INTERFACE_IDIOM() != UIUserInterfaceIdiomPad) {
_scrollView.maximumZoomScale = 1.2;
_scrollView.minimumZoomScale = .8;
_scrollView.zoomScale = .8;
}

Answer 1

UIScrollView can handle the zooming for you, together with pinch gestures.
You just need to set the proper values in "minimumZoomScale" and "maximumZoomScale" properties, and it will let the user pinch between those limits.
You also need to implement the
- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView
method from UIScrollViewDelegate. It should just return the imageView.
You can also set the zoom level using the "zoomScale" property.
For double tapping you need to add your own double tap gesture recognizer to the scrollview and increase the zoom level when a double tap occurs.
Updated with delegate method and double tap gesture.

Answer 2

You must definitely read about AutoLayout. You cannot go changing frames and bounds if AutoLayout is turned on. You can of course turn it off for the whole Storyboard.
The solution to your problem are constraints. With them you define how your views are related, for example: how your UIScrollView is related to it's parent view and how UIImageView is related to your UIScrollView.
Read more about constraints on links below:
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/AutolayoutPG/Introduction/Introduction.html
http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1
While UIScrollView can handle zooming with pinching for you, you must implement correct delegate method: viewForZoomingInScrollView:. And of course you must set correct property values for minimumZoomScale and maximumZoomScale.
More information on the following links:
https://developer.apple.com/library/ios/documentation/windowsviews/conceptual/UIScrollView_pg/ZoomZoom/ZoomZoom.html
http://www.raywenderlich.com/10518/how-to-use-uiscrollview-to-scroll-and-zoom-content
Both sites have enough information and examples for you to be able to do this. First experiment with the code available on those sites and then post another more specific question, if you encounter a problem.