How to configure UIButton imageSize?

Question

How can I adjust the image size of UIButton? I set the image like this:

[myLikesButton setImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal]; 

However, this fills the image to a full button, how can I reduce the image?

Answer 1

If I understand correctly what you are trying to do, you need to play with the insert with the edges of the buttons. Something like:

 myLikesButton.imageEdgeInsets = UIEdgeInsetsMake(top, left, bottom, right); 

Answer 2

Tim's answer is correct, however I wanted to add another sentence, because in my case there was a simpler solution.

I was looking for a UIButton insertion UIButton because I didn’t understand that I could set the content mode on the UIImageView button, which would prevent full use of UIEdgeInsets and hard-coded values. Just enter the base image on the button and set the content mode:

 myButton.imageView.contentMode = UIViewContentModeScaleAspectFit; 

See UIButton not listening to content mode setting?

Swift 3

 myButton.imageView?.contentMode = .scaleAspectFit 

Answer 3

You can also do this from an inteface constructor like this.

I think this is helpful.

Answer 4

Swift 3:

 button.setImage(UIImage(named: "checkmark_white"), for: .normal) button.contentVerticalAlignment = .fill button.contentHorizontalAlignment = .fill button.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10) 

Answer 5

you can use the imageEdgeInsets Insert property or the source fields for the rectangle around the button image.

  [self.btn setImageEdgeInsets:UIEdgeInsetsMake(6, 6, 6, 6)]; 

A positive value is compressed, or inserts that move around the edge. A negative value extends or terminates this edge.

Answer 6

If your image is too large (and you cannot / don’t just want to reduce it), the combination of the first two answers works fine.

 addButton.imageView?.contentMode = .scaleAspectFit addButton.imageEdgeInsets = UIEdgeInsetsMake(15.0, 15.0, 15.0, 5.0) 

If you do not set the images correctly, the image will be skewed without changing the contentMode .

Answer 7

Here is the Swift version:

 myButton.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10) 

Answer 8

Using Tim C's answer, I was able to create an extension on UIButton using Swift, which allows you to specify an image frame using .setImage() with the optional frame parameter

 extension UIButton{ func setImage(image: UIImage?, inFrame frame: CGRect?, forState state: UIControlState){ self.setImage(image, forState: state) if let frame = frame{ self.imageEdgeInsets = UIEdgeInsets( top: frame.minY - self.frame.minY, left: frame.minX - self.frame.minX, bottom: self.frame.maxY - frame.maxY, right: self.frame.maxX - frame.maxX ) } } } 

Using this, if you want to set a frame from UIButton to CGRectMake(0, 0, 64, 64) and set its image to myImage with a CGRectMake(8, 8, 48, 48) frame CGRectMake(8, 8, 48, 48) , you can use

 let button: UIButton = UIButton(frame: CGRectMake(0, 0, 64, 64)) button.setImage( myImage, inFrame: CGRectMake(8, 8, 48, 48), forState: UIControlState.Normal ) 

Answer 9

Swift 4

You will need to use these two lines of code in the order shown. All you need to do is change the upper and lower value of the edge inserts.

 addButton.imageView?.contentMode = .scaleAspectFit addButton.imageEdgeInsets = UIEdgeInsetsMake(10.0, 0.0, 10.0, 0.0) 

Answer 10

When resizing an icon using UIEdgeInsetsMake(top, left, bottom, right) consider the button sizes and the ability of UIEdgeInsetsMake to work with negative values ​​as if they were positive.

Example: two buttons 100 in height and 1: 1 aspect.

 left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0) right.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0) 

 left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0) right.imageEdgeInsets = UIEdgeInsetsMake(45, 0, 45, 0) 

 left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0) right.imageEdgeInsets = UIEdgeInsetsMake(60, 0, 60, 0) 

Examples 1 and 3 are identical, since ABS (100 - (40 + 40)) = ABS (100 - (60 + 60))

Answer 11

One approach is to resize the UIImage in the code, as shown below. Note. This code scales only in height, but you can also easily adjust the function in width.

 let targetHeight = CGFloat(28) let newImage = resizeImage(image: UIImage(named: "Image.png")!, targetHeight: targetHeight) button.setImage(newImage, for: .normal) fileprivate func resizeImage(image: UIImage, targetHeight: CGFloat) -> UIImage { // Get current image size let size = image.size // Compute scaled, new size let heightRatio = targetHeight / size.height let newSize = CGSize(width: size.width * heightRatio, height: size.height * heightRatio) let rect = CGRect(x: 0, y: 0, width: newSize.width, height: newSize.height) // Create new image UIGraphicsBeginImageContextWithOptions(newSize, false, 0) image.draw(in: rect) let newImage = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() // Return new image return newImage! } 

Answer 12

Updated for Swift 3

 yourButtonName.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10) 

Answer 13

Swift 3

I set the width and height of myButton to 40, and my add-ons from EdgeInsetsMake are 15 sides. I suggest adding a background color to your button to see the actual fill.

 myButton.backgroundColor = UIColor.gray // sample color to check padding myButton.imageView?.contentMode = .scaleAspectFit myButton.imageEdgeInsets = UIEdgeInsetsMake(15, 15, 15, 15) 

Answer 14

Here is another solution for scaling imageView UIButton.

 button.imageView?.layer.transform = CATransform3DMakeScale(0.8, 0.8, 0.8) 

Answer 15

I think your image size is also the same as the button size, then you put the image in the background of the button, for example:

 [myLikesButton setBackgroundImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal]; 

you have a mast of the same image size and buttons. I hope you understand my point.