navigationbar items not centered vertically

Question

I am trying to place all elements of a navigationBar in the vertical center, but I don't know how to do it?

The gray part above the yellow is the navigationBar. As we can see the title and other elements of the navigationBar are not vertically centered.

How can I do that ?

My Code so far :

    let navigationItem = UINavigationItem()  
    navigationItem.title = sTitle;      
    navigationBar.frame = CGRectMake(0,0,screenwidth, 50);
    navigationBar.titleTextAttributes = [ NSFontAttributeName: titleFont, NSForegroundColorAttributeName: UIColor.blackColor()]
    self.view.addSubview(navigationBar);

20 pixel is space of the status bar, and your status bar color is white. so you can not see that. — Ashish Kakkad, Mar 28 '16 at 09:07
Can you please add some more code for `navigationBar` declaration ? and why you are adding the navigation bar inside view controller's view it should be from navigationController/ViewController, Also as Ashish said you have calculated 20 pixel of space also in the Navigationbar — HardikDG, Apr 03 '16 at 09:57

Oleg Gordiichuk · Answer 1 · 2016-03-28T09:26:58.947

0

Firstly try to use native approach to set navigation bar title like:

self.title="Test title"

Or if you would like to have custom font try this :

self.navigationController.navigationBar.titleTextAttributes = [ NSFontAttributeName: UIFont(name: "CustomFont", size: 15)!]

edited Mar 28 '16 at 09:26

answered Mar 28 '16 at 08:59

Oleg Gordiichuk

15,240
7
60
100

Thanks for helping, but it did not work. There are all elements not centered. The "zurück" (In german means back) Link is an navigationItem and is also not centered. – mcfly soft Mar 31 '16 at 15:06

score 0 · Answer 2 · answered Apr 03 '16 at 18:37

As is mentioned in the comments, the reason these elements are not vertically centered is the fact that the status bar is shown, which reserves 10 points at the top of the navigation bar. It's just not easily visible because it's using the light content style. If your battery was low or charging you'd see the battery at the top right.

You'll need to remove the status bar which will decrease the height of your navigation bar. As there are different ways to hide the status bar based on project setup and context I won't instruct how to remove the status bar, but information on how to do so is widely available.

Once that extra space is removed your items will be vertically centered.

Thanks a lot. Ok I see. It has something to do with the status bar, but I already had removed the status bar with prefersStatusBarHidden=true. But still I see the items not centered. — mcfly soft, Apr 06 '16 at 11:44

score 0 · Answer 3 · answered Apr 05 '16 at 03:29

The navbar text/items will never look centered, the way you are displaying things. Technically they are already centered in the Nav bar, but the nav bar manages the centering, and keeps all elements constrained to the lower edge of the nav bar.

The status bar needs 20px. The nav bar should be 44px in height. The top of the nav bar should be constrained to the Top Layout Margin, NOT 0 to the top view boundary itself. The reason for this is that ios removes the status bar (actually the top 20px of whatever displays in portrait mode) when the device is flipped to landscape mode. If your nav bar is 44px, switching the device to landscape mode will show you that the text is correctly centered vertically.

My suggestion for you to see all of this is to create a small view above the nav bar. Make the view 20px high, constrain it to the View.Top (NOT to the margin), and set the background or tintcolor to bright green or something. Then set your nav bar to 44px, constrain it to the Top Layout Margin Guide (NOT to the bottom of the status view you just created, and NOT offset from the View.Top Boundary).

Then when you flip the device back and forth, you'll see that your text is always centered within the nav bar, and the status bar will come and go above the nav bar.

PS. Do this in the storyboard first, it's easiest that way.

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

You can center all your elements ,if you hide the status bar,which can be achieved by add the following to your Info.plist:

<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

And your ViewController would look like this:

You can see more ways to hide the status bar in this link :hide Status bar

edited May 23 '17 at 12:31

Community

1
1

answered Apr 08 '16 at 14:19

wj2061

6,778
3
36
62

navigationbar items not centered vertically

4 Answers4