web-dev-qa-db-fra.com

Comment puis-je avoir un UIBarButtonItem avec une image et un texte?

Lorsque j'essaie d'utiliser une image pour un UIBarButtonItem, le texte n'est pas affiché. Est-il possible d'afficher le texte et l'image?

objective-ccocoa-touchuibarbuttonitem
36
node ninja

Vous pouvez initialiser UIBarButtonItem avec un affichage personnalisé contenant à la fois une image et du texte. Voici un exemple qui utilise un UIButton.

UIImage *chatImage = [UIImage imageNamed:@"08-chat.png"];

UIButton *chatButton = [UIButton buttonWithType:UIButtonTypeCustom];
[chatButton setBackgroundImage:chatImage forState:UIControlStateNormal];
[chatButton setTitle:@"Chat" forState:UIControlStateNormal];
chatButton.frame = (CGRect) {
    .size.width = 100,
    .size.height = 30,
};

UIBarButtonItem *barButton= [[[UIBarButtonItem alloc] initWithCustomView:chatButton] autorelease];
self.toolbar.items = [NSArray arrayWithObject:barButton];
40
Kris Markel

Je suggère un moyen de faire cela en utilisant Storyboard:

  1. Glissez et déposez dans la barre d'outils UIView habituelle. Il sera automatiquement encapsulé dans un élément du bouton de la barre. Ajustez la largeur de la vue dans "Inspecteur de taille". Changer la couleur de fond de la vue pour effacer la couleur.

 enter image description here

  1. Placez UIButton et UILabel dans une vue. Vous pouvez utiliser des contraintes pour ajuster leurs positions. Aussi, vous pouvez les mettre en dehors d'une Vue, par exemple, légèrement plus haut ou moins (comme sur ma photo). Mettez les images par défaut et en surbrillance pour UIButton. 

  2. Copy Bar Button Item et ajustez les autres boutons. Ajouter des espaces flexibles.

  3. Créer des points de vente.

  4. Terminé :). Lorsque vous exécutez l'application, vous obtenez la barre d'outils comme ceci:

 enter image description here

P.S. Ici vous pouvez lire comment créer une sous-classe UIToolbar en utilisant .xib 

11
Igor
UIButton *button =  [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:@"image.png"] forState:UIControlStateNormal];
[button addTarget:target action:@selector(buttonAction:)forControlEvents:UIControlEventTouchUpInside];
[button setFrame:CGRectMake(0, 0, 53, 31)];
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(3, 5, 50, 20)];
[label setFont:[UIFont fontWithName:@"Arial-BoldMT" size:13]];
[label setText:title];
label.textAlignment = UITextAlignmentCenter;
[label setTextColor:[UIColor whiteColor]];
[label setBackgroundColor:[UIColor clearColor]];
[button addSubview:label];
UIBarButtonItem *barButton = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = barButton;
7
Sandy Patel

La réponse de Kris Markel est un bon début (seulement <iOS7), mais si vous utilisez la teinte, cela fonctionnera pour l'image et l'état en surbrillance du bouton.

J'ai créé une catégorie qui créera un UIBarButtonItem (leftBarButtonItem) qui ressemble et se comporte comme un bouton arrière iOS7 normal. Consultez: https://github.com/Zero3nna/UIBarButtonItem-DefaultBackButton

2
zero3nna

Swift Update pour UIBarButtonItem avec une vue personnalisée contenant à la fois une image et du texte.

var chatImage: UIImage  = UIImage(named: "YourImageName")
var rightButton : UIButton = UIButton(type: UIButtonType.custom)
rightButton.setBackgroundImage(rightImage, for: .normal)
rightButton.setTitle(title, for: .normal)
rightButton.frame.size = CGSize(width: 100, height: 30)

let menuUIBarButtonItem = UIBarButtonItem(customView: rightButton)
1
GayashanK

Swift 4.2 avec cible 

extension UIBarButtonItem {
    convenience init(image :UIImage, title :String, target: Any?, action: Selector?) {
        let button = UIButton(type: .custom)
        button.setImage(image, for: .normal)
        button.setTitle(title, for: .normal)
        button.frame = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)

        if let target = target, let action = action {
            button.addTarget(target, action: action, for: .touchUpInside)
        }

        self.init(customView: button)
    }
}
0
abbood