¿Cómo ajustar el tamaño de imagen de un UIButton?


158

¿Cómo puedo ajustar el tamaño de la imagen del UIButton? Estoy configurando la imagen así:

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

Sin embargo, esto llena la imagen hasta el botón completo, ¿cómo hago para que la imagen sea más pequeña?


66
¿Has intentado hacer la imagen más pequeña (LOL)?
CodaFi

1
@CodaFi tiene razón, generalmente debe proporcionar activos en el tamaño correcto, ya que reduce cualquier trabajo para la CPU, usa menos memoria y lo más probable es que se vea mejor ya que potencialmente no introduce ningún artefacto de escala ...
Paul.s

También puede hacer que el botón tenga el tamaño de la imagen (o viceversa). Por qué tener un botón grande ... con una imagen pequeña, simplemente agregue la imagen que desee, para eso están los botones personalizados o puede explique la lógica que desea implementar para que otros tengan una idea clara.
Abhishek Singh

Respuestas:


243

Si entiendo correctamente lo que estás tratando de hacer, debes jugar con los botones de inserción de borde de imagen. Algo como:

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

96

La respuesta de Tim es correcta, sin embargo, quería agregar otra sugerencia, porque en mi caso había una solución más simple.

Estaba buscando configurar las UIButtoninserciones de imagen porque no me di cuenta de que podía configurar el modo de contenido en los botones UIImageView, lo que habría evitado la necesidad de usar UIEdgeInsets y valores codificados por completo. Simplemente acceda a la vista de imagen subyacente en el botón y configure el modo de contenido:

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

¿Ves UIButton no escucha la configuración del modo de contenido?

Swift 3

myButton.imageView?.contentMode = .scaleAspectFit

1
¿Cómo hacer lo mismo para backgroundImage?
Sergey Sahakyan

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

@ Andrea.Ferrando button.backgroundImageView.contentModeno funciona
Seong Lee

¡Ahorre algo de tiempo y asegúrese de configurar la imagen, no la imagen de fondo! @SeongLee es correcto, no puedes manipular la imagen de fondo con contentMode o 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)

66
Esto funcionó muy bien para mí. Creé un ícono PDF dentro de Inkscape y las contentVerticalAlignment/contentHorizontalAlignmentopciones me permitieron escalarlo de la manera que esperaba. Gracias por publicar esto.
Adrian

2
configuración contentHorizontalAlignmente contentVerticalAlignmenthizo el truco
Tom Knapen

1
Esta solución funciona muy bien cuando se utilizan recursos PDF para iconos. ¡Gracias!
Eneko Alonso

38

También puede hacerlo desde el generador de interfaces como este.

ingrese la descripción de la imagen aquí

Creo que es útil


26

Si su imagen es demasiado grande (y no puede / no desea que la imagen sea más pequeña), una combinación de las dos primeras respuestas funciona muy bien.

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

A menos que obtenga las inserciones de la imagen correctamente, la imagen se sesgará sin cambiar el contentMode.


23

puede usar la imageEdgeInsetspropiedad Los márgenes de entrada o de salida para el rectángulo alrededor de la imagen del botón.

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

Un valor positivo reduce o inserta ese borde, moviéndose. Un valor negativo expande, o compensa, ese borde.


17

Aquí está la otra solución para escalar imageView de UIButton.

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

Salvaste mi día. Solo quería escalar mi imagen dentro de un botón. Sin inserciones no hay nada, gracias!
Pedro Antonio

15

Aquí está la versión Swift:

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

8

Swift 4

Debería usar estas dos líneas de código, en este orden específico. Todo lo que necesita es cambiar el valor superior e inferior de las inserciones de borde.

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

Esto causó un EXC_BAD_ACCESSerror cuando se llamó desde override func layoutSubviews().
Andrew Kirna

7

Con la ayuda de la respuesta de Tim C , pude crear una extensión sobre el UIButtonuso de Swift que le permite especificar el marco de la imagen utilizando la .setImage()función con un frameparámetro adicional

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

}

Utilizando esto, si desea establecer el marco de un UIButtona CGRectMake(0, 0, 64, 64), y establecer la imagen myImagecon un marco de CGRectMake(8, 8, 48, 48), puede usar

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

44
En if letlugar de verificar si framees nilasí , debe forzar el desenvolvimiento un millón de veces .
fpg1503

7

Al cambiar el tamaño del icono con UIEdgeInsetsMake(top, left, bottom, right) , tenga en cuenta las dimensiones de los botones y la capacidad de UIEdgeInsetsMake para trabajar con valores negativos como si fueran positivos.

Ejemplo: dos botones con altura 100 y aspecto 1: 1.

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

Los ejemplos 1 y 3 son idénticos ya que ABS (100 - (40 + 40)) = ABS (100 - (60 + 60))


2

Swift 3

Establecí el ancho y la altura de myButton en 40 y mi relleno de EdgeInsetsMake es 15 en todos los lados. Sugiero agregar un color de fondo a su botón para ver el relleno real.

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

2

Un enfoque es cambiar el tamaño del UIImage en código como el siguiente. Nota: este código solo escala por altura, pero también puede ajustar fácilmente la función para escalar por ancho.

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

Actualizado para Swift> 5

establecer el tamaño:

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

establecer márgenes:

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

1

Actualizado para Swift 3

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

-6

Creo que el tamaño de su imagen también es el mismo que el tamaño del botón y luego coloca la imagen en el fondo del botón como:

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

tienes mástil tiene el mismo tamaño de imagen y botón. Espero que entiendas mi punto.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.