4

I have a problem in my App. I set a badge value at one of the tabs in the UITabBar. The Badge value is correctly red and the circle around the badge value is correctly in white. The problem is, that the color of the text is gray (160, 160, 160). It is the same color like the normal state tabbaritem text is, but I set this color nowhere in the app code and I do not know where this color come from. I searched for that issue in the whole net since weeks but I cannot find any solution. The only answer I found everywhere is, that it is not possible to change the color of the text of the badge value. But if it is not possible, why is it changed in my app? I hope, that somebody can help me with that issue...


Edit 02.11.2012 - Code

Creation of TabBarController:

#import "ExtendedTabBarController.h"
#import "configuration.h"

@implementation ExtendedTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];
    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor colorWithRed:207.0/255.0 green:70.0/255.0 blue:61.0/255.0 alpha:1], UITextAttributeTextColor, [UIFont fontWithName:@"KievitPro-Regular" size:10.0], UITextAttributeFont, nil] forState:UIControlStateSelected];

    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1], UITextAttributeTextColor, [UIFont fontWithName:@"KievitPro-Regular" size:10.0], UITextAttributeFont, nil] forState:UIControlStateNormal];

    [self.tabBar sizeToFit];

    UIView *tabbarBackgroundColorView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0, self.view.bounds.size.width, 49)];
    [tabbarBackgroundColorView setBackgroundColor:[UIColor colorWithRed:233.0/255.0 green:233.0/255.0 blue:233.0/255.0 alpha:1]];
    [self.tabBar insertSubview:tabbarBackgroundColorView atIndex:0];
}

- (void)viewDidUnload {
    [super viewDidUnload];
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
}


- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return UIInterfaceOrientationIsPortrait(interfaceOrientation); // only portrait orientation

}

/**
 *  orientation for iOS6
 **/
-(NSUInteger)supportedInterfaceOrientations{
    return UIInterfaceOrientationMaskPortrait;
}

@end

Call in AppDelegate:

ExtendedTabBarController *tabBarController = [[ExtendedTabBarController alloc] init];
[self setTabBarController:tabBarController];
[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"menu_bg"]];

// code for initialize View- and NavigationControllers...

self.tabBarController.viewControllers = @[highlightsNavigationController, categoryNavigationController, searchNavigationController, favoritesNavigationController, imprintNavigationController];

self.window.rootViewController = self.tabBarController;

[[UITabBar appearance] setSelectionIndicatorImage:[[UIImage alloc] init]];

Set the badge value:

int viewCount = 0;
NSUserDefaults * defs = [NSUserDefaults standardUserDefaults];
NSDictionary * dict = [defs dictionaryRepresentation];
for (id key in dict) {
    if([key rangeOfString:@"_highlighted"].location != NSNotFound && [[[dict objectForKey:key] objectAtIndex:0] isEqualToString:@"YES"]) {
        viewCount++;
    }
}
UITabBarItem *tbi = (UITabBarItem *)[self.tabBarController.tabBar.items objectAtIndex:3];
if(viewCount <= 0) {
    tbi.badgeValue = nil;
} else {
    tbi.badgeValue = nil;
    tbi.badgeValue = [NSString stringWithFormat:@"%d", viewCount];
}

Code for overwritten UILabel:

// -- file: UILabel+VerticalAlign.h
#pragma mark VerticalAlign
@interface UILabel (VerticalAlign)
- (void)alignTop;
- (void)alignBottom;
- (void)awakeFromNib;
-(id)initWithFrame:(CGRect)frame;
@end


#import "UILabel+VerticalAlign.h"

// -- file: UILabel+VerticalAlign.m
@implementation UILabel (VerticalAlign)
- (void)alignTop {
    CGSize fontSize = [self.text sizeWithFont:self.font];
    double finalHeight = fontSize.height * self.numberOfLines;
    double finalWidth = self.frame.size.width;    //expected width of label
    CGSize theStringSize = [self.text sizeWithFont:self.font constrainedToSize:CGSizeMake(finalWidth, finalHeight) lineBreakMode:self.lineBreakMode];
    int newLinesToPad = (finalHeight  - theStringSize.height) / fontSize.height;
    for(int i=0; i<newLinesToPad; i++)
        self.text = [self.text stringByAppendingString:@"\n "];
}

