Image UIButton + Texte IOS

J'ai besoin d' une UIButtonavec l' image et le texte . L'image doit être en 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 le faire:

1. Sélectionnez le bouton et définissez un titre et une image. Notez que si vous définissez l'arrière-plan au lieu de l'image, l'image sera redimensionnée si elle est plus petite que le bouton.
2. 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 des UILabels et UIImages à l'intérieur comme d'autres solutions proposées. Restez toujours simple!

EDIT: joint un petit exemple ayant les 3 choses définies (titre, image et arrière-plan) avec des encarts corrects

Je pense que vous recherchez 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 de votre devoir maintenant, et n'oubliez pas d'ajouter le bouton à votre vue.

MISE À JOUR N ° 1 et MISE À JOUR N ° 2

ou, si vous n'avez pas besoin d'un bouton dynamique, vous pouvez ajouter votre bouton à votre vue dans Interface Builder et vous pouvez également définir les mêmes valeurs ici. c'est à peu près la même chose, mais voici cette version également en une simple image.

vous pouvez également voir le résultat final dans Interface Builder tel qu'il est sur la capture d'écran.

Xcode-9 et Xcode-10 Apple ont fait quelques changements concernant Edge Inset maintenant, vous pouvez le changer sous l'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 contrôle du bouton selon vos besoins, comme indiqué dans l'image ci-dessous:

Étape 3: Maintenant, passez à 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 affichera 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 l'étiquette et le bouton dans le même contrôle car UIButton a des propriétés UILabel et UIimageview.

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 le corrige en créant une nouvelle sous-classe de UIButtonet en remplaçant la layoutSubviews:méthode 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 d'Angel García Olloqui est une autre bonne solution, si vous les placez toutes 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.

Créez UIImageViewet UILabel, et définissez l'image et le texte sur les deux ... 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];  

Vous devez créer une vue d'image personnalisée pour l'image et une étiquette personnalisée pour le texte et ajouter à votre bouton en tant que sous-vues. C'est tout.

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

À des fins de test, utilisez la yourButtonSelected:méthode

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

}

Je pense que cela vous sera utile.

C'est vraiment simple, il suffit d'ajouter l'image à l'arrière-plan de votre bouton et de donner du texte au titre du bouton pour uicontrolstatenormal. C'est tout.

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

version rapide:

var button = UIButton()

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