ios - and - Cómo ajustar el tamaño de imagen de UIButton?

add image and text to button swift

Question

¿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 con el botón completo, ¿cómo puedo hacer que la imagen sea más pequeña?

Answer 1

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)

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)

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

Answer 2

Aquí está la versión Swift:

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

Answer 3

Con la ayuda de la respuesta de Tim C , pude crear una extensión en UIButton utilizando Swift que le permite especificar el marco de la imagen utilizando la función .setImage() con un parámetro de frame 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
)
}
}
}

Al usar esto, si desea establecer el marco de un UIButton en CGRectMake(0, 0, 64, 64) y establecer su imagen en myImage con un marco de CGRectMake(8, 8, 48, 48) , podría utilizar

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

Answer 4

Creo que el tamaño de tu imagen es igual que el tamaño del botón y luego colocas la imagen en el fondo del botón como:

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

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

Answer 5

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 establecer las inserciones de imagen de UIButton porque no me di cuenta de que podía configurar el modo de contenido en UIImageView del botón, lo que habría evitado la necesidad de utilizar UIEdgeInsets y valores codificados por completo. Simplemente acceda a la vista de la imagen subyacente en el botón y configure el modo de contenido:

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

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

Swift 3

myButton.imageView?.contentMode = .scaleAspectFit

Answer 6

Si entiendo correctamente lo que estás tratando de hacer, debes jugar con los botones borde de la imagen del recuadro. Algo como:

myLikesButton.imageEdgeInsets = UIEdgeInsetsMake(top, left, bottom, right);

Answer 7

Si su imagen es demasiado grande (y no puede / no quiere 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 imagen correctas, la imagen se sesgará sin cambiar el modo de contentMode .

Answer 8

Swift 3

Establecí myButton ancho y alto en 40 y mi relleno de EdgeInsetsMake es 15 en todos los lados. Sugiero que agregue 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)

Answer 9

Swift 3:

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

Answer 10

También puede hacer eso desde el constructor de interfaces como este.

Creo que es útil.

Answer 11

Un enfoque es redimensionar el 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!
}

Answer 12

puede usar la propiedad imageEdgeInsets Los márgenes insertados o imageEdgeInsets para el rectángulo alrededor de la imagen del botón.

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

Un valor positivo se contrae, o inserta, ese movimiento de borde. Un valor negativo expande, o inicia, ese borde.

Answer 13

Actualizado para Swift 3

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

Answer 14

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)