Como ajustar o imageSize de um UIButton?


158

Como posso ajustar o tamanho da imagem do UIButton? Estou definindo a imagem assim:

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

No entanto, isso preenche a imagem até o botão completo, como diminuo a imagem?


6
Você já tentou diminuir a imagem (LOL)?
CodaFi

1
A @CodaFi está certa, você geralmente deve fornecer ativos no tamanho certo, pois isso reduz qualquer trabalho para a CPU, usa menos memória e provavelmente parecerá melhor, pois você não apresenta potencialmente artefatos de escala ...
Paul.s

Além disso, você pode fazer o botão com o tamanho da imagem (ou vice-versa) .Por que ter um botão grande ... com uma pequena imagem nele? Simplesmente adicione a imagem desejada, é para isso que servem os botões personalizados. explique a lógica que você deseja implementar para que outras pessoas tenham uma ideia clara.
Abhishek Singh

Respostas:


243

Se eu entendi corretamente o que você está tentando fazer, você precisa brincar com os botões inseridos na borda da imagem. Algo como:

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

96

A resposta de Tim está correta, no entanto, eu queria adicionar outra sugestão, porque no meu caso havia uma solução mais simples.

Eu estava procurando definir as UIButtoninserções de imagem porque não sabia que poderia definir o modo de conteúdo nos botões UIImageView, o que teria impedido a necessidade de usar UIEdgeInsets e valores codificados por completo. Basta acessar a visualização de imagem subjacente no botão e definir o modo de conteúdo:

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

Veja UIButton não escuta a configuração do modo de conteúdo?

Swift 3

myButton.imageView?.contentMode = .scaleAspectFit

1
como fazer o mesmo para backgroundImage?
Sergey Sahakyan

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

@ Andrea.Ferrando button.backgroundImageView.contentModenão funciona
Seong Lee

Economize algum tempo e verifique se está definindo imagem e não imagem de fundo! @SeongLee está correto que você não pode manipular imagem de fundo com 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
Isso funcionou lindamente para mim. Criei um ícone de PDF no Inkscape e as contentVerticalAlignment/contentHorizontalAlignmentopções me permitiram escalá-lo da maneira que eu esperava. Obrigado por postar isso.
Adrian

2
definição contentHorizontalAlignmente contentVerticalAlignmentfez o truque
Tom Knapen

1
Essa solução funciona muito bem ao usar recursos PDF para ícones. Obrigado!
Eneko Alonso

38

Você também pode fazer isso a partir do inteface builder como este.

insira a descrição da imagem aqui

Eu acho que é útil.


26

Se sua imagem é muito grande (e você não pode / não quer apenas torná-la menor), uma combinação das duas primeiras respostas funciona muito bem.

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

A menos que você obtenha as inserções da imagem corretamente, a imagem será inclinada sem alterar o contentMode.


23

você pode usar a imageEdgeInsetspropriedade As margens interna ou externa do retângulo ao redor da imagem do botão.

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

Um valor positivo diminui, ou insere, essa margem - em movimento. Um valor negativo expande ou ultrapassa essa margem.


17

Aqui está a outra solução para dimensionar o imageView do UIButton.

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

Você salvou o meu dia. Eu só queria dimensionar minha imagem dentro de um botão. Sem inserções sem nada, obrigado!
Pedro Antonio

15

Aqui está a versão Swift:

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

8

Swift 4

Você precisaria usar essas duas linhas de código, nesta ordem específica. Tudo que você precisa é alterar o valor superior e inferior das inserções de arestas.

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

Isso causou um EXC_BAD_ACCESSerro quando chamado de override func layoutSubviews().
Andrew Kirna 18/05/19

7

Com a ajuda da resposta de Tim C , consegui criar uma extensão ao UIButtonusar o Swift que permite especificar o quadro da imagem usando a .setImage()função com um frameparâmetro extra

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

}

Usando isso, se você quiser definir o quadro de um UIButtonpara CGRectMake(0, 0, 64, 64)e definir a imagem dele myImagecom um quadro de CGRectMake(8, 8, 48, 48), poderá usar

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

4
Você deve, em if letvez de verificar se frameestá, nile forçar a desembrulhar um zilhão de vezes .
precisa saber é o seguinte

7

Ao alterar o tamanho do ícone UIEdgeInsetsMake(top, left, bottom, right), lembre-se das dimensões do botão e da capacidade do UIEdgeInsetsMake de trabalhar com valores negativos como se fossem positivos.

Exemplo: Dois botões com altura 100 e aspecto 1: 1.

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

Os exemplos 1 e 3 são idênticos, pois ABS (100 - (40 + 40)) = ABS (100 - (60 + 60))


2

Swift 3

Defino a largura e a altura do myButton para 40 e meu preenchimento no EdgeInsetsMake é 15 em todos os lados. Sugiro adicionar uma cor de fundo ao seu botão para ver o preenchimento real.

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

2

Uma abordagem é redimensionar a UIImage no código da seguinte maneira. Nota: esse código é dimensionado apenas pela altura, mas você também pode ajustar facilmente a função para dimensionar pela largura.

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

Atualizado para Swift> 5

defina o tamanho:

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

definir margens:

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

1

Atualizado para o Swift 3

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

-6

Eu acho que o tamanho da sua imagem também é igual ao tamanho do botão, em seguida, você coloca a imagem no fundo do botão, como:

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

você tem o mesmo tamanho de imagem e botão. espero que você entenda meu ponto.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.