Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the height of Navigation Bar in iOS 7?

I 've just created a simple iOS 7 app using the default Master Details template.

In the MasterViewController.m, viewDidAppear method, I logged for

self.navigationController.navigationBar.frame.size.height self.navigationController.navigationBar.frame.origin.y 

and received 44 and 20 accordingly. This seems weird, because from what I read, the Navigation Bar in iOS 7 should be 64 point height and start at 0 point, so that it sits underneath the Status bar. What I read are

1) iOS 7 UI Transition Guide

Because the status bar is transparent, the view behind it shows through

2) Using Background Image in Navigation Bar

If your app uses a custom image as the background of the bar, you’ll need to provide a “taller” image so that it extends up behind the status bar. The height of navigation bar is changed from 44 points (88 pixels) to 64 points (128 pixels).

like image 714
onmyway133 Avatar asked Nov 23 '13 09:11

onmyway133


People also ask

What is navigation bar height?

Personally I feel most comfortable using a navbar height of 64px. It is enough height to accommodate a logo, and there is room enough to use text in combination with symbols.

What is the size of navigation bar?

The height of the bottom Navigation bar is 48dp (in both portrait and landscape mode) and is 42dp when the bar is placed vertically. That's even better.

Can you change iPhone navigation bar?

A user changes the navigation bar's style, or UIBarStyle , by tapping the “Style” button to the left of the main page. This button opens an action sheet where users can change the background's appearance to default, black-opaque, or black- translucent.


1 Answers

There is a difference between the navigation bar and the status bar. The confusing part is that it looks like one solid feature at the top of the screen, but the areas can actually be separated into two distinct views; a status bar and a navigation bar. The status bar spans from y=0 to y=20 points and the navigation bar spans from y=20 to y=64 points. So the navigation bar (which is where the page title and navigation buttons go) has a height of 44 points, but the status bar and navigation bar together have a total height of 64 points.

Here is a great resource that addresses this question along with a number of other sizing idiosyncrasies in iOS7: http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

like image 111
poff Avatar answered Oct 11 '22 06:10

poff