Changing the text color of a navigation bar title when "prefersLargeTitles" is set to true

Question

I have a requirement in which I have to use a UINavigationBar with a red large title.

Currently, I have the following code:

func prepareNavigationController() {
    let navController = UINavigationController(rootViewController: self)
    navController.navigationBar.prefersLargeTitles = true
    navigationItem.searchController = UISearchController(searchResultsController: nil)
    navigationItem.hidesSearchBarWhenScrolling = false
    navController.navigationBar.titleTextAttributes = [NSAttributedStringKey.foregroundColor.rawValue: UIColor.red]
}

But it's not actually tinting the title label to red. This is the result:

But changing prefersLargeTitles to false does the right thing, and my title is red.

navController.navigationBar.prefersLargeTitles = false

I am not entirely sure if this is a bug since at the time of this writing we are still in the first beta, or if this is intentional behavior, mostly because I haven't any of Apple's apps color the large titles before. Is there any way to actually get the large title to have any color I want?

I'm searching for the exact same thing! And I didn't find out yet how to change it, maybe since it's the first beta Apple haven't implemented it yet. — Philippe, Jun 18 '17 at 21:16
Maybe this could be the right answer https://stackoverflow.com/a/46007201/7048642 — Kevin Furman, Sep 03 '17 at 22:41

assb10yr · Accepted Answer · 2017-07-13T15:15:17.403

66

There is a new UINavigationBar property "largeTitleTextAttribute" that should help with this.

largeTitleTextAttribute

Here is a sample code you can add to your view controllers viewDidLoad method

        navigationController?.navigationBar.largeTitleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.blue]

Here is a sample code and screenshot without the largeTitleTextAttributes set, but the barStyle is set to .black

        navigationController?.navigationBar.barStyle = .black

Here is a screenshot without the largeTitleTextAttributes set, but the barStyle is set to .default

        navigationController?.navigationBar.barStyle = .default

edited Jul 13 '17 at 15:15

answered Jul 12 '17 at 18:53

assb10yr

729
5
7

Interesting. Is this new to Beta 3? I have yet to download it but I will do so now and check it out. – Andy Ibanez Jul 12 '17 at 19:20
Yes new to beta 3. Or at least I noticed it only now. – assb10yr Jul 12 '17 at 19:23
I will confirm in a few hours (slow internet), because the symbol doesn't exist on Beta 2. – Andy Ibanez Jul 12 '17 at 19:24
I can confirm that the symbol is there on Beta 3. Very interesting find, I will now see if it works. If it does, I will mark your answer as accepted (Provided you add some sample code to help future people who will stumble upon this question). – Andy Ibanez Jul 12 '17 at 23:13

score 11 · Answer 2 · answered Jun 16 '19 at 11:32

11

The way you do this in iOS 13 has changed, you now use UINavigationBarAppearance class like this…

let appearance = UINavigationBarAppearance(idiom: .phone)
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.systemRed]
appearance.titleTextAttributes = [.foregroundColor: UIColor.systemRed]
appearance.backgroundColor = .white
navigationItem.standardAppearance = appearance
navigationItem.scrollEdgeAppearance = appearance

answered Jun 16 '19 at 11:32

Ashley Mills

50,474
16
129
160

Setting the `standardAppearance` property of my `navigationItem` has no effect. In particular, I doing this within `viewWillAppear` of my view controller and using `UINavigationBarAppearance` to set the `largeTitleTextAttributes`. Any thoughts on why this may be the case? – josephap Jan 19 '20 at 06:05

score 7 · Answer 3 · answered Jun 25 '17 at 23:28

Not sure if it's a bug in beta 1 & 2, but here is a way to set the color. It's a bit of a "hacky" workaround, but it should work until Apple fixes this. In both the Objective-C and Swift version, this code goes in the viewDidAppear: method.

Objective-C:

dispatch_async(dispatch_get_main_queue(), ^{
    for (UIView *view in self.navigationController.navigationBar.subviews) {
        NSArray <__kindof UIView *> *subviews = view.subviews;
        if (subviews.count > 0) {
            UILabel *label = subviews[0];
            if (label.class == [UILabel class]) {
                [label setTextColor:[UIColor redColor]];
            }
        }
    }
});

Swift:

DispatchQueue.main.async {
     for view in self.navigationController?.navigationBar.subviews ?? [] {  
     let subviews = view.subviews  
     if subviews.count > 0, let label = subviews[0] as? UILabel {  
           label.textColor = UIColor.red
 } } }

This is actually the only solution that worked for me on iOS 12 — ChavirA, Oct 22 '18 at 20:09

score 2 · Answer 4 · answered Jan 05 '19 at 08:23

2

If using storyboard, just change "Large Title Text Attributes" Title Color at Navigation Bar Attribute Inspector:

answered Jan 05 '19 at 08:23

M Reza

18,350
14
66
71

score 1 · Answer 5 · answered Feb 03 '18 at 14:07

Here's the working code to use large titles and sets the text color of small and large titles to white, both on iOS11+ and on older iOS versions.

// Will apply to versions before iOS 11
navigationController?.navigationBar.titleTextAttributes = [
    NSAttributedStringKey.foregroundColor: UIColor.white
]

if #available(iOS 11.0, *) {
    navigationController?.navigationBar.prefersLargeTitles = true
    navigationController?.navigationBar.largeTitleTextAttributes = [
        NSAttributedStringKey.foregroundColor: UIColor.white
    ]
}

(There used to be a bug in Xcode, but it now appears to be fixed)

score 0 · Answer 6 · answered Mar 25 '23 at 00:57

On Xcode 14, Swift 5 and iOS 15 you can change the large title color through the storyboard attribute inspector. The default color is black. You need to select the Navigation Bar, then Attributes Inspector. Go to Scroll Edge Bar Button Appearances section to find the "Prefers Large Titles" checkbox:

Then you need to set Large Title to custom and Title color to whatever you want (eg: white) as indicated by the red arrows.

Changing the text color of a navigation bar title when "prefersLargeTitles" is set to true

6 Answers6

Linked