UIButton Image + Text IOS


129

Necesito un UIButtoncon imagen y texto . La imagen debe estar en la parte superior y el texto viene debajo de la imagen, ambos deben ser clicables.


Espero que esto ayude, consulte [UiButton con TEXTO e IMAGEN] [1] stackoverflow.com/questions/4926581/… [1]: stackoverflow.com/questions/4926581/… Luego puede agregar un UITapGestureRecognizer en su vista para manejar el custombutton clics
Humayun Ghani

22
Suena más como una especificación de requisitos que como una pregunta.
Abizern

Ver la respuesta aceptada y esta commandshift.co.uk/blog/2013/03/12/uibutton-edge-insets sobre UIButton Bordes
onmyway133

Respuestas:


308

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:

  1. 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.Imagen básica y título del IB
  2. 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.

Posición del IB establecida Conjunto de control IB

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 Vista previa del botón


2
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.

ingrese la descripción de la imagen aquí


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:

ingrese la descripción de la imagen aquí

Paso 2: Seleccione el control del botón según sus requisitos, como se muestra en la imagen a continuación:

ingrese la descripción de la imagen aquí

Paso 3: ahora vaya al inspector de tamaño y agregue valor según su requisito:

ingrese la descripción de la imagen aquí


9
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.imageView.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";

pero el siguiente código mostrará la etiqueta arriba y la imagen en el fondo

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.background.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";

No es necesario usar etiquetas y botones en el mismo control porque UIButton tiene las propiedades UILabel y UIimageview.


1
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];

4

Usa este código:

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sampleButton setFrame:CGRectMake(0, 10, 200, 52)];
[sampleButton setTitle:@"Button Title" forState:UIControlStateNormal];
[sampleButton setFont:[UIFont boldSystemFontOfSize:20]];
[sampleButton setBackgroundImage:[[UIImage imageNamed:@"redButton.png"] 
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0] forState:UIControlStateNormal];
[sampleButton addTarget:self action:@selector(buttonPressed)
forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:sampleButton]

4

Encontré el mismo problema y lo solucioné creando una nueva subclase de UIButtony anulando el layoutSubviews:método de la siguiente manera:

-(void)layoutSubviews {
    [super layoutSubviews];

    // Center image
    CGPoint center = self.imageView.center;
    center.x = self.frame.size.width/2;
    center.y = self.imageView.frame.size.height/2;
    self.imageView.center = center;

    //Center text
    CGRect newFrame = [self titleLabel].frame;
    newFrame.origin.x = 0;
    newFrame.origin.y = self.imageView.frame.size.height + 5;
    newFrame.size.width = self.frame.size.width;

    self.titleLabel.frame = newFrame;
    self.titleLabel.textAlignment = UITextAlignmentCenter;

}

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.


4

Cree UIImageViewy UILabel, y establezca la imagen y el texto en ambos ... luego coloque un botón personalizado sobre imageView y Label ...

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"search.png"]];
    imageView.frame = CGRectMake(x, y, imageView.frame.size.width, imageView.frame.size.height);
    [self.view addSubview:imageView];

UILabel *yourLabel = [[UILabel alloc] initWithFrame:CGRectMake(x, y,a,b)];
yourLabel.text = @"raj";
[self.view addSubview:yourLabel];

UIButton * yourBtn=[UIButton buttonWithType:UIButtonTypeCustom];
[yourBtn setFrame:CGRectMake(x, y,c,d)];
[yourBtn addTarget:self action:@selector(@"Your Action") forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:yourBtn];  

Simple y útil ¿Cómo configurar la imagen resaltada y el título?
DawnSong

para lable setHighlightedTextColor y tienes que jugar con forControlEvents
Rajneesh071

3

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.

UIButton *yourButton = [UIButton buttonWithType:UIButtonTypeCustom];
yourButton.backgroundColor = [UIColor greenColor];
yourButton.frame = CGRectMake(140, 40, 175, 30);     
[yourButton addTarget:self action:@selector(yourButtonSelected:) forControlEvents:UIControlEventTouchUpInside]; 
[self.view addSubview:yourButton];

UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, yourButton.frame.size.width, yourButton.frame.size.height/2)];
imageView1.image =[UIImage imageNamed:@"images.jpg"];
[yourButton addSubview:imageView1];

UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0, yourButton.frame.size.height/2, yourButton.frame.size.width, yourButton.frame.size.height/2)];
label.backgroundColor = [UIColor greenColor];
label.textAlignment= UITextAlignmentCenter;
label.text = @"ButtonTitle";
[yourButton addSubview:label];

Para fines de prueba, use el yourButtonSelected:método

-(void)yourButtonSelected:(id)sender{
    NSLog(@"Your Button Selected");

}

Creo que te será útil.


3

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.

[btn setBackgroundImage:[UIImage imageNamed:@"img.png"] forState:UIControlStateNormal];
[btn setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];
[btn setTitle:@"Click Me" forState:UIControlStateNormal];

44
... y cómo va el texto debajo de la imagen?
holex

@holex: Muchas gracias por dirigirme, encontré una falla y luego cambié en consecuencia.
Dhruv

1

versión rápida:

var button = UIButton()

newGameButton.setTitle("Новая игра", for: .normal)
newGameButton.setImage(UIImage(named: "energi"), for: .normal)
newGameButton.backgroundColor = .blue
newGameButton.imageEdgeInsets.left = -50

ingrese la descripción de la imagen aquí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.