Me gustaría colocar un icono a la izquierda de las dos líneas de texto de modo que haya aproximadamente 2-3 píxeles de espacio entre la imagen y el inicio del texto. El control en sí está alineado horizontalmente en el centro (establecido a través del Creador de interfaces)
El botón se parecería a algo como esto:
| |
|[Image] Add To |
| Favorites |
Estoy tratando de configurar esto con contentEdgeInset, imageEdgeInsets y titleEdgeInsets en vano. Entiendo que un valor negativo expande el borde mientras que un valor positivo lo reduce para acercarlo al centro.
Lo intenté:
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -image.size.width, 0, 0)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, 0)];
pero esto no lo muestra correctamente. He estado ajustando los valores, pero pasar de decir -5 a -10 en el valor del recuadro izquierdo no parece moverlo de la manera esperada. -10 desplazará el texto completamente hacia la izquierda, así que esperaba que -5 lo desplazara a la mitad del lado izquierdo, pero no lo hace.
¿Cuál es la lógica detrás de las inserciones? No estoy familiarizado con las ubicaciones de imágenes y la terminología relacionada.
Utilicé esta pregunta SO como referencia, pero algo sobre mis valores no está bien. UIButton: ¿cómo centrar una imagen y un texto usando imageEdgeInsets y titleEdgeInsets?
[UIButton setTitleColor:forState:]
, o incluso[UIButton setTitle:forState:]
.Llego un poco tarde a esta fiesta, pero creo que tengo algo útil que agregar.
La respuesta de Kekoa es excelente, pero, como menciona RonLugge, puede hacer que el botón ya no respete
sizeToFit
o, lo que es más importante, puede hacer que el botón recorte su contenido cuando tiene un tamaño intrínseco. ¡Ay!Primero, sin embargo,
Una breve explicación de cómo creo
imageEdgeInsets
ytitleEdgeInsets
trabajo:Los documentos para
imageEdgeInsets
tienen lo siguiente que decir, en parte:Creo que esta documentación fue escrita imaginando que el botón no tiene título, solo una imagen. Tiene mucho más sentido pensar de esta manera, y se comporta como
UIEdgeInsets
suele hacerlo. Básicamente, el marco de la imagen (o el título, contitleEdgeInsets
) se mueve hacia adentro para inserciones positivas y hacia afuera para inserciones negativas.¿OK y eso qué?
¡Estoy llegando! Esto es lo que tiene de manera predeterminada, configurando una imagen y un título (el borde del botón es verde solo para mostrar dónde está):
Cuando desee un espacio entre una imagen y un título, sin hacer que ninguno de los dos sea aplastado, debe establecer cuatro inserciones diferentes, dos en cada imagen y título. Esto se debe a que no desea cambiar el tamaño de los marcos de esos elementos, sino solo sus posiciones. Cuando comienzas a pensar de esta manera, el cambio necesario a la excelente categoría de Kekoa queda claro:
Pero espera , dices, cuando hago eso, me sale esto:
¡Oh si! Olvidé, los documentos me advirtieron sobre esto. Dicen, en parte:
Pero no es una propiedad que ayuda lata, y eso es
contentEdgeInsets
. Los documentos para eso dicen, en parte:Eso suena bien. Entonces, modifiquemos la categoría una vez más:
Y que obtienes
Me parece un ganador.
¿Trabajas en Swift y no quieres pensar en absoluto? Aquí está la versión final de la extensión en Swift:
fuente
intrinsicContentSize
ser incorrecto, lo cual es muy importante en estos días de diseño automático ya que se aceptó la respuesta original.spacing
a cada uno de los cuatro valores de self.contentEdgeInsets, así:self.contentEdgeInsets = UIEdgeInsetsMake(spacing, spacing + insetAmount, spacing, spacing + insetAmount);
En la interfaz del generador. Seleccione el botón UIB -> Inspector de atributos -> Borde = Título y modifique las inserciones de borde
fuente
También si quieres hacer algo similar a
Necesitas
1.Ajuste la alineación horizontal y vertical para que el botón
Encuentre todos los valores requeridos y establezca
UIImageEdgeInsets
Esto organizará su título e imagen en el botón.
También tenga en cuenta actualizar esto en cada retransmisión
Rápido
fuente
Puede evitar muchos problemas al usar esto:
Esto alineará todo su contenido automáticamente a la izquierda (o donde lo desee)
Swift 3:
fuente
En Xcode 8.0 simplemente puedes hacerlo cambiando
insets
tamaño del inspector.Seleccione el botón UIB -> Inspector de atributos -> vaya al inspector de tamaño y modifique las inserciones de contenido, imagen y título.
Y si desea cambiar la imagen en el lado derecho, simplemente puede cambiar la propiedad semántica
Force Right-to-left
en el inspector de atributos.fuente
También llego un poco tarde a esta fiesta, pero creo que tengo algo útil que agregar: o).
Creé una
UIButton
subclase cuyo propósito es poder elegir dónde se ubica la imagen del botón, ya sea vertical u horizontalmente.Significa que puedes hacer este tipo de botones:
Aquí los detalles sobre cómo crear estos botones con mi clase:
Para hacer eso, agregué 2 atributos:
imageVerticalAlignment
yimageHorizontalAlignment
. Por supuesto, si su botón solo tiene una imagen o un título ... ¡no use esta clase en absoluto!También agregué un atributo llamado
imageToTitleSpacing
que le permite ajustar el espacio entre el título y la imagen.Esta clase hace todo lo posible para ser compatible si desea usar
imageEdgeInsets
,titleEdgeInsets
ycontentEdgeInsets
directamente o en combinación con los nuevos atributos de diseño.Como nos explica @ravron, hago todo lo posible para que el borde del contenido del botón sea correcto (como puede ver con los bordes rojos).
También puede usarlo en Interface Builder:
Aquí el código ( esencia ):
fuente
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)
no fue anulado, también,@available
diff -Naur
Una pequeña adición a la respuesta de Riley Avron a los cambios en la configuración regional de la cuenta:
fuente
Swift 4.x
Uso :
fuente
Escribo el código bewlow. Funciona bien en la versión del producto. Supprot Swift 4.2 +
fuente
Aquí hay un ejemplo simple de cómo usar imageEdgeInsets. Esto hará que un botón de 30x30 con un área golpeable sea 10 píxeles más grande (50x50)
fuente
Una manera elegante en Swift 3 y mejor comprensión:
fuente
La versión rápida de la solución 4.2 sería la siguiente:
fuente