Comment ajuster l'imageSize d'un UIButton?


158

Comment puis-je ajuster la taille de l'image de l'UIButton? Je mets l'image comme ceci:

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

Cependant, cela remplit l'image jusqu'au bouton complet, comment réduire la taille de l'image?


6
Avez-vous essayé de réduire l'image (LOL)?
CodaFi

1
@CodaFi a raison, vous devez généralement fournir des actifs de la bonne taille car cela réduit tout travail pour le processeur, utilise moins de mémoire et aura probablement une meilleure apparence car vous n'introduisez potentiellement aucun artefact de mise à l'échelle ...
Paul.s

Aussi, vous pouvez faire le bouton à la taille de l'image (ou vice-versa) .Pourquoi avoir un gros bouton ... avec une petite image à l'intérieur.Ajoutez simplement l'image que vous voulez, c'est à cela que servent les boutons personnalisés ou vous pouvez Expliquez la logique que vous souhaitez mettre en œuvre pour que les autres aient une idée claire.
Abhishek Singh

Réponses:


243

Si je comprends bien ce que vous essayez de faire, vous devez jouer avec l'encart du bord de l'image des boutons. Quelque chose comme:

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

96

La réponse de Tim est correcte, mais je voulais ajouter une autre suggestion, car dans mon cas, il y avait une solution plus simple.

Je cherchais à définir les UIButtonencarts d'image parce que je ne savais pas que je pouvais définir le mode de contenu sur les boutons UIImageView, ce qui aurait évité le besoin d'utiliser UIEdgeInsets et des valeurs codées en dur. Accédez simplement à la vue d'image sous-jacente sur le bouton et définissez le mode de contenu:

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

Voir UIButton n'écoute pas le paramètre de mode de contenu?

Swift 3

myButton.imageView?.contentMode = .scaleAspectFit

1
comment faire de même pour backgroundImage?
Sergey Sahakyan

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

@ Andrea.Ferrando button.backgroundImageView.contentModene fonctionne pas
Seong Lee

Gagnez du temps et assurez-vous de définir l'image et non l'image d'arrière-plan! @SeongLee est correct, vous ne pouvez pas manipuler l'image d'arrière-plan avec contentMode ou EdgeInserts
redPanda

42

Swift 3:

button.setImage(UIImage(named: "checkmark_white"), for: .normal)
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
button.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)

6
Cela a très bien fonctionné pour moi. J'ai créé une icône PDF dans Inkscape et les contentVerticalAlignment/contentHorizontalAlignmentoptions m'ont permis de la mettre à l'échelle comme je l'espérais. Merci d'avoir posté ceci.
Adrian

2
réglage contentHorizontalAlignmentet a contentVerticalAlignmentfait l'affaire
Tom Knapen

1
Cette solution fonctionne très bien lors de l'utilisation d'actifs PDF pour les icônes. Je vous remercie!
Eneko Alonso le

38

Vous pouvez également le faire à partir du générateur d'interface comme celui-ci.

entrez la description de l'image ici

Je pense que c'est utile.


26

Si votre image est trop grande (et que vous ne pouvez / ne voulez pas simplement réduire l'image), une combinaison des deux premières réponses fonctionne très bien.

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

À moins que vous n'obteniez les encarts d'image parfaits, l'image sera biaisée sans changer le contentMode.


23

vous pouvez utiliser la imageEdgeInsetspropriété Les marges d'encart ou de départ du rectangle autour de l'image du bouton.

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

Une valeur positive rétrécit ou insère cette arête - en mouvement. Une valeur négative étend ou dépasse ce bord.


17

Voici l'autre solution pour redimensionner imageView d'UIButton.

button.imageView?.layer.transform = CATransform3DMakeScale(0.8, 0.8, 0.8)

Tu as sauvé ma journée. Je voulais juste mettre à l'échelle mon image à l'intérieur d'un bouton. Pas d'encart non rien, merci!
Pedro Antonio le

15

Voici la version Swift:

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

8

Swift 4

Vous devrez utiliser ces deux lignes de code, dans cet ordre spécifique. Tout ce dont vous avez besoin est de changer la valeur supérieure et inférieure des inserts de bord.

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

Ceux-ci ont provoqué une EXC_BAD_ACCESSerreur lors de l'appel depuis override func layoutSubviews().
Andrew Kirna

7

Avec l'aide de la réponse de Tim C , j'ai pu créer une extension sur l' UIButtonutilisation de Swift qui vous permet de spécifier le cadre de l'image en utilisant la .setImage()fonction avec un frameparamètre supplémentaire

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

}

En utilisant cela, si vous vouliez définir le cadre d'un UIButtonsur CGRectMake(0, 0, 64, 64)et définir l'image de celui-ci myImageavec un cadre de CGRectMake(8, 8, 48, 48), vous pouvez utiliser

let button: UIButton = UIButton(frame: CGRectMake(0, 0, 64, 64))
button.setImage(
    myImage,
    inFrame: CGRectMake(8, 8, 48, 48),
    forState: UIControlState.Normal
)

4
Vous devriez if letau lieu de vérifier si framec'est nilet ensuite forcer le déballage des millions de fois .
fpg1503

7

Lorsque vous modifiez la taille de l'icône avec UIEdgeInsetsMake(top, left, bottom, right), gardez à l'esprit les dimensions des boutons et la capacité de UIEdgeInsetsMake à travailler avec des valeurs négatives comme si elles étaient positives.

Exemple: deux boutons de hauteur 100 et d'aspect 1: 1.

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

entrez la description de l'image ici

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

entrez la description de l'image ici

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

entrez la description de l'image ici

Les exemples 1 et 3 sont identiques puisque ABS (100 - (40 + 40)) = ABS (100 - (60 + 60))


2

Swift 3

J'ai défini la largeur et la hauteur de myButton sur 40 et mon rembourrage de EdgeInsetsMake est de 15 tous les côtés. Je suggère d'ajouter une couleur d'arrière-plan à votre bouton pour voir le rembourrage réel.

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

2

Une approche consiste à redimensionner l'UIImage dans le code comme suit. Remarque: ce code est uniquement mis à l'échelle en fonction de la hauteur, mais vous pouvez également facilement ajuster la fonction à l'échelle par largeur.

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

Mis à jour pour Swift> 5

définir la taille:

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

définir les marges:

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

1

Mis à jour pour Swift 3

yourButtonName.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)

-6

Je pense que la taille de votre image est également la même que celle du bouton, puis vous mettez l'image en arrière-plan du bouton comme:

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

vous avez la même taille d'image et de bouton.J'espère que vous comprenez mon point.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.