I'm trying to replicate an iphone style navbar in my mac app. But I just can't figure out what font (name and size) that the title in the navbar should be. Does anybody know what it is or have a way to figure it out? Thanks in advance.
Update: Here's a picture. I'm referring to the "Navigation bar" pointed out on top.
http://www.funkyspacemonkey.com/wp-content/uploads/2010/01/iPhone_UI_elements_sizes.jpg
Oh, I just figured it out! Helvetica Neue, as Ben pointed out, and then I used size 20. But then, to complete the look, you need to give it an embossed look. I did this by using this code:
[[myTextField cell] setBackgroundStyle:NSBackgroundStyleLowered];
I found that here: http://whomwah.com/2009/03/11/replicating-apples-embossed-text-in-a-cocoa-app/
Now it looks right.
Prior to iPhone 4, the font is Helvetica. The iPhone 4 uses Helvetica Neue.
The point-size you want will depend on what you mean by 'navbar'.
Replicate title label manually:
UINavigationItem(Category)
- (void)setTitle:(NSString *)title
{
UIFont* font = [UIFont fontWithName:#"HelveticaNeue-Bold" size:20.0f];
CGSize textSize = [title sizeWithFont:font];
UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, textSize.width, textSize.height)];
label.textColor =[UIColor whiteColor];
label.backgroundColor = [UIColor clearColor];
label.text = title;
label.font = font;
label.shadowColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5f];
label.shadowOffset = CGSizeMake(0,-1);
label.textAlignment = UITextAlignmentCenter;
[self setTitleView:label];
[label release];
}
Related
The question is plain easy and simple, the answer unfortunately not.
How can you change the font of the text in the UINavigationBar?
From iOS 7 and later:
NSShadow* shadow = [NSShadow new];
shadow.shadowOffset = CGSizeMake(0.0f, 1.0f);
shadow.shadowColor = [UIColor redColor];
[[UINavigationBar appearance] setTitleTextAttributes: #{
NSForegroundColorAttributeName: [UIColor greenColor],
NSFontAttributeName: [UIFont fontWithName:#"Helvetica" size:20.0f],
NSShadowAttributeName: shadow
}];
From iOS 5 and later:
[[UINavigationBar appearance] setTitleTextAttributes: #{
UITextAttributeTextColor: [UIColor greenColor],
UITextAttributeTextShadowColor: [UIColor redColor],
UITextAttributeTextShadowOffset: [NSValue valueWithUIOffset:UIOffsetMake(0.0f, 1.0f)],
UITextAttributeFont: [UIFont fontWithName:#"Helvetica" size:20.0f]
}];
Earlier than iOS 5:
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 400, 44)];
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 whiteColor];
label.text=self.title;
self.navigationItem.titleView = label;
[label release];
If you wanted to change the font in the Interface Builder itself (without any code) here is the way to do it in Xcode6:
1.) Find the Navigation Bar view under the Navigation Controller Scene
2.) Change the Title Font, Color and Shadow attributes in the Attributes Inspector.
The above answer works. I would add the following line before the last line. If I don't, it seems the label is center-aligned incorrectly if there is a back button on the left side but no right button.
...
[self.navigationItem.titleView sizeToFit];
[label release]; // not needed if you are using ARC
Updated for iOS 7:
[[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
[UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], NSForegroundColorAttributeName,
shadow, NSShadowAttributeName,
[UIFont fontWithName:#"HelveticaNeue-CondensedBlack" size:21.0], NSFontAttributeName, nil]];
courtesy of:
http://www.appcoda.com/customize-navigation-status-bar-ios-7/
Not sure why all the answers included the shadow. Adding the lines that manipulate the shadow does nothing in respect to changing text font. These 2 lines of code will work for iOS 8.4 and Swift
let attributesDictionary = [NSFontAttributeName: UIFont(name: "Helvetica Neue", size: 14)!]
navigationController!.navigationBar.titleTextAttributes = attributesDictionary
The titleTextAttributes stores a dictionary that will dictate the font, color, size, and other attributes of the navigation bar's title.
As of iOS 5 you can use the appearance proxy.
The answer is in a duplicate of this question: https://stackoverflow.com/a/12364740/883413
NSShadow *shadow = [NSShadow new];
[shadow setShadowColor: [UIColor clearColor]];
[shadow setShadowOffset: CGSizeMake(0.0f, 1.0f)];
[self.navigationController.navigationBar setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
[UIFont fontWithName:#"TimeBurner" size:27.0f], NSFontAttributeName,
[UIColor whiteColor], NSForegroundColorAttributeName,
shadow, NSShadowAttributeName,nil]];
I have created an AddressBook kind of application where I display a list of people in a UITableView, when a person is selected an ABUnknownPersonViewController is pushed. From this ABUnknownPersonViewController the user is able (by using the built in functionality) to either add the person to a "New Contact" or "Existing Contact".
This is where my problem is located. I am using a Custom UILabel for the NavigationBar title throughout my application. And I need to be able to do this for the views that are pushed by "Add New Contact" / "Add to Existing Contact" as well.
I solved this for the "Add New Contact" by creating a category for ABNewPersonViewController, but the same approach doesn't work for the "Add to Existing Contact". I guess this might be due to the fact that is it an ABPersonPickerNavigationController that is pushed.
#implementation ABPeoplePickerNavigationController (customTitle)
-(void)viewDidLoad {
[super viewDidLoad];
self.navigationBar.tintColor = [UIColor colorWithRed:102/255.0 green:102/255.0 blue:102/255.0 alpha:1];
}
The change of color for the NavigationBar's tintColor works fine, but I cant find a proper way to access the title. Help that include a working example where you are able to change the title in a ABPeoplePickerNavigationController that is pushed from a ABUnknownPersonViewController would be much appriciated.
This is how the category for ABNewPersonViewController (that works) looks like:
#implementation ABNewPersonViewController (customTitle)
-(void)viewDidLoad {
[super viewDidLoad];
self.navigationController.navigationBar.tintColor = [UIColor colorWithRed:102/255.0 green:102/255.0 blue:102/255.0 alpha:1];
}
-(void)setTitle:(NSString *)theTitle {
CGRect frame = CGRectMake(0, 0, 45, 45);
UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont systemFontOfSize:20.0];
label.shadowColor = [UIColor colorWithWhite:255.0 alpha:1];
label.shadowOffset = CGSizeMake(1, 1);
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor colorWithRed:23/255.0 green:23/255.0 blue:23/255.0 alpha:1];
self.navigationItem.titleView = label;
label.text = theTitle;
[label sizeToFit];
}
#end
I use custom labels for this purpose. You can also change font size with this code.
Example:
UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 320 / 11)];
label.font = 16.0;
label.textColor = [UIColor blackColor];
label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5];
label.backgroundColor = [UIColor clearColor];
label.textAlignment = UITextAlignmentCenter;
label.text = #"Your title";
self.navigationItem.titleView = label;
[label release];
Hope this helps.
I have used this code to change a NavigationItem’s title:
self.navigationItem.title = #"My Name is ABC";
How can I change the font size and font as well?
Sample Code :
CGRect frame = CGRectMake(0, 0, 400, 44);
UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:8.0];
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor whiteColor];
label.text = #"Sample custom Title With small Fonts ";
self.navigationItem.titleView = label;
As of iOS5+, you can use the UIAppearance protocol to change the font of the nav title, here's code:
NSMutableDictionary *titleBarAttributes = [NSMutableDictionary dictionaryWithDictionary: [[UINavigationBar appearance] titleTextAttributes]];
[titleBarAttributes setValue:[UIFont fontWithName:#"Helvetica-Bold" size:18] forKey:UITextAttributeFont];
[[UINavigationBar appearance] setTitleTextAttributes:titleBarAttributes];
Since iOS5 you can use the new titleTextAttributes property like so:
NSMutableDictionary *newAttributes = [[NSMutableDictionary alloc] init];
[newAttributes setObject:[UIFont boldSystemFontOfSize:18] forKey:UITextAttributeFont];
[self.navigationController.navigationBar setTitleTextAttributes:newAttributes];
Possible keys are:
UITextAttributeFont
UITextAttributeTextColor
UITextAttributeTextShadowColor
UITextAttributeTextShadowOffset
To make the above example centered you have to have the size be only as wide as the text, this should do the trick
UIFont * font = [UIFont fontWithName:#"Helvetica" size:18.0f];
CGRect frame = CGRectMake(0, 0, [#"Lorem Ipsum" sizeWithFont:font].width, 44);
As of iOS5, you can do this in 1 line:
[[UINavigationBar appearance] setTitleTextAttributes: #{UITextAttributeFont: [UIFont fontWithName:#"Helvetica" size:20.0f]}];
Swift 4
in AppDelegate.swift
UIBarButtonItem.appearance().setTitleTextAttributes([NSAttributedStringKey.font: UIFont(name: "Helvetica-Bold", size: 15)!], for: .normal)
Here is the modern Swift 2 solution:
let customFont = UIFont(name: "Helvetica", size: 17)
UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName : customFont!]
//Appearance setup for navigation title font throught application...
let customFont = UIFont(name: "Helvetica-Bold", size: 15)
UINavigationBar.appearance().titleTextAttributes = [NSAttributedStringKey.font : customFont!]
I have found some good answer for this .I think it's similar to the accepted answer however please find it in some more detail.
- (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
UILabel *label = [[[UILabel alloc] initWithFrame:CGRectZero] 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]; // change this color
self.navigationItem.titleView = label;
label.text = NSLocalizedString(#"PageThreeTitle", #"");
[label sizeToFit];
}
return self;
}
For more details, Please refer this Link
For swift 3
self.navigationController?.navigationBar.titleTextAttributes = [NSFontAttributeName :UIfont(named:"test") ]
Using the following post, I was able to add a UILabel to a UIToolbar, however, it looks crappy. Anyone know how to get the text size / color / shadow to match the title for a UINavigationController?
Navigation Controller
alt text http://www.codingwithoutcomments.com/uploads/Picture1.png
UIToolbar with UILabel
alt text http://www.codingwithoutcomments.com/uploads/Picture2.png
What steps do I need to take to make them match?
You might also want to add a shadow?
itemLabel.shadowColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5];
itemLabel.shadowOffset = CGSizeMake(0, -1.0);
Obviously the question is about iPhone, but in case anyone is wondering, here are the numbers for iPad:
titleLabel.font = [UIFont boldSystemFontOfSize:20.0];
titleLabel.shadowOffset = CGSizeMake(0, 1);
titleLabel.shadowColor = [UIColor colorWithWhite:1.f alpha:.5f];
titleLabel.textColor = [UIColor colorWithRed:113.f/255.f green:120.f/255.f blue:127.f/255.f alpha:1.f];
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.text = #"Title";
UILabel * itemLabel = [[UILabel alloc] initWithFrame:rectArea];
itemLabel.text = #"Item";
itemLabel.textColor = [UIColor whiteColor];
itemLabel.font = [UIFont boldSystemFontOfSize:22.0];
I have a simple navigation based application for the iphone/objective-c
within various UIViewControllers that are pushed into view, I can set the text in the title bar using something like
self.title = #"blah blah blah"
Is there a way to control the font and font-size of the title in the title bar text?
thanks!
the proper way to resize the title text of a navcontroller is to set the titleView property of the navigationItem
like this (in viewDidLoad)
UILabel* tlabel=[[UILabel alloc] initWithFrame:CGRectMake(0,0, 300, 40)];
tlabel.text=self.navigationItem.title;
tlabel.textColor=[UIColor whiteColor];
tlabel.backgroundColor =[UIColor clearColor];
tlabel.adjustsFontSizeToFitWidth=YES;
self.navigationItem.titleView=tlabel;
You may want to emboss the label so it doesn't look fuzzy and flat:
- (void)viewDidLoad
{
[super viewDidLoad];
CGRect frame = CGRectMake(0, 0, 400, 44);
UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:18.0];
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor whiteColor];
label.text = self.navigationItem.title;
// emboss so that the label looks OK
[label setShadowColor:[UIColor darkGrayColor]];
[label setShadowOffset:CGSizeMake(0, -0.5)];
self.navigationItem.titleView = label;
}
IF you want this to work both on iphone and ipad, and also want to get the title centered then use the following code.
- (void)viewDidLoad
{
[super viewDidLoad];
UILabel* label=[[UILabel alloc] initWithFrame:CGRectMake(0,0, self.navigationItem.titleView.frame.size.width, 40)];
label.text=self.navigationItem.title;
label.textColor=[UIColor whiteColor];
label.backgroundColor =[UIColor clearColor];
label.adjustsFontSizeToFitWidth=YES;
label.font = [AppHelper titleFont];
label.textAlignment = NSTextAlignmentCenter;
self.navigationItem.titleView=label;
}
You can assign any UIView to a navcontroller's title area.
Create a UILabel and set its font and size anyway you want, then assign it to the UIViewController's navigationItem.titleView property. Make sure the UILabel's backgroundColor is set to clearColor.
This only works on the top-level nav-view. As the user drills down into the view controller hierarchy and the "back" button is shown the alternate titleView is ignored and the regular text label is shown.