UIButtonの画像をAspectFitにスケーリングしますか?


94

UIButtonに画像を追加し、UIButtonに合うように画像を拡大縮小したい(画像を小さくする)。方法を教えてください。

これは私が試したものですが、うまくいきません:

  • ボタンに画像を追加して使用するsetContentMode
[self.itemImageButton setImage:stretchImage forState:UIControlStateNormal];
[self.itemImageButton setContentMode:UIViewContentModeScaleAspectFit];
  • 「ストレッチ画像」を作る:
UIImage *stretchImage = [updatedItem.thumbnail stretchableImageWithLeftCapWidth:0 topCapHeight:0];

これは、ファームウェア4.0以降のデフォルトの動作に変更されたと思います。
Shaun Budhram、

1
ソリューションについては、stackoverflow.com / a / 28205566/481207を参照してください。
Matt

回答:


28

画像を本当に拡大縮小したい場合はそれを行いますが、使用する前にサイズを変更する必要があります。実行時にサイズを変更すると、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)]];

答えてくれてありがとう、Gcamp。比率でサイズを変更する方法はありました。しかし、UIButtonにそれを実行させる方法を見つけようとしています。私の画像はインターネットから読み込まれたので、コンパイル時にサイズを変更できません。ところで、ご回答ありがとうございます。
KO

2
画像はCALayerに配置され、Quartzによってレンダリングおよびキャッシュされるため、フルサイズで配置してもパフォーマンスは低下しません。いずれにせよ、あなたは〜1回リサイズしています。ボタンのサイズを常に変更している場合や、Quartzが画像レイヤーを再描画する原因となるその他のことを行っている場合は、gcampの答えがはるかに重要です。
Ben Gotow

画質が低下しているようです。私はiphone 6 plusでテストしています。本当ですか?3x画像もあります。
Khant Thu Linn 2015

はい、そうです、このコードはかなり古いものです。のUIGraphicsBeginImageContext代わりでしたUIGraphicsBeginImageContextWithOptions。修正しました。
gcamp 2015

そうですが、多くの場合、数サイクルを緩めても問題ではないので、ラムを充填しても意味がありません
Radu Simionescu

203

私も同じ問題を抱えていました。UIButton内にあるImageViewのContentModeを設定するだけです。

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

お役に立てれば。


14
imageViewを設定していることを確認してください。また、backgroundImageViewをまだ使用していて、そのために機能していないことにも少し気が付きました。
Alexandre Gomes

2
ボタンの状態が「強調表示」されている場合、このメソッドにはいくつかの問題があるようです。画像は塗りつぶしモードに戻ります。何か案が?
Yuanfei Zhu

効果がありません。ただし、[self.itemImageButton setbackgroundImage:[UIImage imageNamed:stretchImage] forState:UIControlStateNormal];を使用して機能させています。
ミッキー

3
これでうまくいきました。上記のようにコンテンツモードを設定しました。ただし、画像が「塗りつぶしモード」に戻らないようにするために、強調表示された状態の同じ画像を設定する必要もあります。たとえば、[imageButton setImage:image forState:UIControlStateHighlighted];
クリストファー

1
あなたは、キーのパスとInterface Builderでこれを行うことができimageView.contentMode、タイプNumber、および値1
bendytree

107

ここでの答えのどれも実際にはうまくいきませんでした、私は次のコードで問題を解決しました:

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

これはInterface Builderでも行うことができます。

ここに画像の説明を入力してください


5
これは、OPから要求されたアスペクトフィット動作を提供しません。
Ortwin Gentz 2016

3
@OrtwinGentzのAspect fit代わりにモードを選択して設定できますscale to fill
ダニエル

55

プログラムでアスペクトフィットモードのUIButton imageViewを設定する最も簡単な方法:

迅速

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

Objective-C

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

注:.scaleAspectFit(UIViewContentModeScaleAspectFit)を.scaleAspectFill(UIViewContentModeScaleAspectFill)に変更して、 アスペクトフィルモードできます。


20

画像が比例してサイズ変更されないという問題があったため、修正方法はエッジインセットを使用していました。

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

16

これは、IBのUIButtonプロパティを介して実行できるようになりました。重要なのは、画像を背景として設定することです。そうしないと機能しません。

ここに画像の説明を入力してください


14

Daveの答えを拡張するcontentModeと、imageViewランタイム属性を使用して、コードなしでボタンのすべてをIBに設定できます。

ここに画像の説明を入力してください

  • 1UIViewContentModeScaleAspectFit
  • 2意味し UIViewContentModeScaleAspectFillます。

8

ボタン画像を単純に減らしたい場合:

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

これはyourButton.imageView.contentMode = UIViewContentModeScaleAspectFit;である必要があります。
sdsykes

.imageViewで試さなかった。なかなか上手くいきません。
タレブ2015

5

1-クリアボタンのデフォルトテキスト(重要)

2-画像のように配置を設定

3-画像のようにコンテンツモードを設定する

ここに画像の説明を入力してください


素敵な答えがたくさんありました。ありがとう!
BharathRao

5

私にはそれを行う方法があります。このメソッドはUIButton、画像のアスペクトを取得して適合させます。

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

4

最もクリーンなソリューションは、自動レイアウトを使用することです。私は下げコンテンツ圧縮性優先の私のをUIButtonと画像(ない設定背景画像を経由して)Interface Builderを。その後、ボタンのサイズを定義するいくつかの制約(私の場合はかなり複雑)を追加しました。


これは私にとってはうまくいきましたが、実際の画像ではなく「背景画像」を使用することを選択した場合のみです。何でもうまくいく!これが私をNUTSに駆り立てました。
アンディ

Xcode 6.2ではこれは私にとってはうまくいきましたが、@ AndrewHeinleinが言ったように、使用されましたBackground Image
RoLYroLLs

3

画像がImageプロパティに設定されているが、背景には設定されていないことを確認してください


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

これはサブクラスなしでは不可能ではありませんか?
Iulian Onofrei 2017

この答えは、特にbackgroundImageに対するものでした。メイン画像については、imageEdgeInsetsを使用してサルすることができます。
Andy Poes

私は知っています。そして、サブクラスなしでこれを達成することが可能かどうかを望みました。
Iulian Onofrei 2017

私の知る限り、subclassingなしでbackgroundImageを調整することはできません。
Andy Poes

1

Swift 5.0

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

0

Xamarin.iOS(C#)の場合:

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

-1

3つのイベントの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で画像サイズが長方形の場合、強調表示または選択中に3つのイベントbcozのコードがあり、強調表示または選択時に正方形の画像が表示されます。

きっとうまくいくと思います。


コンテンツモードを設定するのではなく、画像を設定します。そして、それらはイベントではなく、状態です。あなたは大きな混乱を作っています。これは問題とはまったく無関係です。
マネコスタ2014
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.