Wie kann ich die imageSize eines UIButton anpassen?

158

Wie kann ich die Bildgröße des UIButton anpassen? Ich stelle das Bild wie folgt ein:

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

Dadurch wird das Bild jedoch bis zur vollen Schaltfläche ausgefüllt. Wie kann ich das Bild verkleinern?

Stollen
quelle
6
Haben Sie versucht, das Bild zu verkleinern (LOL)?
CodaFi
1
@CodaFi ist richtig, Sie sollten im Allgemeinen Assets in der richtigen Größe bereitstellen, da dies den Arbeitsaufwand für die CPU verringert, weniger Speicher benötigt und höchstwahrscheinlich besser aussieht, da Sie möglicherweise keine Skalierungsartefakte einführen ...
Paul.s
Sie können die Schaltfläche auch auf die Größe des Bildes einstellen (oder umgekehrt). Warum haben Sie eine große Schaltfläche ... mit einem kleinen Bild darin? Fügen Sie einfach das gewünschte Bild hinzu, dafür sind benutzerdefinierte Schaltflächen vorgesehen, oder Sie können Erklären Sie die Logik, die Sie implementieren möchten, damit andere eine klare Vorstellung haben.
Abhishek Singh

Antworten:

243

Wenn ich richtig verstehe, was Sie versuchen, müssen Sie mit dem Bildrand der Schaltflächen spielen. Etwas wie:

myLikesButton.imageEdgeInsets = UIEdgeInsets(top, left, bottom, right)
Tim C.
quelle
96

Tims Antwort ist richtig, ich wollte jedoch einen weiteren Vorschlag hinzufügen, da es in meinem Fall insgesamt eine einfachere Lösung gab.

Ich wollte die UIButtonBildeinfügungen festlegen, weil mir nicht klar war, dass ich den Inhaltsmodus für die Schaltflächen festlegen konnte UIImageView, was die Verwendung von UIEdgeInsets und fest codierten Werten insgesamt verhindert hätte. Greifen Sie einfach auf die zugrunde liegende Bildansicht über die Schaltfläche zu und stellen Sie den Inhaltsmodus ein:

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

Siehe UIButton hört nicht auf die Einstellung des Inhaltsmodus?

Swift 3

myButton.imageView?.contentMode = .scaleAspectFit
Kyle Clegg
quelle
1
Wie mache ich das gleiche für backgroundImage?
Sergey Sahakyan
myButton.backgroundImageView? .contentMode = .scaleAspectFit
Andrea.Ferrando
@ Andrea.Ferrando button.backgroundImageView.contentModefunktioniert nicht
Seong Lee
Sparen Sie sich Zeit und stellen Sie sicher, dass Sie das Bild und nicht das Hintergrundbild einstellen! @ SeongLee ist richtig, Sie können Hintergrundbild nicht mit contentMode oder EdgeInserts manipulieren
redPanda
41

Swift 3:

button.setImage(UIImage(named: "checkmark_white"), for: .normal)
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
button.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)
Josh O'Connor
quelle
5
Das hat bei mir wunderbar funktioniert. Ich habe ein PDF - Symbol in Inkscape und die contentVerticalAlignment/contentHorizontalAlignmentOptionen habe es mir ermöglicht es die Art und Weise zu skalieren ich hatte gehofft. Vielen Dank für die Veröffentlichung.
Adrian
1
Einstellung contentHorizontalAlignmentund contentVerticalAlignmenttat den Trick
Tom Knapen
Diese Lösung eignet sich hervorragend für die Verwendung von PDF-Assets für Symbole. Danke dir!
Eneko Alonso
38

Sie können dies auch mit dem Integer Builder wie diesem tun.

Geben Sie hier die Bildbeschreibung ein

Ich finde es hilfreich.

Milos Mandic
quelle
26

Wenn Ihr Bild zu groß ist (und Sie das Bild nicht verkleinern können / wollen), funktioniert eine Kombination der ersten beiden Antworten hervorragend.

addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(15.0, 15.0, 15.0, 5.0)

Wenn Sie die Bildeinfügungen nicht genau richtig machen, wird das Bild verzerrt, ohne die zu ändern contentMode.

iosjillian
quelle
23

Sie können die imageEdgeInsetsEigenschaft Die Einfügungs- oder Anfangsränder für das Rechteck um das Bild der Schaltfläche verwenden.

 [self.btn setImageEdgeInsets:UIEdgeInsetsMake(6, 6, 6, 6)];

