How can I change the font of the back button for my navigation bar?
How can I change the font of the back button for my navigation bar.
The back button is either "back" or the title from the previous view controller.
I thought this viewDidLoad
would work:
navigationController?.navigationItem.leftBarButtonItem?.setTitleTextAttributes([NSFontAttributeName: UIFont(name: "FONTNAME", size: 20)!], forState: UIControlState.Normal)
but the leftBarButton?
optional returns nil
.
If you need to change font style entirely across you app (aka. each navigation button), preferred method is to use UIBarButtonItem.appearance()
proxy.
Sample code snippet would look like this:
SWIFT 3.0+
//make sure font name u use below *actually* exists in the system !
//if it doesn't app will crash because we're force unwrapping an optional (see below) !!!
let customFont = UIFont(name: "customFontName", size: 17.0)!
UIBarButtonItem.appearance().setTitleTextAttributes([NSFontAttributeName: customFont], for: .normal)
It is wise to put this code snippet somewhere at the beginning of your AppDelegate.swift
file because font stylization has to happen each time the app launches. Also, you're safe to put this code in any other place (eg. Presenter
class) where you do your UI stylization and customization. As soon as this code gets executed, all your BarButtons will be customized thereafter.
BUT as a true Swift 🤓, you should first optionally unwrap your font and eventually fallback to system font if it's not found or any other possible issue arise during font loading.
var textAttributes: [String:Any]
//custom font setup
let fontColor = UIColor.purple
let barItemCustomFont = UIFont(name: "👑", size: 14) //note we're not forcing anything here
//can we use our custom font 🤔
if let customFont = barItemCustomFont {
//hooray we can use our font 💪
textAttributes = [NSForegroundColorAttributeName: fontColor, NSFontAttributeName: customFont]
} else {
//👎 not found -> omit setting font name and proceed with system font
textAttributes = [NSForegroundColorAttributeName: fontColor]
}
//finally
UIBarButtonItem.appearance().setTitleTextAttributes(textAttributes, for: .normal)
Real world example
In a real app you would usually need to customize both UINavigationBar
and UIBarButton
font style (aside from other parameters) to make them visually consistent.
Here is handy stylizeNavigationFontOfMyAmazingApp🎨
function you can use:
func stylizeNavigationFontOfMyAmazingApp🎨() {
//custom font
let customFont = UIFont(name: "someFancyFont", size: 16)! //note we're force unwrapping here
//navigation bar coloring:
UINavigationBar.appearance().tintColor = UIColor.white
UINavigationBar.appearance().barTintColor = UIColor.blue
//unique text style:
var fontAttributes: [String: Any]
fontAttributes = [NSForegroundColorAttributeName: UIColor.red, NSFontAttributeName: customFont]
//navigation bar & navigation buttons font style:
UINavigationBar.appearance().titleTextAttributes = fontAttributes
UIBarButtonItem.appearance().setTitleTextAttributes(fontAttributes, for: .normal)
}
Advantages of using appearance()
proxy
- Two liner code snippet for stylizing every
UIBarButtonItem
in your app/project. - You can mix
appearance()
proxies of several classes to get truly unique visual style - If you need further customization control you can re-customize each button further (e.g. placing custom views, button, images, etc) - on specific instance of
UIBarButtonItem
.
Reference
Apple Docs on appearance
protocol.
Just tested your code and it seems the reason that line is returning nil
is actually because name: "FONTNAME"
returns nil. So if you set that name
attribute to a valid font name, the code should run without an error -- even if navigationController?.navigationItem.leftBarButtonItem
is explicitly set to nil.
But regardless, also as I've seen through testing, this line won't give you the result you apparently want. The leading navigationController
optional shouldn't be there since it accesses your UINavigationController
and not the current view. Simply use the UIViewController
's own navigationItem
property to access its leftBarButtonItem
directly, ex:
let backButton = UIBarButtonItem(title: "< Back", style: UIBarButtonItemStyle.Plain, target: self, action: "goBack")
navigationItem.leftBarButtonItem = backButton
navigationItem.leftBarButtonItem?.setTitleTextAttributes([NSFontAttributeName: UIFont(name: "Chalkduster", size: 20)!], forState: UIControlState.Normal)
Edit: From the comment you posted under this answer, it seems as if you don't actually want to set the leftBarButtonItem
but the backBarButtonItem
because you don't want to implement a custom action beyond going back to the previous view controller.
So in that previous view controller (i.e. the view before you want to show your custom back button item), you can set your custom back button without an action like so:
let backButton = UIBarButtonItem(title: "< Back", style: UIBarButtonItemStyle.Plain, target: self, action: nil)
backButton.setTitleTextAttributes([NSFontAttributeName: UIFont(name: "Chalkduster", size: 20)!], forState: UIControlState.Normal)
navigationItem.backBarButtonItem = backButton
If you want to apply this change to all of your application you can use below code:
Swift 4
I've added these lines to AppDelegate.swift
in application
function :
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
UINavigationBar.appearance().titleTextAttributes = [
NSAttributedStringKey.font: UIFont(name: "IranSansMobile", size: 20)!
]
UIBarButtonItem.appearance().setTitleTextAttributes([NSAttributedStringKey.font: UIFont(name: "IranSansMobile", size: 15)!], for: UIControlState.normal)
return true
}
Swift 3
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
UINavigationBar.appearance().titleTextAttributes = [
NSFontAttributeName: UIFont(name: "IranSansMobile", size: 20)!
]
UIBarButtonItem.appearance().setTitleTextAttributes([NSFontAttributeName: UIFont(name: "IranSansMobile", size: 15)!], for: UIControlState.normal)
return true
}
For iOS 13, Swift 5.1:
let fontAttr = [NSAttributedString.Key.font: \*your font*\]
let buttonAppearance = UIBarButtonItemAppearance()
buttonAppearance.normal.titleTextAttributes = fontAttr
let navbarAppearance = UINavigationBarAppearance()
navbarAppearance.buttonAppearance = buttonAppearance
UINavigationBar.appearance().standardAppearance = navbarAppearance