Gostaria de colocar um ícone à esquerda das duas linhas de texto, de modo que haja cerca de 2-3 pixels de espaço entre a imagem e o início do texto. O controle em si é o centro alinhado horizontalmente (definido pelo Interface Builder)
O botão seria semelhante a isto:
| |
|[Image] Add To |
| Favorites |
Eu estou tentando configurar isso com contentEdgeInset, imageEdgeInsets e titleEdgeInsets sem sucesso. Entendo que um valor negativo expande a borda, enquanto um valor positivo diminui para movê-lo para mais perto do centro.
Eu tentei:
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -image.size.width, 0, 0)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, 0)];
mas isso não é exibido corretamente. Estive ajustando os valores, mas passando de -5 para -10 no valor inserido à esquerda não parece movê-lo da maneira esperada. -10 vai arrastar o texto para a esquerda, então eu esperava -5 para arrastá-lo até a metade do lado esquerdo, mas não o faz.
Qual é a lógica por trás das inserções? Não estou familiarizado com canais de imagem e terminologia relacionada.
Eu usei essa pergunta SO como referência, mas algo sobre meus valores não está certo. UIButton: como centralizar uma imagem e um texto usando imageEdgeInsets e titleEdgeInsets?
[UIButton setTitleColor:forState:]
, ou mesmo[UIButton setTitle:forState:]
.Estou um pouco atrasado para esta festa, mas acho que tenho algo útil a acrescentar.
A resposta de Kekoa é ótima, mas, como RonLugge menciona, ele pode fazer com que o botão não seja mais respeitado
sizeToFit
ou, mais importante, pode fazer com que o botão recorte seu conteúdo quando ele é intrinsecamente dimensionado. Caramba!Primeiro, porém,
Uma breve explicação de como acredito
imageEdgeInsets
etitleEdgeInsets
trabalho:Os documentos para
imageEdgeInsets
têm o seguinte a dizer, em parte:Acredito que esta documentação foi escrita imaginando que o botão não tem título, apenas uma imagem. Faz muito mais sentido pensar dessa maneira e se comporta como
UIEdgeInsets
costuma fazer. Basicamente, o quadro da imagem (ou o título, comtitleEdgeInsets
) é movido para dentro para inserções positivas e para fora para inserções negativas.Tá, e daí?
Estou chegando lá! Aqui está o que você tem por padrão, definindo uma imagem e um título (a borda do botão é verde apenas para mostrar onde está):
Quando você deseja espaçar entre uma imagem e um título, sem causar esmagamento, é necessário definir quatro inserções diferentes, duas em cada imagem e título. Isso ocorre porque você não deseja alterar os tamanhos dos quadros desses elementos, mas apenas suas posições. Quando você começa a pensar dessa maneira, a mudança necessária para a excelente categoria de Kekoa fica clara:
Mas espere , você diz, quando faço isso, recebo o seguinte:
Oh sim! Eu esqueci, os documentos me avisaram sobre isso. Eles dizem, em parte:
Mas não é uma propriedade que pode ajudar, e isso é
contentEdgeInsets
. Os documentos para isso dizem, em parte:Isso soa bem. Então, vamos ajustar a categoria mais uma vez:
e o que você ganha?
Parece um vencedor para mim.
Trabalhando na Swift e não quer pensar em nada? Aqui está a versão final da extensão no Swift:
fonte
intrinsicContentSize
estar incorreto, o que é muito importante nesses dias de layout automático desde que a resposta original foi aceita.spacing
a cada um dos quatro valores de self.contentEdgeInsets, assim:self.contentEdgeInsets = UIEdgeInsetsMake(spacing, spacing + insetAmount, spacing, spacing + insetAmount);
Na interface Builder. Selecione o UIButton -> Inspetor de atributos -> Borda = Título e modifique as inserções de borda
fonte
Além disso, se você quiser fazer algo semelhante a
Você precisa
1. Defina o alinhamento horizontal e vertical para o botão
Encontre todos os valores necessários e defina
UIImageEdgeInsets
Isso organizará seu título e imagem no botão.
Observe também que atualize isso em cada retransmissão
Rápido
fonte
Você pode evitar muitos problemas usando isso -
Isso alinhará todo o seu conteúdo automaticamente à esquerda (ou onde você quiser)
Swift 3:
fonte
No Xcode 8.0, você pode simplesmente fazer isso alterando o
insets
tamanho do inspetor.Selecione o UIButton -> Inspetor de atributos -> vá para o inspetor de tamanho e modifique o conteúdo, a imagem e as inserções de título.
E se você deseja alterar a imagem no lado direito, basta alterar a propriedade semântica para
Force Right-to-left
no Inspetor de atributos.fonte
Estou um pouco atrasado para esta festa também, mas acho que tenho algo útil a acrescentar: o).
Criei uma
UIButton
subclasse cujo objetivo é poder escolher onde a imagem do botão é o layout, vertical ou horizontalmente.Isso significa que você pode criar esse tipo de botão:
Aqui estão os detalhes sobre como criar esses botões com a minha classe:
Para fazer isso, adicionei 2 atributos:
imageVerticalAlignment
eimageHorizontalAlignment
. Claro, se o seu botão tiver apenas uma imagem ou um título ... não use esta classe!Também adicionei um atributo chamado
imageToTitleSpacing
que permite ajustar o espaço entre o título e a imagem.Esta classe tentar o seu melhor para ser compatível, se você quer usar
imageEdgeInsets
,titleEdgeInsets
econtentEdgeInsets
direta ou em combinaison com os novos atributos de layout.Como o @ravron nos explica, eu tento o meu melhor para corrigir a borda do conteúdo do botão (como você pode ver com as bordas vermelhas).
Você também pode usá-lo no Interface Builder:
Aqui o código ( essência ):
fonte
error: IB Designables: Failed to update auto layout status: The agent crashed
, gist.github.com/nebiros/ecf69ff9cb90568edde071386c6c4ddberror: IB Designables: Failed to update auto layout status: The agent crashed
porqueinit(frame: CGRect)
não foi substituído, também, acrescento@available
anotação ..., você podediff -Naur
, se quiser, ;-)Uma pequena adição à resposta de Riley Avron para alterar as localidades da conta:
fonte
Swift 4.x
Uso :
fonte
Eu escrevo código bewlow. Funciona bem na versão do produto. Supprot Swift 4.2 +
fonte
Aqui está um exemplo simples de como usar o imageEdgeInsets Isso criará um botão 30x30 com uma área atingível 10 pixels maior ao redor (50x50)
fonte
Uma maneira elegante no Swift 3 e melhor para entender:
fonte
A versão rápida 4.2 da solução seria a seguinte:
fonte