IT story

UIButton의 이미지를 AspectFit으로 조정 하시겠습니까?

hot-time 2020. 9. 12. 11:30
반응형

UIButton의 이미지를 AspectFit으로 조정 하시겠습니까?


UIButton에 이미지를 추가하고 UIButton에 맞게 이미지 크기를 조정하고 싶습니다 (이미지를 작게 만들기). 어떻게하는지 보여주세요.

이것은 내가 시도한 것이지만 작동하지 않습니다.

  • 버튼에 이미지 추가 및 사용 setContentMode:
[self.itemImageButton setImage:stretchImage forState:UIControlStateNormal];
[self.itemImageButton setContentMode:UIViewContentModeScaleAspectFit];
  • "이미지 늘이기"만들기 :
UIImage *stretchImage = [updatedItem.thumbnail stretchableImageWithLeftCapWidth:0 topCapHeight:0];

정말로 이미지의 크기를 조절하고 싶다면 그렇게하되 사용하기 전에 크기를 조절해야합니다. 런타임에 크기를 조정하면 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)]];

나는 같은 문제가 있었다. UIButton 안에있는 ImageView의 ContentMode를 설정하기 만하면됩니다.

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

도움이 되었기를 바랍니다.


여기에 대한 답변 중 어느 것도 나를 위해 실제로 효과가 없었으며 다음 코드로 문제를 해결했습니다.

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

Interface Builder에서도이 작업을 수행 할 수 있습니다.

여기에 이미지 설명 입력


가로 세로 맞춤 모드 에서 프로그래밍 방식으로 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)로 변경하여 종횡비 채우기 모드 를 설정할 수 있습니다.


이미지의 크기가 비례 적으로 조정되지 않는 문제가 있었기 때문에 수정 한 방식은 가장자리 삽입을 사용하는 것이 었습니다.

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

이제 IB의 UIButton 속성을 통해이 작업을 수행 할 수 있습니다. 핵심은 이미지를 배경으로 설정하는 것입니다. 그렇지 않으면 작동하지 않습니다.

여기에 이미지 설명 입력


Dave의 답변을 확장 하면 런타임 속성을 사용하여 코드없이 IB에서 contentMode버튼의 imageView전체를 설정할 수 있습니다 .

여기에 이미지 설명 입력

  • 1의미 UIViewContentModeScaleAspectFit,
  • 2의미 UIViewContentModeScaleAspectFill합니다.

버튼 이미지를 줄이려면 :

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

The cleanest solution is to use Auto Layout. I lowered Content Compression Resistance Priority of my UIButton and set the image (not Background Image) via Interface Builder. After that I added a couple of constraints that define size of my button (quite complex in my case) and it worked like a charm.


I have a method that does it for me. The method takes UIButton and makes the image aspect fit.

-(void)makeImageAspectFitForButton:(UIButton*)button{
    button.imageView.contentMode=UIViewContentModeScaleAspectFit;
    button.contentHorizontalAlignment=UIControlContentHorizontalAlignmentFill;
    button.contentVerticalAlignment=UIControlContentVerticalAlignmentFill;
}

make sure that you have set the image to Image property, but not to the Background


1 - clear Button default text (important)

2 - set alignment like image

3 - set content mode like image

여기에 이미지 설명 입력


Background image can actually be set to scale aspect fill pretty easily. Just need to do something like this in a subclass of 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;
}

For Xamarin.iOS (C#):

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

Swift 5.0

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

세 가지 이벤트에 대해 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];

버튼 크기가 SQUARE이고 이미지 크기가 직사각형인지 강조 표시하거나 선택하는 동안 세 가지 이벤트 bcoz에 대한 코드가 있으며 강조 표시 또는 선택시 정사각형 이미지가 표시됩니다.

나는 그것이 당신을 위해 일할 것이라고 확신합니다.

참고 URL : https://stackoverflow.com/questions/2025319/scale-image-in-an-uibutton-to-aspectfit

반응형