UIButtonの画像サイズを調整するにはどうすればよいですか?私はこのように画像を設定しています:
[myLikesButton setImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal];
ただし、これにより画像がボタンいっぱいになります。画像を小さくするにはどうすればよいですか?
あなたがやろうとしていることを正しく理解している場合、ボタン画像のエッジインセットで遊ぶ必要があります。何かのようなもの:
myLikesButton.imageEdgeInsets = UIEdgeInsetsMake(top, left, bottom, right);
ティムの答えは正しいですが、別の提案を追加したかったのです。私の場合は、全体としてより単純な解決策があったからです。
ボタンのUIButton
にコンテンツモードを設定できることに気付かなかったため、UIImageView
イメージインセットを設定しようとしていました。ボタンの基になる画像ビューにアクセスし、コンテンツモードを設定するだけです。
myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;
IButtonはコンテンツモード設定をリッスンしませんか? を参照してください。
Swift 3
myButton.imageView?.contentMode = .scaleAspectFit
imageEdgeInsets
プロパティを使用できます。ボタンの画像の周囲の四角形のインセットまたはアウトセットマージン。
[self.btn setImageEdgeInsets:UIEdgeInsetsMake(6, 6, 6, 6)];
正の値は、そのエッジ(移動)を縮小または挿入します。負の値は、そのEdgeを展開または開始します。
スウィフト3:
button.setImage(UIImage(named: "checkmark_white"), for: .normal)
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
button.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)
画像が大きすぎる場合(および画像を小さくしたくない/したくない場合)、最初の2つの答えの組み合わせはうまく機能します。
addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(15.0, 15.0, 15.0, 5.0)
画像のインセットを適切に取得しない限り、contentMode
を変更せずに画像が歪んでしまいます。
Swiftバージョンは次のとおりです。
myButton.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
Swift 4
この2行のコードをこの特定の順序で使用する必要があります。必要なのは、エッジインセットの上下の値を変更することだけです。
addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(10.0, 0.0, 10.0, 0.0)
Tim Cの回答 の助けを借りて、Swiftを使用してUIButton
name__に拡張機能を作成できました。これにより、.setImage()
関数と追加のframe
name__パラメーターを使用してイメージフレームを指定できます
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
name__のフレームをCGRectMake(0, 0, 64, 64)
に設定し、その画像をCGRectMake(8, 8, 48, 48)
のフレームでmyImage
name__に設定したい場合は、
let button: UIButton = UIButton(frame: CGRectMake(0, 0, 64, 64))
button.setImage(
myImage,
inFrame: CGRectMake(8, 8, 48, 48),
forState: UIControlState.Normal
)
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)
例1と3は、ABS(100-(40 + 40))= ABS(100-(60 + 60))なので同一です
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!
}
スイフト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)
Swift 3用に更新
yourButtonName.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)
UIButtonのimageViewをスケーリングする他のソリューションを次に示します。
button.imageView?.layer.transform = CATransform3DMakeScale(0.8, 0.8, 0.8)