iphone - ¿Es posible cambiar el color de la insignia de UITabBarItem

uitabbarcontroller swift 4

Question

Quiero cambiar el color de fondo de la insignia UITabBarItem pero no puedo encontrar ningún recurso sobre cómo hacerlo.

Answer 1

Cambiar el color de la insignia ahora se admite de forma nativa en iOS 10 y versiones posteriores utilizando la propiedad badgeColor dentro de su UITabBarItem . Consulte los https://developer.apple.com/reference/uikit/uitabbaritem/1648567-badgecolor para obtener más información sobre la propiedad.

Ejemplo:

• Swift 3: myTab.badgeColor = UIColor.blue
• Objective-C: [myTab setBadgeColor:[UIColor blueColor]];

Answer 2

Debe especificar el elemento de la pestaña en el índice para cambiar el color de la placa, #available en iOS 10,

    if #available(iOS 10.0, *) 
    {
        self.kAppTabBarController.tabBar.items![1].badgeColor = YOUR_COLOR
    }

Answer 3

Echa un vistazo aquí @ UITabbarItem-CustomBadge .

Una demostración completa está siguiendo

solo se necesitan dos líneas de código, si desea utilizar la implementación predeterminada

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  //supplying the animation parameter
  [UITabBarItem setDefaultAnimationProvider:[[DefaultTabbarBadgeAnimation alloc] init]];
  [UITabBarItem setDefaultConfigurationProvider:[[DefaultSystemLikeBadgeConfiguration alloc] init]];

  //rest of your code goes following...

  return YES;
}

Answer 4

Escribí este código para mi aplicación, pero solo lo probé en iOS 7.

for (UIView* tabBarButton in self.tabBar.subviews) {
    for (UIView* badgeView in tabBarButton.subviews) {
        NSString* className = NSStringFromClass([badgeView class]);

        // looking for _UIBadgeView
        if ([className rangeOfString:@"BadgeView"].location != NSNotFound) {
            for (UIView* badgeSubview in badgeView.subviews) {
                NSString* className = NSStringFromClass([badgeSubview class]);

                // looking for _UIBadgeBackground
                if ([className rangeOfString:@"BadgeBackground"].location != NSNotFound) {
                    @try {
                        [badgeSubview setValue:[UIImage imageNamed:@"YourCustomImage.png"] forKey:@"image"];
                    }
                    @catch (NSException *exception) {}
                }

                if ([badgeSubview isKindOfClass:[UILabel class]]) {
                    ((UILabel *)badgeSubview).textColor = [UIColor greenColor];
                }
            }
        }
    }
}

Solo puedes actualizar el fondo de la insignia con una imagen, no con un color. También he expuesto la etiqueta de la insignia si querías actualizarla de alguna manera.

Es importante tener en cuenta que este código debe llamarse después de configurar tabBarItem.badgeValue !

EDITAR: 4/14/14

El código anterior funcionará en iOS 7 cuando se le llame a cualquier lugar. Para que funcione en iOS 7.1, -viewWillLayoutSubviews en los controladores de vista -viewWillLayoutSubviews .

EDITAR: 22/12/14

Aquí hay un fragmento actualizado que estoy usando actualmente. Pongo el código en una extensión de categoría por simplicidad.

- (void)badgeViews:(void (^)(UIView* badgeView, UILabel* badgeLabel, UIView* badgeBackground))block {
    if (block) {
        for (UIView* tabBarButton in self.subviews) {
            for (UIView* badgeView in tabBarButton.subviews) {
                NSString* className = NSStringFromClass([badgeView class]);

                if ([className rangeOfString:@"BadgeView"].location != NSNotFound) {
                    UILabel* badgeLabel;
                    UIView* badgeBackground;

                    for (UIView* badgeSubview in badgeView.subviews) {
                        NSString* className = NSStringFromClass([badgeSubview class]);

                        if ([badgeSubview isKindOfClass:[UILabel class]]) {
                            badgeLabel = (UILabel *)badgeSubview;

                        } else if ([className rangeOfString:@"BadgeBackground"].location != NSNotFound) {
                            badgeBackground = badgeSubview;
                        }
                    }

                    block(badgeView, badgeLabel, badgeBackground);
                }
            }
        }
    }
}

Entonces, cuando estés listo para llamarlo, se verá así.

[self.tabBar badgeViews:^(UIView *badgeView, UILabel *badgeLabel, UIView *badgeBackground) {

}];

EDITAR: 16/11/15

Se me ha informado que algunas personas necesitan un poco más de claridad sobre lo que está sucediendo en este código. Los bucles for están buscando algunas vistas que no son de acceso público. Al verificar si el nombre de la clase de vistas contiene una parte del nombre esperado, se asegura de alcanzar la vista deseada sin que Apple apague las posibles señales de alerta. Una vez que se ha localizado todo, se ejecuta un bloque con fácil acceso a estas vistas.

