Necesito un UIButton
con imagen y texto . La imagen debe estar en la parte superior y el texto viene debajo de la imagen, ambos deben ser clicables.
Necesito un UIButton
con imagen y texto . La imagen debe estar en la parte superior y el texto viene debajo de la imagen, ambos deben ser clicables.
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
Background
imagen en lugar de la Image
, 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:
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.
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:
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.
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]
Encontré el mismo problema y lo solucioné creando una nueva subclase de UIButton
y 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.
Cree 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];
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.
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];