UIButton Image + Text IOS

Necesito un UIButton con imagen y texto . La imagen debe estar en la parte superior y el texto aparece debajo de la imagen, ambos deben poder hacer clic.

Veo respuestas muy complicadas, todas usan código. Sin embargo, si está utilizando Interface Builder , hay una forma muy sencilla de hacerlo:

  1. Seleccione el botón y establezca un título y una imagen. Tenga en cuenta que si configura el fondo en lugar de la imagen, la imagen cambiará de tamaño si es más pequeño que el botón. Imagen básica y título de 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 de Control.

Conjunto de posición IBConjunto de control IB

Incluso podría usar el mismo enfoque por código, sin crear UILabels y UIImages dentro como otras soluciones propuestas. ¡Siempre manténlo simple!

EDITAR: Adjunta un pequeño ejemplo con los 3 elementos establecidos (título, imagen y fondo) con las inserciones correctas Vista previa del botón

Creo que estás buscando esta solución para tu 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 rest de la personalización del botón es su deber ahora, y no se olvide de agregar el botón a su vista.

ACTUALIZACIÓN # 1 y ACTUALIZACIÓN # 2

o, si no necesita un botón dynamic , puede agregar su botón a su vista en Interface Builder y también puede establecer los mismos valores allí. es bastante similar, pero aquí está esta versión también en una imagen simple.

también puede ver el resultado final en el Interface Builder tal como está en la captura de pantalla.

enter image description here

Xcode-8 y Xcode-9 Apple hizo algunos cambios con respecto a Edge Inset ahora, puede cambiarlo bajo el inspector de tamaño.

Por favor, siga los pasos a continuación:

Paso-1: ingrese el texto y seleccione la imagen que desea mostrar:

enter image description here

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

enter image description here

Paso 3: Ahora ve al tamaño del inspector y agrega valor según tu requerimiento:

enter image description here

 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 utilizar la etiqueta y el botón con el mismo control porque UIButton tiene las propiedades UILabel y UIimageview.

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 yourButtonSelected: método seleccionado por yourButtonSelected:

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

Creo que será útil para ti.

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

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] 

Me encontré con el mismo problema, y ​​lo solucioné creando una nueva subclase de UIButton y reemplazando el método layoutSubviews: 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 colocas todas manualmente con el constructor de interfaces, pero mantendré mi solución ya que no tengo que modificar las inserciones de contenido para cada uno de mis botones.

Realice UIImageView y 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]; 

Es realmente simple, simplemente agrega la imagen al fondo de tu botón y dale 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]; 

Comprueba esta impresionante lib ImageCenterButton Resuelve todos los problemas que enfrentan otras libs y confirmo que funciona con iOS 9

enter image description here