0

In every app I see the status bar colour is same as navigation bar item but in Main.Storyboard I add Navigation bar and webview and a Tab bar in the bottom. I thought the status bar will change the colour it self but it doesn't do that. Look at the screenshots:

Main.StoryBoard

So how do I do it? I will be really thankful for that.

Anbu.Karthik
  • 82,064
  • 23
  • 174
  • 143
Mustafa
  • 5
  • 4
  • You could Status Bar View to the very top and give it a color. That would work too. – Works On Mine Mar 08 '17 at 13:55
  • I don't understand what you mean? I put that nav bar on the most top but the title messes up with the time and battery thing. – Mustafa Mar 08 '17 at 14:02
  • The top constraint for the Status bar view should have a value of zero with "Constrain to margins" unchecked in the Add new constraints pop up in the storyboard designer. – Works On Mine Mar 08 '17 at 14:04

2 Answers2

0

You have added NavigationBar from the controls to your ViewController ie the reason it is looking like this.

To solve the problem remove that NaviagtionBar from your controller and embed the NavigationController to embed to NavigationController follow this steps.

  1. Select Your ViewController.

  2. Go to the "Editor" menu and select "Embed in" inside that select "Navigation Controller". So it should like Editor->Embed In->Navigation Controller.

Edit: To change the color and title pragmatically add below code in viewDidLoad.

navigationController.navigationBar.barTintColor = [UIColor redColor];//Set your color
//To set title
self.navigationItem.title = @"YourTitle";
Nirav D
  • 71,513
  • 12
  • 161
  • 183
  • I did and it looks like this now and I don't know what to do next so it will be great if you guide me. http://prntscr.com/ehh5nt – Mustafa Mar 08 '17 at 14:07
  • @MustafaHassan Run your app, I think It is looking perfect. – Nirav D Mar 08 '17 at 14:11
  • @MustafaHassan What it look likes? – Nirav D Mar 08 '17 at 14:16
  • @MustafaHassan What is status bar view in ViewController? And which view has that dark grey color? – Nirav D Mar 08 '17 at 14:17
  • What does first question mean? It's UIView in .h file. I am new in this so I don't know much about it. The grey thing is the space when you delete the Navigation bar. The old one. – Mustafa Mar 08 '17 at 14:33
  • @MustafaHassan Then put your view from 0 y origin. – Nirav D Mar 08 '17 at 14:35
  • Wow. But how do I change it's color and add a title to it? http://prntscr.com/ehhgvv – Mustafa Mar 08 '17 at 14:38
  • @MustafaHassan In storyboard select your ViewController and then select navigationItem in rightSIde option in 3rd tab you set the title of it. After that to change background color select your navgationController then select navigationbar in right side option you see the BarTint Color changed it to color that you want. – Nirav D Mar 08 '17 at 14:42
  • @MustafaHassan If you don't get it then set the color and title pragmatically check my edited answer for that. – Nirav D Mar 08 '17 at 14:45
  • Great. Title is showing now but I still couldn't figure out how to change the colour. If you guide me thanks. http://prntscr.com/ehhlei – Mustafa Mar 08 '17 at 14:51
  • Oh lemme try the programatically changing the colour way – Mustafa Mar 08 '17 at 14:52
  • @MustafaHassan Ok try that way and inform me. – Nirav D Mar 08 '17 at 14:52
  • @MustafaHassan Welcome mate :) – Nirav D Mar 08 '17 at 14:59
  • Also last thing. How do I change the text colour too? Like I want both white colour in status bar and navigation bar? – Mustafa Mar 08 '17 at 15:00
  • To change textcolor `navigationController.navigationBar.tintColor = [UIColor whiteColor];` And to change status bar text color to white check this link http://stackoverflow.com/questions/17678881/how-to-change-status-bar-text-color-in-ios-7 – Nirav D Mar 08 '17 at 15:02
  • @MustafaHassan Try this way. `[self.navigationController.navigationBar setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor whiteColor]}];` – Nirav D Mar 08 '17 at 15:21
  • @MustafaHassan Welcome mate :) – Nirav D Mar 08 '17 at 15:57
0

From the link you posted to the screenshot, looks like you need to keep the uiview "Status bar View". One thing you can do is to extend the top constraint for the Status bar view should have a value of zero with "Constrain to margins" unchecked in the Add new constraints pop up in the storyboard designer. Something like enter image description here

Notice that the top constraint is with Superview and not with Top Layout Guide

Works On Mine
  • 1,111
  • 1
  • 8
  • 20
  • Yeah, you could adjust the title. But that's it. When you run the app, the status bar would have a background color. By default it would be using the dark theme, which can to changed to light – Works On Mine Mar 08 '17 at 14:21
  • Well that's the thing. I cannot resize this navigation bar. The height is totally fixed. It looks like this without doing anything. http://prntscr.com/ehhdfg – Mustafa Mar 08 '17 at 14:29
  • ok. now it get it. in that case remove the status bar view and add a navigation controller to the storyboard. that the view you have shown as the root view controller and make sure that "Show navigation bar option is checked". Exactly as @Nirav mentions – Works On Mine Mar 08 '17 at 14:44