ios - ¿Cómo agregar insignias en el elemento del botón UIB?

uinavigationbar uibarbuttonitem

Question

Hola amigos soy nuevo en el desarrollo de iphone. Tengo problemas con agregar valores de la insignia en el elemento UIBarbutton en el lado derecho. Lo he intentado pero no puedo resolver este problema. Alguien puede ayudarme.

¡Gracias por adelantado!

Answer 1

Actualizado para Swift 3:

utilice el código simple debajo para agregar la insignia en 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()

// Nota: aumente su insignia según la notificación recibida. Debe escribir su código de acuerdo con su lógica definida, es decir, cómo mantener ese número de cuenta de insignia en la base de datos.

¡Disfruta ..! 

Answer 2

¡Es simple y la mejor manera!

MKNumberBadgeView *numberBadge = [[MKNumberBadgeView alloc] initWithFrame:CGRectMake(230, -51, 40, 40)];
numberBadge.value = 5;

self.navigationController.navigationBar.layer.zPosition = -1;
[self.view addSubview:numberBadge];

Answer 3

Después de buscar demasiadas soluciones, encontré esta mejor solución para Objective-C

Ir a siguiente enlace y descargar dos archivos "UIBarButtonItem + Badge.h" y "UIBarButtonItem + Badge.m" y agregar a su proyecto:

https://github.com/mikeMTOL/UIBarButtonItem-Badge

Luego importa en tu clase:

#import "UIBarButtonItem+Badge.h"

Y escriba la siguiente línea para agregar una insignia:

self.navigationItem.rightBarButtonItem.badgeValue = @"1"; //your value 

Espero que funcione!

Answer 4

Extensión para agregar un UIActivityIndicatorView sin reemplazar el UIBarButtonItem.

extensión 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
}

}

Answer 5

Finalmente encontré la manera de agregar insignias en el ítem UIBarbutton. Busqué mucho pero no encontré la respuesta correcta. Así que creé UIButton y lo agregué como una vista personalizada en el elemento de la barra derecha. Agregar agregar MKNumberBadgeView para mostrar el número de la insignia. A continuación he agregado mi código para usted.

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

Gracias.

Answer 6

Hice algo similar a MaxMa, pero seguí adelante y agregué la insignia directamente al auto.navigationController.navigationBar.

MKNumberBadgeView *numberBadge = [[MKNumberBadgeView alloc] initWithFrame:CGRectMake(35, 0, 40, 40)];
numberBadge.value = 1;

[self.navigationController.navigationBar addSubview:numberBadge];

Solo asegúrate de eliminarlo de la subvista durante viewWillDisappear y agrégalo nuevamente durante viewDidAppear. Todavía parece un poco hacky, pero estoy más cómodo con este truco y luego cambio el orden z de la barra de navegación.

Para eliminarlo durante viewWillDisappear

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    [numberBadge removeFromSuperview]; 
}

Answer 7

Phyzalis tiene una buena respuesta, aquí hay una versión categorizada de su solución:

UIBarButtonItem+Badge

Así es como puedes usarlo:

// 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";

Answer 8

Sé que esta publicación es bastante antigua, pero con iOS7, la apariencia de MKNumberBadgeView no coincide realmente con el diseño de la insignia del elemento de la barra de pestañas. He encontrado este otro componente que hereda UIBarButtonItem y hace el trabajo muy bien:

https://github.com/TanguyAladenise/BBBadgeBarButtonItem

Espero que esto pueda ayudar a otros desarrolladores iOS7 como yo

Answer 9

Sé que esto ya se ha resuelto, pero pensé que podría agregar lo que he descubierto a esta respuesta para completar.

También puede agregar MKNumberBadgeView directamente a la vista para UIBarButtonItem . Usando Monotouch (C #), así es como obtienes la vista para 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> 

Estoy seguro de que es fácil convertir esto en Obj-C. También necesitarás jugar con el Marco de la insignia para que aparezca en el lugar correcto.

De esta forma, no tendrá que quitar / agregar la vista desde la barra de navegación.