0

I need some help figuring out how to fix the layout of a navigation bar in an iOS app. When adding navigation to 'child' views of a given screen, my approach so far has been to add buttons to the 'leftBarButtonItems' collection of the UINavigation item. As long as the number of buttons doesn't exceed 3 or 4 everything works great.

Good Nav Bar

Unfortunately, I now have a screen that requires additional buttons. Everything seemed to build fine, but when I actually run the application I end up with a jumbled mess like this:

Bad Nav Bar

Is there a better way to layout a UI with nav and toolbar buttons like this? If putting the buttons in the nav bar is actually the correct way, what do I need to do to make the layout handle cases where the content can't fit?

pbuchheit
  • 1,371
  • 1
  • 20
  • 47
  • 1
    If you really need the buttons, you better hide the title of the back button(`ALASKA VISION CLINIC...`). [See this](https://stackoverflow.com/questions/23853617/uinavigationbar-hide-back-button-text) – Ryan Jul 27 '17 at 21:14
  • I agree with @Ryan and have done this in the past. But you could also try to abbreviate the title part to `ALASKA (#100081)` for example. – meaning-matters Jul 27 '17 at 21:21

2 Answers2

2

I wouldn't bother with adding any extra buttons. Users expect most apps to behave in similar ways, and (while this is technically possible) it's an unusual thing to do.

Apple's HIG states:

Avoid crowding a navigation bar with too many controls. In general, a navigation bar should contain no more than the view’s current title, a back button, and one control that manages the view’s contents.

And, even if you choose to ignore Apple's HIG, this will certainly won't be good for accessibility. Your users can (and will) change the text size with Dynamic Type - so your assertion that it's OK if the "number of buttons doesn't exceed 3 or 4" will be proven false by someone.

You'd be better to add a toolbar instead, or find some other way of providing those features.

Matthew
  • 1,363
  • 11
  • 21
  • Yeah, I hadn't really considered a toolbar, but that looks like the way to go. Now the question becomes how to organize the buttons. Of the five buttons, three navigate to sub-views and clearly belong in the toolbar. The other two however I'm not sure. One is a 'delete' button to cancel the current order. The other is a 'checkout' button to submit the order. Which of those (if either) belong in the toolbar and which should stay in the navbar? – pbuchheit Jul 28 '17 at 13:29
1

The navigation bar often has the title of the previous view on the left side. The right side contains a control, like Edit or a done button, to manage content within the active view.

Navigation bar Example

Apple documentation recommends to avoid crowding a navigation bar with too many controls.

A navigation bar should contain no more than the view's current title, a back button, and one control that manages the view's contents.

For the back button you should use the standard one. As for the text-field it should have enough room. If items in the nav bar are crowded consider separation by inserting fixed space by using UIBarButtonSystemItemFixedSpace constant value in UIBarButtonItem. For more information visit the following link.

The way to go when you need 3 or more items is by using either nav bar or toolbars. You can combine both nav bar and toolbars. For more information use apple documentation on toolbars.