将UIButton中的图像缩放到AspectFit?

时间:2010-01-08 03:34:59

标签: ios objective-c cocoa-touch uibutton uikit

我想将图像添加到UIButton,还想缩放我的图像以适应UIButton(使图像更小)。请告诉我该怎么做。

这是我尝试过的,但它不起作用:

  • 将图像添加到按钮并使用setContentMode
[self.itemImageButton setImage:stretchImage forState:UIControlStateNormal];
[self.itemImageButton setContentMode:UIViewContentModeScaleAspectFit];
  • 制作“拉伸图像”:
UIImage *stretchImage = [updatedItem.thumbnail stretchableImageWithLeftCapWidth:0 topCapHeight:0];

15 个答案:

答案 0 :(得分:197)

我遇到了同样的问题。只需设置UIButton内的ImageView的ContentMode。

[[self.itemImageButton imageView] setContentMode: UIViewContentModeScaleAspectFit];
[self.itemImageButton setImage:[UIImage imageNamed:stretchImage] forState:UIControlStateNormal];

希望这有帮助。

答案 1 :(得分:93)

这里没有任何答案对我有用,我用以下代码解决了这个问题:

button.contentMode = UIViewContentModeScaleToFill;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentFill;
button.contentVerticalAlignment = UIControlContentVerticalAlignmentFill;

您也可以在Interface Builder中执行此操作。

enter image description here

答案 2 :(得分:46)

宽高比适合模式以编程方式设置UIButton imageView的最简单方法:

<强>夫特

button.contentHorizontalAlignment = .fill
button.contentVerticalAlignment = .fill
button.imageView?.contentMode = .scaleAspectFit

<强>目标C

button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentFill;
button.contentVerticalAlignment = UIControlContentVerticalAlignmentFill;
button.imageView.contentMode = UIViewContentModeScaleAspectFit;

注意: 您可以将.scaleAspectFit(UIViewContentModeScaleAspectFit)更改为.scaleAspectFill(UIViewContentModeScaleAspectFill)以设置方面填充模式

答案 3 :(得分:27)

如果您真的想缩放图像,请执行此操作,但在使用之前应调整大小。在运行时调整它的大小只会丢失CPU周期。

这是我用来缩放图像的类别:

的UIImage + Extra.h

@interface UIImage (Extras)
- (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize;
@end;

的UIImage + Extra.m

@implementation UIImage (Extras)

- (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize {

UIImage *sourceImage = self;
UIImage *newImage = nil;

CGSize imageSize = sourceImage.size;
CGFloat width = imageSize.width;
CGFloat height = imageSize.height;

CGFloat targetWidth = targetSize.width;
CGFloat targetHeight = targetSize.height;

CGFloat scaleFactor = 0.0;
CGFloat scaledWidth = targetWidth;
CGFloat scaledHeight = targetHeight;

CGPoint thumbnailPoint = CGPointMake(0.0,0.0);

if (!CGSizeEqualToSize(imageSize, targetSize)) {

        CGFloat widthFactor = targetWidth / width;
        CGFloat heightFactor = targetHeight / height;

        if (widthFactor < heightFactor) 
                scaleFactor = widthFactor;
        else
                scaleFactor = heightFactor;

        scaledWidth  = width * scaleFactor;
        scaledHeight = height * scaleFactor;

        // center the image

        if (widthFactor < heightFactor) {
                thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5; 
        } else if (widthFactor > heightFactor) {
                thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5;
        }
}


// this is actually the interesting part:

UIGraphicsBeginImageContextWithOptions(targetSize, NO, 0);

CGRect thumbnailRect = CGRectZero;
thumbnailRect.origin = thumbnailPoint;
thumbnailRect.size.width  = scaledWidth;
thumbnailRect.size.height = scaledHeight;

[sourceImage drawInRect:thumbnailRect];

newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

if(newImage == nil) NSLog(@"could not scale image");


return newImage ;
}

@end

您可以将它用于您想要的尺寸。喜欢:

[self.itemImageButton setImage:[stretchImage imageByScalingProportionallyToSize:CGSizeMake(20,20)]];

答案 4 :(得分:19)

我的图像没有按比例调整大小的问题所以我修复它的方法是使用边缘插入。

fooButton.contentEdgeInsets = UIEdgeInsetsMake(10, 15, 10, 15);

答案 5 :(得分:14)

现在可以通过IB的UIButton属性来完成。关键是将图像设置为背景,否则它将无法正常工作。

enter image description here

答案 6 :(得分:14)

扩展Dave的回答,您可以使用运行时属性在IB中设置按钮的contentMode全部,而无需任何代码:

enter image description here

  • imageView表示1
  • UIViewContentModeScaleAspectFit意味着 2

答案 7 :(得分:8)

如果您只是想缩小按钮图像:

yourButton.contentMode = UIViewContentModeScaleAspectFit;
yourButton.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10);

答案 8 :(得分:4)

最干净的解决方案是使用自动布局。我降低了UIButton内容压缩阻力优先级,并通过 Interface Builder 设置了图像(不是背景图像)。之后,我添加了一些限制按钮大小的约束(在我的情况下非常复杂),它就像一个魅力。

答案 9 :(得分:3)

确保您已将图像设置为Image属性,但未将其设置为Background

答案 10 :(得分:2)

背景图像实际上可以设置为非常容易地缩放纵横填充。只需要在UIButton的子类中执行类似的操作:

- (CGRect)backgroundRectForBounds:(CGRect)bounds
{
    // you'll need the original size of the image, you 
    // can save it from setBackgroundImage:forControlState
    return CGRectFitToFillRect(__original_image_frame_size__, bounds);
}

// Utility function, can be saved elsewhere
CGRect CGRectFitToFillRect( CGRect inRect, CGRect maxRect )
{
    CGFloat origRes = inRect.size.width / inRect.size.height;
    CGFloat newRes = maxRect.size.width / maxRect.size.height;

    CGRect retRect = maxRect;

    if (newRes < origRes)
    {
        retRect.size.width = inRect.size.width * maxRect.size.height / inRect.size.height;
        retRect.origin.x = roundf((maxRect.size.width - retRect.size.width) / 2);
    }
    else
    {
        retRect.size.height = inRect.size.height * maxRect.size.width / inRect.size.width;
        retRect.origin.y = roundf((maxRect.size.height - retRect.size.height) / 2);
    }

    return retRect;
}

答案 11 :(得分:2)

1-清除“按钮”默认文本(重要)

2-设置图像对齐方式

3-设置内容模式,例如图像

enter image description here

答案 12 :(得分:0)

对于Xamarin.iOS(C#):

    myButton.VerticalAlignment = UIControlContentVerticalAlignment.Fill;
    myButton.HorizontalAlignment = UIControlContentHorizontalAlignment.Fill;
    myButton.ImageView.ContentMode = UIViewContentMode.ScaleAspectFit;

答案 13 :(得分:0)

Swift 5.0

 myButton2.contentMode = .scaleAspectFit
 myButton2.contentHorizontalAlignment = .fill
 myButton2.contentVerticalAlignment = .fill

答案 14 :(得分:-1)

您只需要为三个事件设置UIButton imageview的内容模式。 -

[cell.button setImage:[UIImage imageWithData:data] forState:UIControlStateNormal];

[cell.button setImage:[UIImage imageWithData:data] forState:UIControlStateHighlighted];

[cell.imgIcon setImage:[UIImage imageWithData:data] forState:UIControlStateSelected];

我们有三个事件bcoz的代码,同时突出显示或选择按钮大小是SQUARE并且图像大小是矩形,然后它会在突出显示或选择时显示方形图像。

我相信它会对你有用。