UIButton Image + Texte IOS
J'ai besoin d'un UIButton avec image et texte. L'image doit être dans le haut et le texte vient sous l'image, les deux doivent être cliquables.
Je vois des réponses très compliquées, toutes utilisant du code. Cependant, si vous utilisez Interface Builder, il existe un moyen très simple de procéder:
- Sélectionnez le bouton et définissez un titre et une image. Notez que si vous définissez l'arrière-plan à la place de l'image, celle-ci sera redimensionnée si elle est plus petite que le bouton.
![IB basic image and title]()
- Définissez la position des deux éléments en modifiant le bord et les encarts. Vous pouvez même contrôler l'alignement des deux dans la section Contrôle.
Vous pouvez même utiliser la même approche par code, sans créer UILabels et UIImages à l'intérieur des autres solutions proposées. Toujours garder les choses simples!
EDIT: Ci-joint un petit exemple avec les 3 éléments (titre, image et fond) avec les encarts corrects 
Je pense que vous cherchez cette solution pour votre problème:
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
... le reste de la personnalisation du bouton est maintenant de votre devoir, et n'oubliez pas d'ajouter le bouton à votre vue.
PDATE # 1 et PDATE # 2
ou, si vous n'avez pas besoin d'un bouton dynamique vous pouvez ajouter votre bouton à votre vue dans le Générateur d'interface et vous pourrait définir les mêmes valeurs là aussi. c'est à peu près pareil, mais voici cette version également dans une image simple.
vous peut également voir le résultat final dans le constructeur d'Interface tel qu'il est sur la capture d'écran.
Xcode-9 et Xcode-10 Apple fait quelques modifications concernant Edge Inset maintenant, vous pouvez le changer sous inspecteur de taille.
Veuillez suivre les étapes ci-dessous:
Étape 1: Saisissez le texte et sélectionnez l'image que vous souhaitez afficher:
Étape 2: Sélectionnez le bouton de commande selon vos besoins, comme indiqué dans l'image ci-dessous:
Étape 3: Passez maintenant à l'inspecteur de taille et ajoutez de la valeur selon vos besoins:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.imageView.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";
mais le code suivant montrera l'étiquette ci-dessus et l'image en arrière-plan
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.background.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";
Il n'est pas nécessaire d'utiliser label et button dans le même contrôle car UIButton a les propriétés UILabel et UIimageview.
Créez UIImageView et UILabel, et définissez l'image et le texte sur les deux éléments .... puis placez un bouton personnalisé sur imageView et 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];
Utilisez ce code:
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];
Utilisez ce code:
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]
J'ai rencontré le même problème et je l'ai résolu en créant une nouvelle sous-classe de UIButton et en surchargeant la méthode layoutSubviews: comme ci-dessous:
-(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;
}
Je pense que la réponse de Angel García Olloqui est une autre bonne solution, si vous les placez tous manuellement avec le constructeur d'interface, mais je garderai ma solution car je n'ai pas à modifier les encarts de contenu pour chacun de mes boutons.
Vous devez créer une image view personnalisée pour une image et un libellé personnalisé pour le texte, puis les ajouter à votre bouton en tant que sous-vues. C'est ça.
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];
Pour tester, utilisez la méthode yourButtonSelected:
-(void)yourButtonSelected:(id)sender{
NSLog(@"Your Button Selected");
}
Je pense que cela vous sera utile.
C’est très simple, il suffit d’ajouter une image à l’arrière-plan de votre bouton et de donner du texte à l’en-tête du bouton pour uicontrolstatenormal. C'est ça.
[btn setBackgroundImage:[UIImage imageNamed:@"img.png"] forState:UIControlStateNormal];
[btn setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];
[btn setTitle:@"Click Me" forState:UIControlStateNormal];
Vérifiez cette bibliothèque géniale ImageCenterButton Elle résout tous les problèmes que rencontrent les autres bibliothèques et je confirme que cela fonctionne avec iOS 9
