web-dev-qa-db-fra.com

UIButton avec image et texte possible?

J'ai un bouton de taille largeur 200 et hauteur 270. Je veux avoir du texte et une image sur le même bouton. Pas comme une image de fond sur ce texte. Au lieu de cela, je veux afficher le texte avec une hauteur de 120 et une image de hauteur 150 sur le même bouton. Comment faire?

iosiphonexcodeuibutton
64
Viral Narshana

Vous pouvez utiliser ce code, il servira votre but

.h file code
IBOutlet UIButton *testBtn;

.m file code
[testBtn setImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitleEdgeInsets:UIEdgeInsetsMake(70.0, -150.0, 5.0, 5.0)];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];

Ajustez les coordonnées et la taille de votre bouton selon vos besoins. Voici un exemple de code pour vous guider.

PS: Prenez un UIButton dans le fichier nib> Créez-en un bouton personnalisé> Connectez l’IBOutlet à votre bouton personnalisé dans le fichier nib.

114
Aditya

Le code ci-dessous montre comment placer une image et du texte dans un bouton à l'aide des propriétés setImageEdgeInsets et setTitleEdgeInsets de la classe UIButton.

UIButton *butt=[UIButton buttonWithType:UIButtonTypeCustom ];
    [butt setFrame:CGRectMake(0, 0, 100, 100)];
    [butt setBackgroundImage:[UIImage imageNamed:@"sig.png"] forState:UIControlStateNormal];
    [butt setImageEdgeInsets:UIEdgeInsetsMake(0.0, 0.0, 50.0, 0.0)];
    [butt setTitleEdgeInsets:UIEdgeInsetsMake(75.0, 0.0, 0.0, 0.0)];
    [butt setTitle:@"hello" forState:UIControlStateNormal];
    [butt setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self.view addSubview:butt];
14
Abhilash Reddy kallepu

Utilisez le concept de sous-vues. Prenez 3 contrôles, UIButton (200x270), UILabel (200x120) et UIImageView (200x150). Assignez l'image à la UIImageView et définissez le texte pour la UILabel. Positionnez vos contrôles label et imageview en fonction de l'emplacement (x, y) de UIButton.

À la fin, vous devriez avoir quelque chose comme:

Pour les cas suivants:

UIButton *button;
UILabel *label;
UIImageView *imageView;

[button addSubView:imageView];
[button addSubView:label];
6
Vaishnavi Naidu
[testBtn setBackgroudImage: [UIImage imageNamed:@"Image name.png"] forState:UIControlStateNormal];
[testBtn setTitle:@"Your text" forState:UIControlStateNormal];
5
Amit Battan

Oui, vous pouvez afficher une image et un titre dans le même bouton, à condition qu'ils soient tous les deux suffisamment petits pour tenir. La partie difficile vient quand vous avez besoin de placement.

Vous pouvez jouer avec les propriétés contentVerticalAlignment et contentHorizontalAlignment de la UIButton (hérité de UIControl).

Vous pouvez également utiliser les propriétés titleEdgeInsets et imageEdgeInsets pour déplacer le titre et l'image de l'emplacement qu'ils obtiennent en fonction des propriétés d'alignement.

Si vous souhaitez un placement très précis ou personnalisé, je suggère de remplacer les méthodes titleRectForContentRect: et imageRectForContentRect: de la variable UIButton. Celles-ci vous permettent de définir les cadres de votre titre et de votre image et sont appelées chaque fois que le bouton doit être disposé. Un avertissement, si vous souhaitez référencer self.titleLabel à l'intérieur de titleRectForContentRect:, assurez-vous que self.currentTitle est défini en premier. J'avais une mauvaise erreur d'accès, la méthode est peut-être appelée lors de la première initialisation de titleLabel.

4
ohnit

Dans Swift 3 

let button = UIButton()

//make sure the image (jpg, png) you are placing in the button
//is about the right size or it will Push the label off the button

//add image
let image = UIImage(named:"my_button_image")
button.setImage(image, for: .normal)
button.imageView?.contentMode = .scaleAspectFit
button.imageEdgeInsets = UIEdgeInsets(top:0, left:-30, bottom:0, right:0) //adjust these to have fit right

//add title
button.setTitle("Fan", for: .normal)
button.titleEdgeInsets = UIEdgeInsets(top:0, left:10, bottom:0, right:0) //adjust insets to have fit how you want

//add button to your view - like in viewDidLoad or your own custom view setup
addSubview(button)

N'oubliez pas de définir les ancres si vous le faites par programme pour qu'il apparaisse/les attachez à votre référence de bouton dans Interface Builder si vous utilisez un storyboard

3
ColossalChris

Si vous souhaitez mieux contrôler la mise en page, créez une sous-classe de UIControl et organisez les vues souhaitées (UILabel, UIImageView) dans un fichier xib. Ensuite, vous pouvez utiliser Autolayout régulièrement sans avoir à trier UIEdgeInsets.

1
orkoden

L’utilisation de sous-vues de boutons a fonctionné pour moi dans Swift 4. 

  • Créez votre bouton
  • Définir une image pour le bouton
  • Créer une étiquette pour le texte
  • Ajouter l'étiquette en tant que sous-vue de votre bouton

  • Contraindre l'étiquette dans le bouton

           let imageAndTextButton : UIButton = {
            let button = UIButton(frame: .zero)
            button.tintColor = .clear
            button.setImage(#imageLiteral(resourceName: "buttonImage"), for: .normal)
            button.imageView?.contentMode = .scaleToFill
            button.translatesAutoresizingMaskIntoConstraints = false
            return button
        }()
        let textForButtonLabel = UILabel(frame: .zero)
        textForButtonLabel.translatesAutoresizingMaskIntoConstraints = false
        textForButtonLabel.attributedText = NSAttributedString(string: "Text For Button", attributes: buttonTextAttributes)
        textForButtonLabel.textAlignment = .center
        textForButtonLabel.backgroundColor = .clear
        imageAndTextButton.addSubview(textForButtonLabel)
        imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerX, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerX, multiplier: 1.0, constant: 0))
        imageAndTextButton.addConstraint(NSLayoutConstraint(item: textForButtonLabel, attribute: .centerY, relatedBy: .equal, toItem: imageAndTextButton, attribute: .centerY, multiplier: 1.0, constant: 0))
0
Femi Loki

Essayez ceci, c'est un travail pour moi,

Nous devons définir la valeur UIEdgeInsets base sur la taille et les exigences de nos boutons.

[self.testButton setTitle: @"myTitle" forState: UIControlStateNormal];
UIImage *iconImage = [UIImage imageWithIcon:@"fa-dot-circle-o" backgroundColor:[UIColor clearColor] iconColor:[UIColor whiteColor] fontSize:10.0f];

//UIEdgeInsets insets = {top, left, bottom, right};

[self.testButton setImageEdgeInsets:UIEdgeInsetsMake(3.0, 0.0, 3.0, 2.0)];
[self.testButton setTitleEdgeInsets:UIEdgeInsetsMake(3.0, 1.0, 3.0, 0.0)];
[self.testButton setImage:iconImage forState:UIControlStateNormal];
[self.testButton addTarget:self action:@selector(testButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.testButton];

Espérons que cela aidera pour quelqu'un.

0
Jaywant Khedkar