- (void)alignBottom {
    CGSize fontSize = [self.text sizeWithFont:self.font];
    double finalHeight = fontSize.height * self.numberOfLines;
    double finalWidth = self.frame.size.width;    //expected width of label
    CGSize theStringSize = [self.text sizeWithFont:self.font constrainedToSize:CGSizeMake(finalWidth, finalHeight) lineBreakMode:self.lineBreakMode];
    int newLinesToPad = (finalHeight  - theStringSize.height) / fontSize.height;
    for(int i=0; i<newLinesToPad; i++)
        self.text = [NSString stringWithFormat:@" \n%@",self.text];
}
- (void)awakeFromNib
{
    [super awakeFromNib];
    [self setFont:[UIFont fontWithName:@"KievitPro-Regular" size:12.0]];
}

-(id)initWithFrame:(CGRect)frame
{
    id result = [super initWithFrame:frame];
    if (result) {
        [self setFont:[UIFont fontWithName:@"KievitPro-Regular" size:12.0]];
    }
    return result;
}

@end
  • Do you have a screenshot? Use Cmd+Shift+4 to take a snap, and add it to your question. Thanks – WDUK Oct 30 '12 at 17:55
  • Thank you. Not sure why this is occurring. Could you share how you're creating your UITabBar to make it look like it does, maybe something is missing? – WDUK Oct 31 '12 at 18:10
  • I've added the code snippets how I create the TabBarController. It tabBar itself is automatically initialized by the TabBarController... – Carsten Fröhlich Nov 02 '12 at 15:54
  • I created a new "tabbed application" project and pasted as much as I could of your code into it. Sorry, my badge text turns out white, entirely normal. I can't make it look like yours. So I guess that your problem is not in the code that you have posted. – emrys57 Dec 15 '12 at 13:28
  • I found out now, that the reason for the gray text color is the overwritten UILabel, but I do not understand, why... I overwrite it to have vertical-align. I added the code to the main post. – Carsten Fröhlich Dec 17 '12 at 13:15

2 Answers2

2

I found a solution for my problem on my own:

I must remove the following lines from the overwritten UILabel:

- (void)awakeFromNib
{
    [super awakeFromNib];
    [self setFont:[UIFont fontWithName:@"KievitPro-Regular" size:12.0]];
}

-(id)initWithFrame:(CGRect)frame
{
    id result = [super initWithFrame:frame];
    if (result) {
        [self setFont:[UIFont fontWithName:@"KievitPro-Regular" size:12.0]];
    }
    return result;
}

Maybe someone can explain me, why this lines change the text color of the badge value, before we can close this post?

  • Odd. I am not sure why that would change the color? Glad you got it to work though. – Josiah Dec 17 '12 at 13:53
  • I played a lot with the options I have to change the colors, but the badge label does not handle them. When I add these two methods, the text in the badge label is gray (160.0, 160.0, 160.0), when I remove them, the color is white. But it was not possible to give an explicit color to the text. I also tried to change the background color of the view of the TabBar, the text-color and the highlighted color of the tabbar items, without any other effect. So it seems, that is a not wanted side effect. I think, this question can be closed as answered, if no one have an idea, how this happens. – Carsten Fröhlich Dec 18 '12 at 09:23
  • The only thing I can think of is the font here. Since these two methods do not set font color, perhaps KievitPro-Regular is gray by default. I'm not sure. – Josiah Dec 18 '12 at 13:19
  • 1
    Just curious but does it still happen if you do not insert the view into the UITabBar that gives it a custom color? Have you tried using the [appearance](http://developer.apple.com/library/ios/#documentation/uikit/reference/UIAppearance_Protocol/Reference/Reference.html#//apple_ref/occ/intf/UIAppearance) property to customize your UI elements instead? – robhasacamera Dec 18 '12 at 13:53
  • The default font color of KivitPro cannot be the reason, because I also test this behaviour with only include this methods without overwriting the font with same result... – Carsten Fröhlich Dec 19 '12 at 12:12
0

Instead of setting the default UILabel font using a category, use the UILabel's appearance method to set the font:

[[UILabel appearance] setFont:[UIFont fontWithName:@"KievitPro-Regular" size:12.0]];

When I tested this the text for the badge appeared as the normal white color.

robhasacamera
  • 2,967
  • 2
  • 28
  • 41
  • won't that make *all* UILabels in the whole app use a 12 pixel high font? – Ben Clayton Dec 18 '12 at 15:10
  • @BenClayton It does change the font size for all UILabels in the app. However, the OP's method of creating a category to override the font had the same side effect. I also looked and could not find a way to change the font for all UILabels without changing the font size as well. – robhasacamera Dec 18 '12 at 15:41