How to make UIImageView automatically resize to the size of the image loaded

Question

I have put an UIImageView control on my view with IB. The size of the control is just something I decided upon, pretty random size really What I want to do is the control to resize automatically whenever I set the image property to a new image. I want it to actually resize to the size of the image. Can it be done automatically ? without any code intervention ? If not - what will the best approach be in this case ?

What happens today is strange. I load images into the ImageView and I see the images getting displayed properly even though the size of the ImageView is not changed. This interferes with my intention of grabbing users touches over the ImageView. The user touches the actual image, but since some parts of the image are outside ( and this is the strange part ) of the ImageView - point mapping goes crazy Can someone think of any explanation to this ?

thanks

Sox

anyone ? cant find it anywhere – Sox

Answer 1

The size of an image has no bearing on how large the UIImageView actually is, rather the size of the UIImageView solely depends on the size given to it in Interface Builder (or that you assigned to it). Else the images would be all whacky when you use the @2x images for Retina displays for example.

If you want to fix this, you must change the frame when setting the image as well. If you're doing this now:

[imageView setImage:[UIImage imageNamed:@"myImage.jpg"]];

change it to:

UIImage img = [UIImage imageNamed:@"myImage.jpg"];
[imageView setImage:img];
imageView.frame = CGRectMake(imageView.frame.origin.x, imageView.frame.origin.y,
                             img.size.width, img.size.height);

This will however not change the layout of view it is contained within, you can make it change the sizes of the other views automatically under iOS 6 using Layout Constraints. If you are an Apple Developer you can watch the WWDC instruction videos, they explain how that system works quite well.

If you're fine with the view not growing, and the problem is just how the image overflows it's bounds when you change it to one that does not match the dimension of the containing view, you can set the "Clip Subviews" checkbox in Interface Builder for the image view. This will make it so that the view will not draw anything outside it's own bounding box, if you also set the scaling mode to "Aspect Fill" or "Scale To Fill", the image will always fill up the entire bounds of the containing view.

Unlucky

thanks. got the idea. Could you please explain a little bit more your first paragraph ? Not sure I got it all – Sox

What will happens if image height is 1550 * 2025? – Rutkowski

Answer 2

Here is the code snippet I cut and paste often, using the same method as Hampus Nilsson above -

Example

func demo(x0:CGFloat, y0:CGFloat) {
    let imgView = UIImageView(image: UIImage(named: "someImg.png"));
    imgView.sizeToImage();
    imgView.center = CGPoint(x:x0, y:y0);
}

UIImageView Extension

extension UIImageView {

/******************************************************************************/
/** @fcn        sizeToImage()
 *  @brief      size view to image
 *  @@assum     (image!=nil)
 */
/******************************************************************************/
func sizeToImage() {

    //Grab loc
    let xC = self.center.x;
    let yC = self.center.y;

    //Size to fit
    self.frame  = CGRect (x: 0, y: 0, width: (self.image?.size.width)!/2, height: (self.image?.size.height)!/2);

    //Move to loc
    self.center = CGPoint(x:xC, y:yC);

    return;
}

A wonderful cut & paste, use if needed!

Knit

Answer 3

let containerView = UIView(frame: CGRect(x:0,y:0,width:320,height:500)) let imageView = UIImageView()

if let image = UIImage(named: "Image_Name_Here") {
    let ratio = image.size.width / image.size.height
    if containerView.frame.width > containerView.frame.height {
        let newHeight = containerView.frame.width / ratio
        imageView.frame.size = CGSize(width: containerView.frame.width, height: newHeight)
    }
    else{
        let newWidth = containerView.frame.height * ratio
        imageView.frame.size = CGSize(width: newWidth, height: containerView.frame.height)
    }
}

Singly

you can use 3 backticks to create code block and can you add details to code. – Fireweed