如何调整 UIButton 的图像大小？

如何调整图像大小的 UIButton? 我设置的图像如下:

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

然而，这填补了图像的完整按钮，我如何使图像更小？

历史性提示:

对于这个现在已经有10多年历史的问题，您现在通常只需使用 setPreferredSymbolConfiguration设置点的大小

218654 次浏览
小开
最佳答案

如果我正确地理解你正在尝试做什么，你需要玩的按钮图像边缘插入。比如:

myLikesButton.imageEdgeInsets = UIEdgeInsets(top: 30, left: 30, bottom: 30, right: 30)
小开

我认为，你的图像大小也是一样的按钮大小，然后你把图像的背景按钮如下:

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

你必须有相同大小的图像和按钮。我希望你明白我的意思。

小开

可以使用 imageEdgeInsets属性 按钮图像周围矩形的插入或起始边距。

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

正值缩小或插入移动的边缘。负值扩大或插入移动的边缘。

小开

蒂姆的回答是正确的，但是我想补充另一个建议，因为在我的情况下，有一个更简单的解决方案。

我想设置 UIButton图像插入，因为我没有意识到我可以在按钮的 UIImageView上设置内容模式，这样就可以避免使用 UIEdgeInsets 和硬编码值。只需访问按钮上的底层图像视图并设置内容模式:

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

参见 UIButton 不听内容模式设置？

Swift 3

myButton.imageView?.contentMode = .scaleAspectFit
小开

以下是斯威夫特的版本:

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

在 Tim C 的回答的帮助下，我能够使用 Swift 在 UIButton上创建一个扩展，它允许您通过使用带有额外 frame参数的 .setImage()函数来指定图像帧

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
)
}
}


}

使用这个函数，如果您想将 UIButton的帧设置为 CGRectMake(0, 0, 64, 64)，并将其图像设置为具有 CGRectMake(8, 8, 48, 48)帧的 myImage，则可以使用

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

您也可以像下面这样通过接口构建器来实现。

enter image description here

我觉得这很有帮助。

小开

如果你的图片太大(你不能/不想只是把图片变小) ，前两个答案的组合就很好。

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

除非您得到的图像插入恰到好处，图像将歪斜，而不改变 contentMode。

小开

斯威夫特3:

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

更新为 Swift 3

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

Swift 3

我将 myButton 的宽度和高度设置为40，并且 EdgeInsetsMake 中的填充为15个全面。我建议添加一个背景颜色到您的按钮，以查看实际填充。

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

Swift 4

您需要按照这个特定的顺序使用这两行代码。所有您需要的是改变顶部和底部的边缘插入值。

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

一种方法是在代码中调整 UIImage 的大小，如下所示。注意: 这个代码只能按高度缩放，但是你也可以很容易地调整函数按宽度缩放。

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!
}
小开

更改图标大小时，使用 请记住按钮尺寸和 UIEdgeInsetsMake 处理负值的能力，就好像它们是正值一样。

例如: 两个按钮，高度100和方面1:1。

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

enter image description here

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

enter image description here

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

enter image description here

例1和例3是相同的，因为 ABS (100-(40 + 40)) = ABS (100-(60 + 60))

小开

下面是另一个可以缩放 UIButton 的 image View 的解决方案。

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

更新为 Swift > 5

设定大小:

button.frame = CGRect(x: 0, y: 0, width: 44, height: 44)

设定边距:

button.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
小开

如果你使用 象征性的图像的按钮，那么这个解决方案是更好的:

button.setPreferredSymbolConfiguration(UIImage.SymbolConfiguration(pointSize: 48), forImageIn: .normal)
小开

插入图像对我来说是可行的，但是我还需要按钮类型是自定义的，按钮样式是默认的。Xcode 13中添加的按钮的默认值是 System for Type 和 PlainforStyle。

self.imageEdgeInsets = UIEdgeInsets(top: 3.0, left: 3.0, bottom: 3.0, right: 3.0)

enter image description here

小开

对于 iOS15，这可以通过 imagePaddings 完成

  let button = UIButton()
var config = UIButton.Configuration.filled()
config.imagePadding = 2
button.configuration = config
return button
小开

如果您不想使用图像插入并且正在使用自动布局(我假设您已经这样做了) ，另一种解决方案是向图像视图添加大小约束。确保约束的优先级为999，否则自动布局将会投诉。

guard let imageView = button.imageView else { return }


let size = CGSize(width: 20, height: 20)
let sizeConstraints = [
imageView.widthAnchor.constraint(equalToConstant: size.width),
imageView.heightAnchor.constraint(equalToConstant: size.height)
]
imageView.translatesAutoresizingMaskIntoConstraints = false
sizeConstraints.forEach { $0.priority = UILayoutPriority(rawValue: priority) }
NSLayoutConstraint.activate(sizeConstraints)
imageView.contentMode = .scaleAspectFit

提交答案