如何调整UIButton的imageSize?


158

如何调整UIButton的图像大小?我正在这样设置图像:

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

但是,这会将图像填充到完整按钮,如何缩小图像?


6
您是否尝试过缩小图像(LOL)?
2012年

1
@CodaFi是正确的,你通常应该在合适的尺寸提供资产,因为它降低了任何工作,为CPU,使用较少的内存,并很可能会更好看,你不会潜在地引入任何缩放假象...
Paul.s

您也可以将按钮设置为图像的大小(反之亦然)。为什么有一个大按钮...其中有一个小图像。只需添加所需的图像,这就是自定义按钮的用途,或者您可以向其他人解释要实现的逻辑,以使他们有一个清晰的想法。
Abhishek Singh'5

Answers:


243

如果我正确理解了您要做什么,则需要使用按钮图像边缘插入。就像是:

myLikesButton.imageEdgeInsets = UIEdgeInsets(top, left, bottom, right)

96

蒂姆的答案是正确的,但是我想添加另一个建议,因为就我而言,这是一个更简单的解决方案。

我之所以要设置UIButton图像插图,是因为我没有意识到我可以在按钮的上设置内容模式UIImageView,这样可以避免完全使用UIEdgeInsets和硬编码值。只需访问按钮上的基础imageview并设置内容模式:

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

看到UIButton不听内容模式设置吗?

迅捷3

myButton.imageView?.contentMode = .scaleAspectFit

1
如何为backgroundImage做同样的事情?
谢尔盖·萨哈金

myButton.backgroundImageView?.contentMode = .scaleAspectFit
Andrea.Ferrando

@ Andrea.Ferrando button.backgroundImageView.contentMode不起作用
Seong Lee

节省一些时间,并确保您设置的不是背景图片!@SeongLee是正确的,您无法使用contentMode或EdgeInserts操作背景图像
redPanda

42

斯威夫特3:

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

6
这对我来说效果很好。我在Inkscape中创建了一个PDF图标,通过contentVerticalAlignment/contentHorizontalAlignment选项可以按自己的方式缩放它。感谢您发布此信息。
阿德里安

2
设置contentHorizontalAlignmentcontentVerticalAlignment没有诀窍
汤姆·克纳彭

1
当使用PDF资产作为图标时,此解决方案效果很好。谢谢!
Eneko Alonso


26

如果您的图片太大(并且您不能/不希望只是缩小图片),那么将前两个答案结合起来效果很好。

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

除非您获得正确的图像插图,否则图像将歪斜而不会更改contentMode


23

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

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

正值会缩小或插入该边缘(移动)。负值扩展或起始于该边缘。


17

这是缩放UIButton的imageView的另一种解决方案。

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

你救了我的日子。我只是想在一个按钮内缩放图像。没有插图,没有,谢谢!
Pedro Antonio

15

这是Swift版本:

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

8

斯威夫特4

您将需要按此特定顺序使用这两行代码。您所需要做的就是更改边缘插图的顶部和底部值。

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

EXC_BAD_ACCESS从调用时,这些会导致错误override func layoutSubviews()
安德鲁·基尔纳

7

借助Tim C的答案,我能够在UIButtonSwift 上创建扩展,该扩展允许您通过将.setImage()函数与附加frame参数一起使用来指定图像帧

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

}

使用此方法,如果您想将a的框架设置UIButtonCGRectMake(0, 0, 64, 64),并myImage使用的框架将其图像设置为,则CGRectMake(8, 8, 48, 48)可以使用

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

4
您应该if let而不是检查frameis是nil,然后强制解压缩成千上万次
fpg1503 '16

7

使用更改图标大小时 UIEdgeInsetsMake(top, left, bottom, right),请记住按钮尺寸和UIEdgeInsetsMake可以将负值当作正值使用。

示例:两个按钮的高度为100,宽高比为1:1。

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)

在此处输入图片说明

示例1和3相同,因为ABS(100-(40 + 40))= ABS(100-(60 + 60))


2

迅捷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)

2

一种方法是使用以下代码来调整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!
}

2

已针对Swift> 5更新

设置大小:

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

设置边距:

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

1

为Swift 3更新

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

-6

我认为,您的图像大小也与按钮大小相同,然后将图像放在按钮的背景中,例如:

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

您的桅杆上的图像和按钮大小相同。希望您理解我的观点。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.