3

I'm getting a bit confused with navigation bars and toolbars when migrating from iPhone to iPad, since toolbars in iPad seem to be moved to the top, as described in iOS Human Interface Guidelines, so I'm not clear about the difference between navigation bars and toolbars in iPad devices. I have doubts about them and the buttons and controls that can be displayed in each case, and I don`t find any example that solves them:

1) Is it possible to "mix" a navigation bar and a toolbar, and display back buttons and toolbar items at the same time? For instance, I found that Mail app has toolbar items on the right side of its split view, and a navigation bar with back button in the left side of the split view, so back buttons and toolbar items are always in separated bars in this app:

Mail

Similarly, Settings app displays a navigation bar with back buttons in the right side of the split view but no toolbar items:

Settings

Where could I find an example of an app with a bar displaying both navigation back buttons and toolbar items in iPad? Or is it just not possible?

2) Is it possible to display a segmented control in a navigation bar with a title, instead of being in a toolbar without title like this? (iOS Human Interface Guidelines document says it is a toolbar):

Segmented

3) Let's say I have a split view similar to Settings app. Is it valid, or correct, to display a toolbar on the right side sometimes, and a navigation bar another times? Or should I always display the same type of bar througout the app?

Thanks

Improve this question
3
  • This note to revisit. My short offering, without reviewing the HIG again, would be: On the phone, the "toolbar as footer" is as much a restraint of the screen as anything. For the iPad, it's kind of a different beast, and relies on a "tab bar as footer" concept. In the second example, in my opinion, the segmented control is the title and a variation on the tab bar. For the 3rd part, I would recommend switching to a "toolbar" in the header when presenting a view modally; not from adding a view to the stack of a navigation controller. However, some vendors break away from this: Facebook.
    – Josh Bruce
    May 26, 2013 at 1:29
  • @JoshBruce So, what is the actual difference between a nav bar and a toolbar in iPad? Segmented controls such as the one in 3rd pic are within nav bars in iPhone, since in iPhone the difference between bars is clear: navigation bars are placed at the top, and toolbars at the bottom... but if in iPad both are placed at the top, and in a nav bar you can have buttons and another controls in addition to the "back" button, the difference is just a programmatic concern?
    – AppsDev
    May 26, 2013 at 8:46
  • In fact, I find that I'm not able to identify when I'm presented a toolbar or a nav bar in iPad if there is no "back" button or toolbar items as the ones in 1st picture... In 3rd picture, for example, I know that it is a toolbar because documentation said it is a toolbar, but I'd doubt if it is a nav bar or a toolbar otherwise
    – AppsDev
    May 26, 2013 at 8:52

3 Answers 3

Reset to default
1

For the programmers, it's like this:

A nav bar is something at the top of the screen that controls a stack of views. Each view other than the first will have a back button. If you put extra buttons on there, it's still a nav bar.

A toolbar is a bar at the bottom of the screen, that only contains buttons.

For a programmer they are different classes of object. And whilst they look very similar, the toolbar has an additional separator at the top. And a navbar has a centred title.

The top item here is a nav bar (the bottom one without the back button). And the bottom one is a toolbarn.

enter image description here

The Apple HIG does confuse the two. But I believe it's best to follow the actuality of what your programmers will be doing.

Improve this answer
1
  • +1 for nav bar being there to control a stack of views. However, I do not think placement (top or bottom of screen) is a differentiation. For example, on iPad many of the top bars are toolbars insofar as they do not control a navigation stack; however, there may be a button which presents a view that does. #2 in the examples in the question for example would present a popover listing genres which may or may not have views that are popped onto or off of the stack.
    – Josh Bruce
    May 26, 2013 at 19:53
0

A navigation bar is a class which could, even though it does not, be a subclass of the toolbar. Both have a set of items (usually buttons) which can be manipulated. The navigation bar has the additional capability of pushing or popping a view controller onto or off of the presentation stack. Further, the navigation bar has a title label by default. However, if you wanted to for some reason, you could replicate the layout of a navigation bar with a toolbar class.

On the phone, again, most likely due to screen real estate along the horizontal axis, a toolbar is generally placed at the bottom of the screen. However, with the iPad, you are not dealing with the same constraints and may decide to move the toolbar to the top of the screen.

For example, in Mail.app you have a split view with the left occupied by the navigation bar - which pushes and pops views onto the stack - and, a toolbar which is there for feedback (when was the last time this view was updated). However, on the view in which you are reading an e-mail, the navigation bar for the handheld device has been replaced by the toolbar, which does not push or pop views on or off the stack.

Photos is kind of an interesting case study because the toolbar elements on the iPad are brought into the navigation bar at the top of the screen. And the toolbar is replaced by a different toolbar - thumbnails - something which the phone does not allow due to its narrower form factor.

In a nutshell, I believe Steve has identified the major difference between the toolbar and the navigation bar - the navigation bar has a purpose, pushing and popping views onto and off of the stack. My general rule, and the one which seems to be used across most (if not all) of the native apps is, if you have the room to put the buttons in the top "toolbar" area - do so. If not, have the overflow go into the bottom "toolbar" area. The title of the view, should be present at the top - and never the bottom. Whether you decide to use the actual UIToolbar or UINavigationBar classes is primarily dictated on whether you plan to use the class to push or pop views on or off the stack. Pages and Photos are interesting case studies for these general rules because one has all of the "action buttons" in the top area for both tablet and handheld, while the other does not.

Hope that helps.

Improve this answer
0

1) Is it possible to "mix" a navigation bar and a toolbar, and display back buttons and toolbar items at the same time? In iPad, only had navigation on one side. There has to be an extraordinary reason to allow drilling down on both side. Yes, you can include toolbar items on a navigation bar, UX wise and dev wise.

2) Is it possible to display a segmented control in a navigation bar with a title, instead of being in a toolbar without title like this? Yes, but you will want to be careful how its designed and it may be a bit tricky.

3) Let's say I have a split view similar to Settings app. Is it valid, or correct, to display a toolbar on the right side sometimes, and a navigation bar another times? Or should I always display the same type of bar througout the app? Navigation Bar on one side throughout the app and you can mix Navigation bar without drilling down and toolBar on the other side.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.