Comment ajouter un badge sur UIBarbuttonitem?
Salut les amis, je suis nouveau dans le développement de l'iphone. Suis en difficulté avec l'ajout de valeurs de badge sur UIBarbuttonitem sur le côté droit. J'ai essayé mais je ne peux pas résoudre ce problème. Quelqu'un peut-il m'aider.
Merci d'avance!
Enfin, j'ai trouvé le moyen d'ajouter des badges sur l'article UIBarbutton. J'ai beaucoup cherché mais je n'ai pas trouvé la bonne réponse. J'ai donc créé UIButton et l'ajoute en tant que vue personnalisée sur l'élément de barre de droite. Ajoutez ajoutez le MKNumberBadgeView pour afficher le numéro de badge. Ci-dessous, j'ai ajouté mon code pour vous.
// Initialize NKNumberBadgeView...
MKNumberBadgeView *number = [[MKNumberBadgeView alloc] initWithFrame:CGRectMake(60, 00, 30,20)];
number.value = 10;
// Allocate UIButton
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(0, 0, 70, 30);
btn.layer.cornerRadius = 8;
[btn setTitle:@"Button" forState:UIControlStateNormal];
[btn addTarget:self action:nil forControlEvents:UIControlEventTouchUpInside];
//[btn setBackgroundColor:[UIColor blueColor]];
[btn setBackgroundColor:[UIColor colorWithRed:0.0 green:0.0 blue:0.1 alpha:0.2]];
btn.font = [UIFont systemFontOfSize:13];
//[btn setFont:[UIFont systemFontOfSize:13]];
[btn addSubview:number]; //Add NKNumberBadgeView as a subview on UIButton
// Initialize UIBarbuttonitem...
UIBarButtonItem *proe = [[UIBarButtonItem alloc] initWithCustomView:btn];
self.navigationItem.leftBarButtonItem = proe;
Merci.
Je sais que ce message est assez ancien, mais avec iOS7, l'apparence de MKNumberBadgeView ne correspond pas vraiment à la conception du badge d'élément de la barre d'onglets. J'ai trouvé cet autre composant qui hérite de UIBarButtonItem et je fais très bien le travail:
https://github.com/TanguyAladenise/BBBadgeBarButtonItem
J'espère que cela pourra aider d'autres développeurs iOS7 comme moi
phyzalis a une bonne réponse, il y a une version catégorisée de sa solution ici:
Voici comment vous pouvez l'utiliser:
// Build your regular UIBarButtonItem with Custom View
UIImage *image = [UIImage imageNamed:@"someImage"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0,0,image.size.width, image.size.height);
[button addTarget:self action:@selector(buttonPress:) forControlEvents:UIControlEventTouchDown];
[button setBackgroundImage:image forState:UIControlStateNormal];
// Make BarButton Item
UIBarButtonItem *navLeftButton = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = navLeftButton;
// this is the key entry to change the badgeValue
self.navigationItem.leftBarButtonItem.badgeValue = @"1";
J'ai fait quelque chose de similaire à MaxMa, mais je suis juste allé de l'avant et j'ai ajouté le badge directement à self.navigationController.navigationBar.
MKNumberBadgeView *numberBadge = [[MKNumberBadgeView alloc] initWithFrame:CGRectMake(35, 0, 40, 40)];
numberBadge.value = 1;
[self.navigationController.navigationBar addSubview:numberBadge];
Assurez-vous simplement de le supprimer de la sous-vue pendant viewWillDisappear et de le rajouter pendant viewDidAppear. Cela semble toujours un peu hacky, mais je suis plus à l'aise avec ce hack, puis en changeant l'ordre de navigation de la barre z.
Pour le supprimer pendant viewWillDisappear
- (void)viewWillDisappear:(BOOL)animated
{
[super viewWillDisappear:animated];
[numberBadge removeFromSuperview];
}
C'est simple et le meilleur moyen!
MKNumberBadgeView *numberBadge = [[MKNumberBadgeView alloc] initWithFrame:CGRectMake(230, -51, 40, 40)];
numberBadge.value = 5;
self.navigationController.navigationBar.layer.zPosition = -1;
[self.view addSubview:numberBadge];
Mis à jour pour Swift 3:
utilisez le code simple ci-dessous pour ajouter le badge sur UIBarButtonItem;
// Variable Declartion
var badgeCount = Int()
// Instance Method
func setUpBadgeCountAndBarButton() {
// badge label
let label = UILabel(frame: CGRect(x: 10, y: -05, width: 25, height: 25))
label.layer.borderColor = UIColor.clear.cgColor
label.layer.borderWidth = 2
label.layer.cornerRadius = label.bounds.size.height / 2
label.textAlignment = .center
label.layer.masksToBounds = true
label.textColor = .white
label.font = label.font.withSize(12)
label.backgroundColor = .red
label.text = "\(self.badgeCount)"
// button
let rightButton = UIButton(frame: CGRect(x: 0, y: 0, width: 35, height: 35))
rightButton.setBackgroundImage(UIImage(named: "notification_dash"), for: .normal)
rightButton.addTarget(self, action: #selector(notificationBarButtonClick), for: .touchUpInside)
rightButton.addSubview(label)
// Bar button item
let rightBarButtomItem = UIBarButtonItem(customView: rightButton)
navigationItem.rightBarButtonItem = rightBarButtomItem
}
// Call To Method
self.badgeCount = 11
self.setUpBadgeCountAndBarButton()
// Remarque: augmentez votre badge conformément à la notification que vous avez reçue. Vous devez écrire votre code selon votre logique, c'est-à-dire comment conserver ce numéro de nombre de badges dans la base de données.
Profitez ..!
Je sais que cela a déjà été résolu, mais j'ai pensé que je pourrais ajouter ce que j'ai découvert à cette réponse par souci d'exhaustivité.
Vous pouvez également simplement ajouter MKNumberBadgeView directement à la vue pour le UIBarButtonItem. En utilisant Monotouch (C #), voici comment vous obtenez la vue pour le UIBarButtonItem
//barbutton is some UIBarButtonItem. Make sure to check for view. In
//ViewDidLoad(), the view for the barbutton might not exist yet.
Selector sel = new Selector("view");
var handle = Messaging.intptr_objc_msgSend(barbutton.Handle, sel.Handle);
var view = Runtime.GetNSObject(handle) as UIView;
var mkBadge = ... //the badge
view.Add(badge);
view.Layer.ZPosition = <some large number>
Je suis sûr qu'il est facile de le convertir en Obj-C. Vous devrez également jouer avec le cadre pour que le badge apparaisse au bon endroit.
De cette façon, vous n'aurez pas à supprimer/ajouter la vue de la barre de navigation.
Voici une simple solution Swift 4 pour cela (avec une certaine personnalisation) https://github.com/Syngmaster/BadgedBarButtonItem
Faites simplement glisser et déposez la classe dans votre projet et vous pouvez l'utiliser comme ça:
class ViewController: UIViewController {
let btn = BadgedButtonItem(with: UIImage(named: "your_image"))
override func viewDidLoad() {
super.viewDidLoad()
btn.badgeTextColor = .black
btn.badgeTintColor = .yellow
btn.position = .right
btn.hasBorder = true
btn.borderColor = .red
btn.badgeSize = .medium
btn.badgeAnimation = true
self.navigationItem.rightBarButtonItem = btn
btn.tapAction = {
self.btn.setBadge(with: 4)
}
}
}
Après avoir cherché trop de solutions, j'ai trouvé cette meilleure solution pour Objective-C
Aller au lien suivant et télécharger deux fichiers "UIBarButtonItem + Badge.h" et "UIBarButtonItem + Badge.m" et ajoutez à votre projet:
https://github.com/mikeMTOL/UIBarButtonItem-Badge
Importez ensuite dans votre classe:
#import "UIBarButtonItem+Badge.h"
Et notez la ligne suivante pour ajouter un badge:
self.navigationItem.rightBarButtonItem.badgeValue = @"1"; //your value
J'espère que cela fonctionnera !!!
Extension pour ajouter un UIActivityIndicatorView sans remplacer le UIBarButtonItem.
extension UIBarButtonItem {
func startLoading() {
guard let view = self.value(forKey: "view") as? UIView else { return }
let loading = UIActivityIndicatorView(activityIndicatorStyle: .gray)
loading.frame = view.bounds
loading.startAnimating()
view.addSubview(loading)
view.bringSubview(toFront: loading)
let buttonView = view.subviews.first
buttonView?.alpha = 0.1
}
func stopLoading() {
guard let view = self.value(forKey: "view") as? UIView else { return }
let loading = view.subviews.filter({ $0 is UIActivityIndicatorView }).first
loading?.removeFromSuperview()
let buttonView = view.subviews.first
buttonView?.alpha = 1.0
}
}