Cabe destacar que existe la posibilidad de que este código deje de funcionar en una futura actualización de iOS. Por ejemplo, estas vistas internas podrían algún día adquirir diferentes nombres de clase. Sin embargo, las posibilidades de ello son prácticamente nulas, ya que incluso internamente Apple raramente refactoriza las clases de esta manera. Pero incluso si lo fueran, sería algo a lo largo del título de UITabBarBadgeView , que todavía alcanzaría el punto esperado en el código. Dado que iOS9 está bien y este código sigue funcionando como se esperaba, puede esperar que este problema nunca surja.

Answer 5

No, no puedes cambiar el color, pero puedes usar tus propias insignias. Agregue esta extensión en el alcance del archivo y podrá personalizar las insignias como desee. Simplemente llame a self.tabBarController!.setBadges([1,0,2]) en cualquiera de sus controladores de vista de raíz.

Para que quede claro, es para una barra de pestañas con tres elementos, con los valores de distintivo que van de izquierda a derecha.

extension UITabBarController {
    func setBadges(badgeValues:[Int]){

        var labelExistsForIndex = [Bool]()

        for value in badgeValues {
            labelExistsForIndex.append(false)
        }

        for view in self.tabBar.subviews {
            if view.isKindOfClass(PGTabBadge) {
                let badgeView = view as! PGTabBadge
                let index = badgeView.tag

                if badgeValues[index]==0 {
                    badgeView.removeFromSuperview()
                }

                labelExistsForIndex[index]=true
                badgeView.text = String(badgeValues[index])

            }
        }

        for var i=0;i<labelExistsForIndex.count;i++ {
            if labelExistsForIndex[i] == false {
                if badgeValues[i] > 0 {
                    addBadge(i, value: badgeValues[i], color:UIColor(red: 4/255, green: 110/255, blue: 188/255, alpha: 1), font: UIFont(name: "Helvetica-Light", size: 11)!)
                }
            }
        }


    }

    func addBadge(index:Int,value:Int, color:UIColor, font:UIFont){

        let itemPosition = CGFloat(index+1)
        let itemWidth:CGFloat = tabBar.frame.width / CGFloat(tabBar.items!.count)

        let bgColor = color

        let xOffset:CGFloat = 12
        let yOffset:CGFloat = -9

        var badgeView = PGTabBadge()
        badgeView.frame.size=CGSizeMake(17, 17)
        badgeView.center=CGPointMake((itemWidth * itemPosition)-(itemWidth/2)+xOffset, 20+yOffset)
        badgeView.layer.cornerRadius=badgeView.bounds.width/2
        badgeView.clipsToBounds=true
        badgeView.textColor=UIColor.whiteColor()
        badgeView.textAlignment = .Center
        badgeView.font = font
        badgeView.text = String(value)
        badgeView.backgroundColor = bgColor
        badgeView.tag=index
        tabBar.addSubview(badgeView)

    }
}

class PGTabBadge: UILabel {

}

Answer 6

Para las personas que usan Swift, logré mejorar la respuesta de TimWhiting para que la vista de credencial funcione en cualquier tamaño de pantalla y orientación .

 extension UITabBarController {

    func setBadges(badgeValues: [Int]) {

        for view in self.tabBar.subviews {
            if view is CustomTabBadge {
                view.removeFromSuperview()
            }
        }

        for index in 0...badgeValues.count-1 {
            if badgeValues[index] != 0 {
                addBadge(index, value: badgeValues[index], color:UIColor(paletteItem: .Accent), font: UIFont(name: Constants.ThemeApp.regularFontName, size: 11)!)
            }
        }
    }

    func addBadge(index: Int, value: Int, color: UIColor, font: UIFont) {
        let badgeView = CustomTabBadge()

        badgeView.clipsToBounds = true
        badgeView.textColor = UIColor.whiteColor()
        badgeView.textAlignment = .Center
        badgeView.font = font
        badgeView.text = String(value)
        badgeView.backgroundColor = color
        badgeView.tag = index
        tabBar.addSubview(badgeView)

        self.positionBadges()
    }

    override public func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        self.positionBadges()
    }

    // Positioning
    func positionBadges() {

        var tabbarButtons = self.tabBar.subviews.filter { (view: UIView) -> Bool in
            return view.userInteractionEnabled // only UITabBarButton are userInteractionEnabled
        }

        tabbarButtons = tabbarButtons.sort({ $0.frame.origin.x < $1.frame.origin.x })

        for view in self.tabBar.subviews {
            if view is CustomTabBadge {
                let badgeView = view as! CustomTabBadge
                self.positionBadge(badgeView, items:tabbarButtons, index: badgeView.tag)
            }
        }
    }

    func positionBadge(badgeView: UIView, items: [UIView], index: Int) {

        let itemView = items[index]
        let center = itemView.center

        let xOffset: CGFloat = 12
        let yOffset: CGFloat = -14
        badgeView.frame.size = CGSizeMake(17, 17)
        badgeView.center = CGPointMake(center.x + xOffset, center.y + yOffset)
        badgeView.layer.cornerRadius = badgeView.bounds.width/2
        tabBar.bringSubviewToFront(badgeView)
    }
}

