Search code examples
iosios6uinavigationbaruitoolbaruistatusbar

Set Status Bar Tint Colour


I have an tabbed bar application and the status bar tint colour is set to default - so it is always my selected blue colour throughout my app.

However, in one view, I am hiding my Navigation Bar like so:

[self.navigationController setNavigationBarHidden:YES];

This is in the viewWillAppear method and the view is accessible as it is one of the tabs of my app.

The reason I am hiding it, is because I would like to put a toolbar (with about 6 buttons) in its place.

I have set the tint colour of my toolbar, however, the status bar on this view is always black. Is there a way to re-set the status bar for this view, or is there a better way to hide the navigation bar in order to retain the status bar tint colour.

UPDATE I read somewhere that when tinting is set to default, the colour of the status bar will be the colour of the lowest pixel in the header.

I have tried hiding the navigation bar in storyboards and have also tried changing the tint colour to 'Custom' but this also had no effect.

These two screenshots might illustrate my issue. Toggling the navigation bar changes the status bar colour. This is the navigation controller which the view in question is embedded in.

With Navigation Bar - blue status barWithout Navigation Bar - black status bar


Solution

  • Ahh!!! I have a working solution... albeit a very dirty and makeshift solution.

    1. Simply hide the navigation bar in storyboards (As shown in image in question - uncheck Shows Navigation Bar).
    2. Drag a Navigation Bar into the view.
    3. Set it's Alpha to 0 and uncheck User Interaction Enabled - DO NOT MAKE HIDDEN
    4. Make sure the Navigation Bar is on the top - as shown in following image.

      Screen Capture

    This way your status bar will pick up the correct colour without showing a Navigation Bar.

    Hopefully a more resilient/nicer way to do this will be in a recent Xcode update.

    Top Tip: To make a toolbar look like a navigation bar:

    1. Position the toolbar -1 on the Y axis
    2. Create a label (with no text) with a height of 44px, width 320px and position at 0,0. This will be the bottom border for the tab bar. For best results, take a screenshot of a page of your app and use software to get the colour of the border - this is the darkest part of the tab before the shadow begins (use this colour as the background of the label).