iPhone Navigation Bar Title text color

Question

It seems the iPhone Navigation Bar title color is always white. Is there a way to change it to a different color?

I am aware of the navigationItem.titleView approach using an image. Since my design skills are limited and I failed to get the standard glossy. So I prefer changing the text color.

Any pointers would be much appreciated.

Answer 1

This is one of those things that are missing. Your best bet is to create your own custom Navigation Bar, add a text box, and manipulate the color that way.

Answer 2

You need to use a UILabel as the titleView of the navigationItem.

The label should:

• Have a clear background color (label.backgroundColor = [UIColor clearColor]).
• Use bold 20pt system font (label.font = [boldSystemFontOfSize: 20.0f]).
• Have a shadow of black with 50% alpha (label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5]).
• You'll want to set the text alignment to centered as well (label.textAlignment = UITextAlignmentCenter).

Set the label text color to be whatever custom color you'd like. You do want a color that doesn't cause the text to blend into shadow, which would be difficult to read.

I worked this out through trial and error, but the values I came up with are ultimately too simple for them not to be what Apple picked. :)

If you want to verify this, drop this code into initWithNibName:bundle: in PageThreeViewController.m of Apple's NavBar sample. This will replace the text with a yellow label. This should be indistinguishable from the original produced by Apple's code, except for the color.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self)
    {
        // this will appear as the title in the navigation bar
        CGRect frame = CGRectMake(0, 0, 400, 44);
        UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
        label.backgroundColor = [UIColor clearColor];
        label.font = [UIFont boldSystemFontOfSize:20.0];
        label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5];
        label.textAlignment = UITextAlignmentCenter;
        label.textColor = [UIColor yellowColor];
        self.navigationItem.titleView = label;
        label.text = NSLocalizedString(@"PageThreeTitle", @"");
    }

    return self;
}

(As an aside, I've actually searched for an answer to this problem myself in the months since I first posted it. Imagine my surprise when it was my answer! That's part of why I've come back to clean it up a little...)

Answer 3

I did this. i have a table view under the navigation controller. My problem is that sometimes the impressions of contents of the table view come on the navigation controller. I'm not sure why does this happen.

Can somebody please help me on this?

Thanks in Advance.

Answer 4

hihi~ how to add image and text together in the navigation bar ?

any help, i truly appreciated it ?

Answer 5

you can look at the solution that i provided here : http://www.gauravv.com/2009/12/29/iphone-development-tip-custom-uinavigationbar/

hope that helps.

Answer 6

The solution by tewha works well if you are trying to change the color on a page, but I want to be able to change the color on every page. I made some small modifications so that it would work for all pages on a UINavigationController

NavigationDelegate.h

//This will change the color of the navigation bar
#import <Foundation/Foundation.h>
@interface NavigationDelegate : NSObject<UINavigationControllerDelegate> {
}
@end

NavigationDelegate.m

#import "NavigationDelegate.h"
@implementation NavigationDelegate

- (void)navigationController:(UINavigationController *)navigationController 
      willShowViewController:(UIViewController *)viewController animated:(BOOL)animated{
    CGRect frame = CGRectMake(0, 0, 200, 44);//TODO: Can we get the size of the text?
    UILabel* label = [[[UILabel alloc] initWithFrame:frame] autorelease];
    label.backgroundColor = [UIColor clearColor];
    label.font = [UIFont boldSystemFontOfSize:20.0];
    label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5];
    label.textAlignment = UITextAlignmentCenter;
    label.textColor = [UIColor yellowColor];
    //The two lines below are the only ones that have changed
    label.text=viewController.title;
    viewController.navigationItem.titleView = label;
}
@end

Answer 7

This is my solution based upon Stevens

Only real difference is I put some handling in for adjust the position if depending on the text length, seems to be similar to how apple do it

UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(([self.title length] < 10 ? UITextAlignmentCenter : UITextAlignmentLeft), 0, 480,44)];
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.font = [UIFont boldSystemFontOfSize: 20.0f];
titleLabel.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5];
titleLabel.textAlignment = ([self.title length] < 10 ? UITextAlignmentCenter : UITextAlignmentLeft);
titleLabel.textColor = appDelegate.package.skin.navigationTitleColour;
titleLabel.text = self.title;
self.navigationItem.titleView = titleLabel;
[titleLabel release];

You may want to adjust the 10 value depending on your font size