Downscale button image to reserve aspect ratio

Question

The following thread scale Image in an UIButton to AspectFit? discusses several ways to preserve image aspect ratio when scaling a button.

In fact just button.imageView!.contentMode = UIViewContentMode.ScaleAspectFit does the job when target image size is bigger than the actual resource image size. However, if the resource image is bigger than target, ScaleAspectFit applies to the image, while imageView size remains unchanged, with unused areas on both sides of the image, so that the text doesn't have a room.

in the following code I tried to scale the image manually and assign it the the imageView of the button. Then the imageView size also changes to match the size of the image. I put prints to make sure that the image is scaled correctly, and the new frame size is accepted. I disabled "Autoresize subviews" for the button, but nothing helped: with ScaleAspectFit there are still blank spots, without - the image is "squashed":

 let img = imageView.image!
 var ivFrame = imageView.frame
 println("Image view Frame Size Original: \(ivFrame.size.width)x\(ivFrame.size.height)")

 let imgScaled = scaleImage(img,
     CGSize(width: ivFrame.size.height, height: ivFrame.size.height))
 imageView.image = imgScaled

 let imageSize = imgScaled.size
 println("Image Size Scaled: \(imageSize.width)x\(imageSize.height)");

 imageView.frame = CGRectMake(imageView.frame.origin.x, imageView.frame.origin.y,
                    imageSize.width, imageSize.height)
 ivFrame = imageView.frame;
 println("Image view Frame Size New: \(ivFrame.size.width)x\(ivFrame.size.height)");
 imageView.backgroundColor=UIColor.redColor() // to see image area

Console output:

Image view Frame Size Original: 90.0x39.0
Image Size Scaled: 39.0x39.0
Image view Frame Size New: 39.0x39.0

enter image description here

I am trying to get rid of blank spots (read area on the screenshot) in order to make room for the text. I believe the purpose should be clear. — cyanide, May 17 '15 at 01:09
But it isn't clear. Tell me what we are starting with - a button? an image? And what exactly you are trying to accomplish with those. Giving a button an image plus text is easy; it is not clear why you are messing around directly with the image view. — matt, May 17 '15 at 01:12

cyanide · Answer 1 · 2015-05-17T10:23:51.877

With stackoverflow you can often get a negative mark but less often a positive answer:) Here is how I solved the problem.

Assigning an image to button.imageView might work for a regular button, but my buttons are custom buttons. I use button.setBackgroundImage for different control states, and it may cause the trouble. The correct approach is using button.setImage instead of button.imageView.image:

            let targetSize = button.frame.size.height * 0.6
            let imgScaled = scaleImage(button.imageView!.image!,
                        CGSize(width: targetSize, height: targetSize))
            button.setImage(imgScaled, forState:UIControlState.Normal)
            button.setImage(imgScaled, forState:UIControlState.Selected)
            button.setImage(imgScaled, forState:UIControlState.Disabled)

Maybe it would be enough to assign an image only for UIControlState.Normal, I didn't try. But so far so good!

Downscale button image to reserve aspect ratio

1 Answers1