Ein positiver Wert verkleinert oder fügt diese Kante ein - bewegt sich. Ein negativer Wert erweitert oder verschiebt diese Kante.

safaa elgendi
quelle
17

Hier ist die andere Lösung zum Skalieren von imageView von UIButton.

button.imageView?.layer.transform = CATransform3DMakeScale(0.8, 0.8, 0.8)
ovo
quelle
Du hast meinen Tag gerettet. Ich wollte nur mein Bild innerhalb einer Schaltfläche skalieren. Keine Einfügungen nein nichts, danke!
Pedro Antonio
15

Hier ist die Swift-Version:

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

Swift 4

Sie müssten diese beiden Codezeilen in dieser bestimmten Reihenfolge verwenden. Sie müssen lediglich den oberen und unteren Wert der Kanteneinsätze ändern.

addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(10.0, 0.0, 10.0, 0.0)
Van Du Tran
quelle
Diese verursachten EXC_BAD_ACCESSbeim Aufruf von einen Fehler override func layoutSubviews().
Andrew Kirna
7

Mithilfe der Antwort von Tim C konnte ich eine Erweiterung für die UIButtonVerwendung von Swift erstellen , mit der Sie den Bildrahmen mithilfe der .setImage()Funktion mit einem zusätzlichen frameParameter angeben können

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

}

Mit diesem, wenn Sie den Rahmen eines setzen wollten UIButtonauf CGRectMake(0, 0, 64, 64), und stellen Sie das Bild davon myImagemit einem Rahmen aus CGRectMake(8, 8, 48, 48), könnten Sie verwenden

let button: UIButton = UIButton(frame: CGRectMake(0, 0, 64, 64))
button.setImage(
    myImage,
    inFrame: CGRectMake(8, 8, 48, 48),
    forState: UIControlState.Normal
)
Jojodmo
quelle
4
Sie sollten if letstatt zu überprüfen , ob frameist , nilund dann zwingen , eine Unmenge mal auspacken .
fpg1503
7

Wenn mit Symbolgröße zu ändern UIEdgeInsetsMake(top, left, bottom, right), im Auge behalten Schaltfläche Dimensionen und die Fähigkeit der UIEdgeInsetsMake zur Arbeit mit negativen Werten , als ob sie positiv sind.

Beispiel: Zwei Tasten mit Höhe 100 und Aspekt 1: 1.

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)

Geben Sie hier die Bildbeschreibung ein

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(45, 0, 45, 0)

Geben Sie hier die Bildbeschreibung ein

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(60, 0, 60, 0)

Geben Sie hier die Bildbeschreibung ein

Die Beispiele 1 und 3 sind identisch, da ABS (100 - (40 + 40)) = ABS (100 - (60 + 60))

Borys T.
quelle
2

Swift 3

Ich habe die Breite und Höhe von myButton auf 40 eingestellt und meine Polsterung von EdgeInsetsMake beträgt 15 Seiten. Ich schlage vor, Ihrer Schaltfläche eine Hintergrundfarbe hinzuzufügen, um die tatsächliche Polsterung anzuzeigen.

myButton.backgroundColor = UIColor.gray // sample color to check padding
myButton.imageView?.contentMode = .scaleAspectFit
myButton.imageEdgeInsets = UIEdgeInsetsMake(15, 15, 15, 15)
Drey
quelle
2

Ein Ansatz besteht darin, die Größe des UIImage im Code wie folgt zu ändern. Hinweis: Dieser Code wird nur nach Höhe skaliert. Sie können die Funktion jedoch problemlos so anpassen, dass sie auch nach Breite skaliert.

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!
}
Crashalot
quelle
2

Aktualisiert für Swift> 5

Stellen Sie die Größe ein:

button.frame = CGRect(x: 0, y: 0, width: 44, height: 44)

Ränder festlegen:

button.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
Skantus
quelle
1

Aktualisiert für Swift 3

yourButtonName.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)
iAj
quelle
-6

Ich denke, Ihre Bildgröße ist auch die gleiche wie die Schaltflächengröße, dann setzen Sie das Bild in den Hintergrund der Schaltfläche wie:

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

Sie Mast haben die gleiche Größe von Bild und Knopf. Ich hoffe, Sie verstehen meinen Punkt.

Dev
quelle