UIButtonのimageSizeを調整する方法は?


158

UIButtonの画像サイズを調整するにはどうすればよいですか?私はこのように画像を設定しています:

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

しかし、これで画像がいっぱいになりボタン全体が表示されます。


6
画像を小さく(LOL)してみましたか?
CodaFi

1
@CodaFiが、それはCPUのためのすべての作業を減らすよう、あなたは一般的に、あなたが潜在的に任意のスケーリングアーチファクトを導入しないよう、より良い、より少ないメモリを使用します最も可能性の高い外観右のサイズで資産を提供する必要があり、権利である...
Paul.s

また、ボタンを画像のサイズに変更することもできます(またはその逆)。大きなボタンに小さな画像が含まれているのはなぜですか。単純に必要な画像を追加してください。これがカスタムボタンの目的です。他の人が明確なアイデアを得るために実装するロジックを説明します。
Abhishek Singh

回答:


243

私があなたが何をしようとしているのかを正しく理解している場合、ボタンの画像の端をはめ込んで遊ぶ必要があります。何かのようなもの:

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

96

ティムの答えは正しいですが、私の場合はより簡単な解決策があったため、別の提案を追加したいと思いました。

UIButtonボタンのにコンテンツモードを設定できることに気づかなかったため、イメージのインセットを設定UIImageViewしようとしていました。これにより、UIEdgeInsetsとハードコードされた値を完全に使用する必要がなくなります。ボタンの基になる画像ビューにアクセスし、コンテンツモードを設定するだけです。

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

UIButtonがコンテンツモード設定をリッスンしないのを参照してください

スウィフト3

myButton.imageView?.contentMode = .scaleAspectFit

1
backgroundImageに同じことをするには?
Sergey Sahakyan

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

@ Andrea.Ferrandoはbutton.backgroundImageView.contentMode動作しません
ソン・リー

時間を節約して、背景画像ではなく画像を設定していることを確認してください!@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トリックはなかった
トムKnapen

1
このソリューションは、アイコンにPDFアセットを使用する場合に効果的です。ありがとうございました!
エネコアロンソ


26

画像が大きすぎる(そして単に画像を小さくすることはできない/望まない)場合は、最初の2つの答えを組み合わせるとうまくいきます。

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)

あなたは私の日を救った。ボタン内で画像を拡大したかっただけです。インセットなし、何もありません、ありがとう!
ペドロアントニオ

15

HeresはSwiftバージョンです:

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

8

スウィフト4

この2行のコードを、この特定の順序で使用する必要があります。必要なのは、エッジインセットの上部と下部の値を変更することだけです。

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

これらEXC_BAD_ACCESSはから呼び出されoverride func layoutSubviews()たときにエラーを引き起こしました。
Andrew Kirna

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

}

あなたがのフレーム設定したい場合は、これを使用UIButtonするとCGRectMake(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代わりに、かどうかをチェックするのframeですnil当時と無数の時間をアンラップ強制します
fpg1503

7

でアイコンのサイズを変更する場合 UIEdgeInsetsMake(top, left, bottom, right)、ボタンの寸法と、UIEdgeInsetsMakeが負の値を正の値であるかのように処理する機能に留意してください。

例:高さ100、アスペクト1:1の2つのボタン。

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)

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

ABS(100-(40 + 40))= ABS(100-(60 + 60))なので、例1と3は同じです。


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

1つの方法は、次のようなコードで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];

画像とボタンのサイズが同じです。私のポイントを理解していただければ幸いです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.