iOS 11[Swift 4] Navigation Bar With Large Titles and LargeTitleTextAttributes - Color & Font Customization - Swift 4 Tutorials W3Schools

Hot

Post Top Ad

21 Sep 2017

iOS 11[Swift 4] Navigation Bar With Large Titles and LargeTitleTextAttributes - Color & Font Customization

From iOS 11, Apple has changed Navigation Bar Titles to Large text.
   
Use a large title when you need to provide extra emphasis on context.

See Music app in iOS 11 Devices. Music uses large titles to differentiate content areas like albums, artists, playlists, and radio.

Large titles don't make sense in all apps and should never compete with content.

Navigation Bar With Large Titles and LargeTitleTextAttributes color & font change - Swift 4, iOS 11


Getting Started :

First create single View Application.

Open Main.storyboard, then tap on ViewController and go to Editor -> Embed In -> Navigation Controller.

Editor -> Embed In -> Navigation Controller.

It will add navigation Controller.

Next open ViewController.swift file.

PrefersLargeTitles :

For setting Large Text as title to the navigation bar we need to use prefersLargeTitles property.

When set to YES, the navigation bar will use a larger out-of-line title view when requested by the current navigation item.

Before that we need to tell to navigation item about LargeTitleDisplayMode. Use automatic mode it will set automatically based on parent View Controller.

Add the following code inside ViewDidLoad() method :
navigationController?.navigationBar.prefersLargeTitles = true
navigationController?.navigationBar.topItem?.title = "Hello"
navigationController?.navigationItem.largeTitleDisplayMode = .automatic

Build and Run, Great we see Large title 'Hello'.

prefersLargeTitles = true

Good, how to change title color and font etc.. For that we have LargeTitleTextAttributes.

LargeTitleTextAttributes :

For changing the color of the Title and Font size we need to set Attributes.

So add the following code next to previous code :
let attributes = [
    NSAttributedStringKey.foregroundColor : UIColor.red
]

navigationController?.navigationBar.largeTitleTextAttributes = attributes

Build and Run, we see title with Red Color.

Navigation large title with Red Color.


For changing the font add font attribute to the attribute dictionary like follow :
NSAttributedStringKey.font : UIFont.preferredFont(forTextStyle: .title1)

Download sample project with examples :


No comments:

Post a Comment

Post Top Ad