web-dev-qa-db-fra.com

iOS 7 UIBarButtonItem avec image et titre

J'essaie de comprendre comment puis-je obtenir quelque chose comme ceci:

enter image description here

Ceci est une barre d'outils et j'aimerais conserver le texte du titre du bouton sans avoir à créer l'image entière avec l'icône ET le texte. Comment puis-je ajouter l'icône à gauche de la UIBarButtonItem tout en conservant le texte défini avec:

UIBarButtonItem *customBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Button" style:UIBarButtonItemStyleBordered target:nil action:nil];

MODIFIER

C'est ce que j'ai réalisé avec le code suivant:

    UIButton *customButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [customButton setImage:[UIImage imageNamed:@"Test"] forState:UIControlStateNormal];
    [customButton setTitle:@"Button" forState:UIControlStateNormal];
    customButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, 0);
    [customButton sizeToFit];
    UIBarButtonItem *customBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:customButton];

enter image description here

Deux problèmes ici: le premier est la taille de la variable UIButton et le second est que, comme vous pouvez le voir dans le gif, le bouton ne s'anime pas correctement lorsque je tape à l'intérieur du bouton et quand je relâche le robinet. Des idées?

objective-cios7uibarbuttonitemuitoolbar
14
Fred Collins

Vous pouvez incorporer un UIButton en tant que vue personnalisée dans votre UIBarButtonItem. Vous pouvez créer votre UIButton comme vous le souhaitez, y compris avec une image et du texte, en utilisant -setImage:forState: et -setTitle:forState: .

UIButton* customButton = [UIButton buttonWithType:UIButtonTypeCustom];
[customButton setImage:[UIImage imageNamed:@"image"] forState:UIControlStateNormal];
[customButton setTitle:@"Button" forState:UIControlStateNormal];
[customButton sizeToFit];
UIBarButtonItem* customBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:customButton];
self.navigationItem.leftBarButtonItem = customBarButtonItem; // or self.navigationItem.rightBarButtonItem

Notez que pour ce faire, vous devez attacher vos méthodes IBAction à customButton et non à customBarButtonItem.

Pour plus d'informations, voir la documentation de initWithCustomView: .

Vous pouvez également faire tout cela dans le générateur d'interface en faisant simplement glisser un bouton UIB dans la fente du bouton de la barre de gauche/du bouton de la barre de droite sur une barre de navigation.

31
Greg

Je n’étais pas satisfait de toutes les solutions trouvées sur le dépassement de pile, car j’aime la façon dont UIBarButtonItenm convertit les images afin qu’elles soient affichées correctement et qu’elles puissent être modifiées avec la couleur de la teinte. J'ai donc découvert cette solution que je peux utiliser sans trop de code ... L'effet End est similaire à la barre d'outils de Facebook et à d'autres applications actuelles ...

enter image description here

Lorsque vous modifiez la couleur de la teinte de la vue contenue dans UIBArButtonItem, les couleurs de l'image et du titre changent en conséquence, vraiment cool, je n'ai pas du tout à créer d'images spéciales.

Ce code est appelé depuis chaque bouton comme ce bouton Compétition, et le bouton est également défini comme prise de référencement ... 

- (void)selectButton:(UIButton *)sender { 
    _competitionButton.superview.tintColor = [UIColor lightGrayColor];
    _usersButton.superview.tintColor = [UIColor lightGrayColor]; 
    _managementButton.superview.tintColor = [UIColor lightGrayColor];    
    sender.superview.tintColor = [UIColor whiteColor]; 
}

- (IBAction)onCompetitionButtonClick:(UIButton *)sender {
    [self selectButton:sender];
    [_scrollView scrollToPage:0 of:3];
}

Dans Button comme celui-ci intitulé Competition, il n'y a que le titre et dans le bouton barre il y a une image ... C'est comme ça que je l'ai configuré et ça marche, peut-être qu'il y a aussi d'autres possibilités.

4
Renetik

Alors j’ai réussi à faire ma solution par programme ... Certains utilisateurs ne se plaignent pas de le faire ... Alors, comment créer UTToolbar avec une image et un élément de sorte que vous puissiez changer la couleur de bouton par teinte et modifier magiquement l’image ainsi que le titre étiquette? Ma solution d’éditeur d’interface utilisateur fonctionne à coup sûr ... Ce code permet de clarifier les choses davantage et vous pouvez le faire par programme ...

- (void)loadToolbar {
    NSMutableArray *items = NSMutableArray.new;
    [items add:[UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil]];
    for (uint pageIndex = 0; pageIndex < _controllers.count; ++pageIndex) {
        UIView *itemView = [UIView.alloc initWithFrame:CGRectMake(0, 0, 100, 44)];
        itemView.backgroundColor = [UIColor clearColor];
        itemView.tintColor = [UIColor orangeColor];
        [itemView addSubview:[self createToolbarForItemView:pageIndex]];
        [itemView addSubview:[self createButtonForItemView:pageIndex]];
        UIBarButtonItem *item = [UIBarButtonItem.alloc initWithCustomView:itemView];
        item.style = UIBarButtonItemStylePlain;
        [items add:item];
        [items add:[UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil]];
    }
    [_toolbar setItems:items];
}

- (UIButton *)createButtonForItemView:(uint)pageIndex {
    UIButton *itemButton = [UIButton buttonWithType:UIButtonTypeSystem];
    itemButton.frame = CGRectMake(0, 0, 100, 44);
    itemButton.titleLabel.font = [UIFont systemFontOfSize:11];
    itemButton.contentEdgeInsets = UIEdgeInsetsMake(30, 0, 0, 0);
    itemButton.text = [_controllers[pageIndex] tabTitle];
    itemButton.touchUp = ^(UIButton *sender) {
        for (UIButton *button in _buttons) button.superview.tintColor = UI.toolBarInactiveButtonTextColor;
        sender.superview.tintColor = UI.toolBarActiveButtonTextColor;
        [self showPage:pageIndex];
    };
    [_buttons add:itemButton];
    return itemButton;
}

- (UIToolbar *)createToolbarForItemView:(uint)pageIndex {
    UIToolbar *itemToolbar = [UIToolbar.alloc initWithFrame:CGRectMake(0, 0, 100, 44)];
    itemToolbar.tintColor = nil;
    itemToolbar.barStyle = _toolbar.barStyle;
    itemToolbar.translucent = _toolbar.translucent;
    UIBarButtonItem *imageItem = [_controllers[pageIndex] tabImageItem];
    imageItem.style = UIBarButtonItemStylePlain;
    imageItem.tintColor = nil;
    imageItem.imageInsets = UIEdgeInsetsMake(-10, 0, 0, 0);
    itemToolbar.items = @[
            [UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil],
            imageItem,
            [UIBarButtonItem createWithItem:UIBarButtonSystemItemFlexibleSpace :nil :nil]
    ];
    return itemToolbar;
}
1
Renetik

J'ai résolu ce problème comme suit:

[Button **setTitleColor**:[UIColor colorWithRed:129/255.0f green:124/255.0f blue:110/255.0f alpha:1.0f] forState:**UIControlStateHighlighted**];
0
User123456