How do I pan the image inside a UIImageView?

Question

I have a UIImageView that is displaying an image that is wider and taller than the UIImageView is. I would like to pan the image within the view us

Answer 1

Brad Larson pointed me down the right road with his suggestion to put the UIImageView inside a UIScrollView.

In the end I put the UIImageView inside of a UIScrollView, and set the scrollView's contentSize and the imageView's bounds to be the same size as the image in the UIImage:

UIImage* image = imageView.image;
imageView.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
scrollView.contentSize = image.size;

Then, I can animate the scrollView's contentOffset to achieve a nice panning effect:

[UIView beginAnimations:@"pan" context:nil];
[UIView setAnimationDuration:animationDuration];
scrollView.contentOffset = newRect.origin;
[UIView commitAnimations];

In my particular case, I'm panning to a random space in the image. In order to find a proper rect to pan to and a proper duration to get a nice constant speed, I use the following:

UIImage* image = imageView.image;

float xNewOrigin = [TCBRandom randomIntLessThan:image.size.width - scrollView.bounds.size.width];
float yNewOrigin = [TCBRandom randomIntLessThan:image.size.height - scrollView.bounds.size.height];

CGRect oldRect = scrollView.bounds;
CGRect newRect = CGRectMake(
    xNewOrigin,
    yNewOrigin, 
    scrollView.bounds.size.width,
    scrollView.bounds.size.height);

float xDistance = fabs(xNewOrigin - oldRect.origin.x);
float yDistance = fabs(yNewOrigin - oldRect.origin.y);
float hDistance = sqrtf(powf(xDistance, 2) + powf(yDistance, 2));
float hDistanceInPixels = hDistance;

float animationDuration = hDistanceInPixels / speedInPixelsPerSecond;

I'm using a speedInPixelsPerSecond of 10.0f, but other applications might want to use a different value.

Answer 2

I'd highly recommend enclosing your UIImageView in a UIScrollView. Have the UIImageView display the full image, and set the contentSize on the UIScrollView to be the same as your UIImageView's size. Your window into the image will be the size of the UIScrollView, and by using scrollRectToVisible:animated: you can pan to particular areas on the image in an animated fashion.

If you don't want scroll bars to appear, you can set the showsHorizontalScrollIndicator and showsVerticalScrollIndicatorproperties to NO.

UIScrollView also provides pinch-zooming functionality, which may or may not be useful to you.