class CustomTabBadge: UILabel {}

Answer 7

Parece que no. Sólo puede establecer el valor. De la insignia de documentación de Apple es:

El texto que se muestra en la esquina superior derecha del elemento con un óvalo rojo circundante.

Answer 8

SÍ, pero la única solución posible es crear una Barra de pestañas personalizada y crear su icono de distintivo de barra de pestañas personalizado. Encontrará muchos artículos / códigos para crear una barra de pestañas personalizada.

Answer 9

Tengo el mismo problema y lo resolví creando una pequeña categoría que reemplaza a BadgeView con una UILabel que puedes personalizar fácilmente.

https://github.com/enryold/UITabBarItem-CustomBadge/

Answer 10

UITabBarItem tiene esto disponible desde iOS 10.

var badgeColor: UIColor? { get set }

También está disponible a través de la apariencia.

if #available(iOS 10, *) {
   UITabBarItem.appearance().badgeColor = .green
}

documentos de referencia: https://developer.apple.com/reference/uikit/uitabbaritem/1648567-badgecolor

Answer 11

Swift 3 Aquí hay una versión actualizada de la respuesta de @Kirualex (que mejoró la respuesta de @TimWhiting) para Swift 3.

extension UITabBarController {

    func setBadges(badgeValues: [Int]) {

        for view in self.tabBar.subviews {
            if view is CustomTabBadge {
                view.removeFromSuperview()
            }
        }

        for index in 0...badgeValues.count-1 {
            if badgeValues[index] != 0 {
                addBadge(index: index, value: badgeValues[index], color: UIColor.blue, font: UIFont(name: "Helvetica-Light", size: 11)!)
            }
        }
    }

    func addBadge(index: Int, value: Int, color: UIColor, font: UIFont) {
        let badgeView = CustomTabBadge()

        badgeView.clipsToBounds = true
        badgeView.textColor = UIColor.white
        badgeView.textAlignment = .center
        badgeView.font = font
        badgeView.text = String(value)
        badgeView.backgroundColor = color
        badgeView.tag = index
        tabBar.addSubview(badgeView)

        self.positionBadges()
    }

    override open func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        self.positionBadges()
    }

    // Positioning
    func positionBadges() {

        var tabbarButtons = self.tabBar.subviews.filter { (view: UIView) -> Bool in
            return view.isUserInteractionEnabled // only UITabBarButton are userInteractionEnabled
        }

        tabbarButtons = tabbarButtons.sorted(by: { $0.frame.origin.x < $1.frame.origin.x })

        for view in self.tabBar.subviews {
            if view is CustomTabBadge {
                let badgeView = view as! CustomTabBadge
                self.positionBadge(badgeView: badgeView, items:tabbarButtons, index: badgeView.tag)
            }
        }
    }

    func positionBadge(badgeView: UIView, items: [UIView], index: Int) {

        let itemView = items[index]
        let center = itemView.center

        let xOffset: CGFloat = 12
        let yOffset: CGFloat = -14
        badgeView.frame.size = CGSize(width: 17, height: 17)
        badgeView.center = CGPoint(x: center.x + xOffset, y: center.y + yOffset)
        badgeView.layer.cornerRadius = badgeView.bounds.width/2
        tabBar.bringSubview(toFront: badgeView)
    }
}

class CustomTabBadge: UILabel {}

Answer 12

// change TabBar BadgeView background Color
-(void)changeTabBarBadgeViewBgColor:(UITabBar*)tabBar {
    for (UIView* tabBarButton in tabBar.subviews) {
        for (UIView* badgeView in tabBarButton.subviews) {
            NSString* className = NSStringFromClass([badgeView class]);

            // looking for _UIBadgeView
            if ([className rangeOfString:@"BadgeView"].location != NSNotFound) {
                for (UIView* badgeSubview in badgeView.subviews) {
                    NSString* className = NSStringFromClass([badgeSubview class]);

                    // looking for _UIBadgeBackground
                    if ([className rangeOfString:@"BadgeBackground"].location != NSNotFound) {
                        @try {
                            [badgeSubview setValue:nil forKey:@"image"];
                            [badgeSubview setBackgroundColor:[UIColor blueColor]];
                            badgeSubview.clipsToBounds = YES;
                            badgeSubview.layer.cornerRadius = badgeSubview.frame.size.height/2;
                        }
                        @catch (NSException *exception) {}
                    }

                    if ([badgeSubview isKindOfClass:[UILabel class]]) {
                        ((UILabel *)badgeSubview).textColor = [UIColor greenColor];
                    }
                }
            }
        }
    }
}