{"id":83,"date":"2020-03-01T20:18:01","date_gmt":"2020-03-01T19:18:01","guid":{"rendered":"https:\/\/mic.st\/blog\/?p=83"},"modified":"2020-03-01T20:18:01","modified_gmt":"2020-03-01T19:18:01","slug":"customizing-your-apps-navigation-bar-titles-buttons-and-background","status":"publish","type":"post","link":"https:\/\/mic.st\/blog\/customizing-your-apps-navigation-bar-titles-buttons-and-background\/","title":{"rendered":"Customizing your app’s navigation bar titles buttons and background"},"content":{"rendered":"\n

The default navigation bar you get when implementing a UINavigationController<\/code> does it’s job but often you want to customize it because it just does not look so fancy.<\/p>\n\n\n\n

To customize the background of your UINavigationBar<\/code> you set its backgroundImage<\/code> property which means you have to provide a UIImage<\/code> even if you want to give it a single color.<\/p>\n\n\n\n

I created an extension for UIImage<\/code> that makes it easy to create instances of UIImage<\/code> on the fly.<\/p>\n\n\n

extension UIImage {\n\/\/\/ This function creates a 1x1 pt colored image<\/span>\n  static<\/span> func withColor(color: UIColor) -> UIImage {\n    let<\/span> rect = CGRect(x: 0<\/span>, y<\/span>: 0<\/span>, width<\/span>: 1<\/span>, height<\/span>: 1<\/span>)\n    UIGraphicsBeginImageContextWithOptions(rect.size, false<\/span>, 0<\/span>)\n    color.setFill()\n    UIRectFill(rect)\n    let<\/span> image: UIImage = UIGraphicsGetImageFromCurrentImageContext() ?? UIImage()\n    UIGraphicsEndImageContext()\n    return<\/span> image\n  }\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Now we can use this extension to create a background and use it as a background image for our navigation bar:<\/p>\n\n\n
\/\/\/ Declare a white with 0.8 alpha<\/span>\nlet<\/span> background = UIImage.withColor(color: UIColor.white.withAlphaComponent(0.8<\/span>))\n\n\/\/\/ Set the color as background <\/span>\nnavigationController?.navigationBar.setBackgroundImage(background, for<\/span>: .default)\nnavigationController?.navigationBar.setBackgroundImage(background, for<\/span>: .compact)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
If you want to make your navigation bar’s background invisible you can just set it to an empty UIImage<\/code>:<\/p>\n\n\n
navigationController<\/span>?.navigationBar<\/span>.setBackgroundImage<\/span>(UIImage<\/span>(), for<\/span>: .default<\/span>) navigationController<\/span>?.navigationBar<\/span>.setBackgroundImage<\/span>(UIImage<\/span>(), for<\/span>: .compact<\/span>)<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The shadow of the navigation bar is an image as well. Often you want to make it invisible. You achieve this by setting the shadowImage<\/code> property:<\/p>\n\n\n
navigationController?.navigationBar.shadowImage = UIImage<\/span>()<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
If we want to set custom fonts for our navigation bar we cannot do this directly as we would do it when customizing some UILabel<\/code>. Instead we do this by setting the navigation bar’s titleTextAttributes<\/code> and largeTitleTextAttributes<\/code> properties:<\/p>\n\n\n
\/\/\/ Setting the font for the centered title<\/span>\nnavigationController?.navigationBar.titleTextAttributes = [ NSAttributedString.Key.font: UIFont(named: \"someFont\"<\/span>)]\n\n\/\/\/ Setting the font for largeTitles, if enabled via:<\/span>\nnavigationController?.navigationBar.prefersLargeTitles = true<\/span>\nnavigationController?.navigationBar.largeTitleTextAttributes = [ NSAttributedString.Key.font: UIFont(named: \"someFont\"<\/span>)]<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
One is still missing, which is the font on the navigation bar’s buttons. I could not manage to set this from within a view controller, for me it was only possible from the AppDelegate. You use the appearance proxy for that which changes the appearance of instances of UIBarButtonItem<\/code> for the whole app. Just add the following to your AppDelegate.application(_:didFinishLaunchingWithOptions:)<\/code>:<\/p>\n\n\n
UIBarButtonItem<\/span>.appearance<\/span>().setTitleTextAttributes<\/span>(\n[NSAttributedString.Key.font: UIFont(named: \"someFont\"<\/span>)]<\/span>,\n                              for<\/span>: .normal<\/span>)<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>","protected":false},"excerpt":{"rendered":"
The default navigation bar you get when implementing a UINavigationController does it’s job but often you want to customize it because it just does not look so fancy. To customize the background of your UINavigationBar you set its backgroundImage property which means you have to provide a UIImage even if you want to give it…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[13,14,10,12,11],"class_list":["post-83","post","type-post","status-publish","format-standard","hentry","category-ios-development","tag-appdelegate","tag-customizing","tag-navigation-bar","tag-uinavigationbar","tag-uinavigationcontroller"],"_links":{"self":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":0,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts\/83\/revisions"}],"wp:attachment":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/media?parent=83"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/categories?post=83"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/tags?post=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}