Veo respuestas muy complicadas, todas ellas usando código. Sin embargo, si está utilizando Interface Builder , hay una manera muy fácil de hacer esto:
Seleccione el botón y establezca un título y una imagen. Tenga en cuenta que si establece el fondo en lugar de la imagen, la imagen cambiará de tamaño si es más pequeña que el botón.
Establezca la posición de ambos elementos cambiando el borde y las inserciones. Incluso podría controlar la alineación de ambos en la sección Control.
Incluso podría usar el mismo enfoque por código, sin crear UILabels y UIImages dentro como otras soluciones propuestas. ¡Siempre mantenlo simple!
EDITAR: Adjunto un pequeño ejemplo que tiene las 3 cosas establecidas (título, imagen y fondo) con las inserciones correctas
Esto es correcto. Deberá utilizar las inserciones de borde en el título y la imagen para alinear los dos correctamente. Puede hacer esto en código estableciendo las propiedades titleEdgeInsets y contentEdgeInsets.
Tim Mahoney
44
Sí, es casi correcto. solo tiene que configurar la Backgroundimagen en lugar de la Image, de lo contrario no verá el título ni siquiera establecerá los valores insertados para reposicionar el título.
holex
66
También tuve problemas con esto. Si su título no aparece, intente establecer un desplazamiento izquierdo negativo para él. Parece que IB lo empuja automáticamente a la derecha de la imagen.
brians
8
Esto solo muestra la imagen y el texto uno al lado del otro, ¿verdad? ¿Hay alguna forma de cambiar la orientación de arriba a abajo? Esto es lo que dice la pregunta original y lo que estoy buscando también. ¡Gracias!
flohei
12
Para aquellos que usan Xcode 8, es posible que no veas la propiedad Edge. El texto también puede desaparecer después de agregar una imagen. Cambia el texto a blanco y si está sobre un fondo blanco, parece que desapareció. Cambia el color del texto y aparecerá cerca de la imagen. Puede ajustar las inserciones en el inspector de tamaño.
Micah Montoya
67
Creo que está buscando esta solución para su problema:
UIButton*_button =[UIButton buttonWithType:UIButtonTypeCustom];[_button setFrame:CGRectMake(0.f,0.f,128.f,128.f)];// SET the values for your wishes[_button setCenter:CGPointMake(128.f,128.f)];// SET the values for your wishes[_button setClipsToBounds:false];[_button setBackgroundImage:[UIImage imageNamed:@"jquery-mobile-icon.png"] forState:UIControlStateNormal];// SET the image name for your wishes[_button setTitle:@"Button" forState:UIControlStateNormal];[_button.titleLabel setFont:[UIFont systemFontOfSize:24.f]];[_button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];// SET the colour for your wishes[_button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];// SET the colour for your wishes[_button setTitleEdgeInsets:UIEdgeInsetsMake(0.f,0.f,-110.f,0.f)];// SET the values for your wishes[_button addTarget:self action:@selector(buttonTouchedUpInside:) forControlEvents:UIControlEventTouchUpInside];// you can ADD the action to the button as well like
... el resto de la personalización del botón es su deber ahora, y no olvide agregar el botón a su vista.
ACTUALIZACIÓN # 1 y ACTUALIZACIÓN # 2
o, si no necesita un botón dinámico , puede agregar su botón a su vista en el Creador de interfaces y también puede establecer los mismos valores allí. es bastante igual, pero aquí está esta versión también en una imagen simple.
También puede ver el resultado final en el Creador de interfaces tal como está en la captura de pantalla.
EdgeInsets solo funciona cuando tiene "establecer imagen de botón" y cuando establece imagen de botón no puede ver el título. Y si configura la imagen de fondo, EdgeInsets no se puede aplicar a la imagen. y puedes ver el título. Por lo tanto, no puede establecer edgeinsect en ambos al mismo tiempo.
Badal Shah
@BadalShah, sí, hay algunos escenarios (dependiendo del tamaño del botón, el tamaño de la imagen, la longitud del título, etc.) cuando lo que dijo es verdadero y no puede ver el título y la imagen al mismo tiempo porque la imagen elimina el título del área visible; pero ese escenario no es genérico en absoluto, la situación genérica es que tanto el título como la imagen podrían aparecer y aparecerán al mismo tiempo.
holex
32
Xcode-9 y Xcode-10 Apple han hecho algunos cambios con respecto a Edge Inset ahora, puedes cambiarlo bajo inspector de tamaño.
Siga los pasos a continuación:
Paso 1:
ingrese el texto y seleccione la imagen que desea mostrar:
Paso 2:
Seleccione el control del botón según sus requisitos, como se muestra en la imagen a continuación:
Paso 3:
ahora vaya al inspector de tamaño y agregue valor según su requisito:
Necesito para colocar la imagen en la parte superior y el texto debajo de la imagen tanto se puede hacer clic ..
CODESEN
4
Usa este código:
UIButton*button=[UIButton buttonWithType:UIButtonTypeRoundedRect];
button.imageView.frame=CGRectMake(0.0f,0.0f,50.0f,44.0f);///You can replace it with your own dimensions.UILabel*label=[[UILabel alloc] initWithFrame:CGRectMake(0.0f,35.0f,50.0f,44.0f)];///You can replace it with your own dimensions.[button addSubview:label];
Creo que la respuesta de Angel García Olloqui es otra buena solución, si las coloca manualmente con el generador de interfaces, pero mantendré mi solución ya que no tengo que modificar las inserciones de contenido para cada uno de mis botones.
Respuestas:
Veo respuestas muy complicadas, todas ellas usando código. Sin embargo, si está utilizando Interface Builder , hay una manera muy fácil de hacer esto:
Incluso podría usar el mismo enfoque por código, sin crear UILabels y UIImages dentro como otras soluciones propuestas. ¡Siempre mantenlo simple!
EDITAR: Adjunto un pequeño ejemplo que tiene las 3 cosas establecidas (título, imagen y fondo) con las inserciones correctas
fuente
Background
imagen en lugar de laImage
, de lo contrario no verá el título ni siquiera establecerá los valores insertados para reposicionar el título.Creo que está buscando esta solución para su problema:
... el resto de la personalización del botón es su deber ahora, y no olvide agregar el botón a su vista.
ACTUALIZACIÓN # 1 y ACTUALIZACIÓN # 2
o, si no necesita un botón dinámico , puede agregar su botón a su vista en el Creador de interfaces y también puede establecer los mismos valores allí. es bastante igual, pero aquí está esta versión también en una imagen simple.
También puede ver el resultado final en el Creador de interfaces tal como está en la captura de pantalla.
fuente
Xcode-9 y Xcode-10 Apple han hecho algunos cambios con respecto a Edge Inset ahora, puedes cambiarlo bajo inspector de tamaño.
Siga los pasos a continuación:
Paso 1: ingrese el texto y seleccione la imagen que desea mostrar:
Paso 2: Seleccione el control del botón según sus requisitos, como se muestra en la imagen a continuación:
Paso 3: ahora vaya al inspector de tamaño y agregue valor según su requisito:
fuente
pero el siguiente código mostrará la etiqueta arriba y la imagen en el fondo
No es necesario usar etiquetas y botones en el mismo control porque UIButton tiene las propiedades UILabel y UIimageview.
fuente
Usa este código:
fuente
Usa este código:
fuente
Encontré el mismo problema y lo solucioné creando una nueva subclase de
UIButton
y anulando ellayoutSubviews:
método de la siguiente manera:Creo que la respuesta de Angel García Olloqui es otra buena solución, si las coloca manualmente con el generador de interfaces, pero mantendré mi solución ya que no tengo que modificar las inserciones de contenido para cada uno de mis botones.
fuente
Cree
UIImageView
yUILabel
, y establezca la imagen y el texto en ambos ... luego coloque un botón personalizado sobre imageView y Label ...fuente
Debe crear una vista de imagen personalizada para la imagen y una etiqueta personalizada para el texto y agregarla a su botón como subvistas. Eso es.
Para fines de prueba, use el
yourButtonSelected:
métodoCreo que te será útil.
fuente
Es realmente simple, solo agregue una imagen al fondo de su botón y dele texto a la etiqueta del título del botón para uicontrolstatenormal. Eso es.
fuente
versión rápida:
fuente