Ios – make the UIImageView fit inside the UIScrollView without panning. [iOS]

iosobjective cuiimageviewuiscrollview

I have an image inside of an iOS UIScrollView that only takes up about 1/3rd of the total screen space. The image is too large, so the scrollView is allowing panning around the image. I want the image to be small enough so that there is no panning necessary to see the entire image. How do I resize the image to make it fit inside of the scroll view?

This is the code I am using to set up the image view and the scroll view.

UIImage *image = [UIImage imageNamed:@"banner.png"];
self.imageView = [[UIImageView alloc] initWithImage:image];
self.imageView.frame = (CGRect){.origin=CGPointMake(0.0f, 0.0f), .size=image.size};
[self.scrollView addSubview:self.imageView];

self.scrollView.contentSize = image.size;

Best Answer

You need to set the ImageView's size equal to the scrollView's size. And set the imageView's content mode to scale to fill Eg:

UIImage *image = [UIImage imageNamed:@"banner.png"];
self.imageView = [[UIImageView alloc] initWithImage:image]
self.imageView.frame = CGRectMake (0,0,self.scrollView.frame.size.width,self.scrollView.frame.size.height);

self.imageView.contentMode = UIViewContentModeScaleToFill;
[self.scrollView addSubview:self.imageView];
self.scrollView.contentSize = self.imageView.frame.size;
self.scrollView.bounces = NO;

Related Solutions

Iphone – Uiimageview inside uiscrollview position is not centered

contentoffset is something of the scrollview and is probably not right for this situation. If you want the image to be in the center do this:

imageview.center = scrollview.center;

If you want the image to be at the top left corner of the scrollview do this:

imageview.frame = CGRectMake(0,0,image_width,image_height);

Good luck!

Ios – How to crop a UIImageView to a new UIImage in ‘aspect fit’ mode

Based on my other answer to a similar question I have written this method for a UIImageView category:

-(CGRect) cropRectForFrame:(CGRect)frame
{
    NSAssert(self.contentMode == UIViewContentModeScaleAspectFit, @"content mode must be aspect fit");

    CGFloat widthScale = self.bounds.size.width / self.image.size.width;
    CGFloat heightScale = self.bounds.size.height / self.image.size.height;

    float x, y, w, h, offset;
    if (widthScale<heightScale) {
        offset = (self.bounds.size.height - (self.image.size.height*widthScale))/2;
        x = frame.origin.x / widthScale;
        y = (frame.origin.y-offset) / widthScale;
        w = frame.size.width / widthScale;
        h = frame.size.height / widthScale;
    } else {
        offset = (self.bounds.size.width - (self.image.size.width*heightScale))/2;
        x = (frame.origin.x-offset) / heightScale;
        y = frame.origin.y / heightScale;
        w = frame.size.width / heightScale;
        h = frame.size.height / heightScale;
    }
    return CGRectMake(x, y, w, h);
}

You can pass in the frame of your green rect (assuming it is a subview of the image view) and get the crop rect back for cropping the UIImage. Note that it only works for 'aspect fit' mode! I haven't tested it though. So, tell me if it works!

Best Answer

Related Solutions

Iphone – Uiimageview inside uiscrollview position is not centered

Ios – How to crop a UIImageView to a new UIImage in ‘aspect fit’ mode

Related Topic