Search code examples
iosxcode-storyboard

Fixed Space Bar Button Item places buttons outside of screen


I want to implement a toolbar in my iOS app, which displays the App's logo in the center of the toolbar and shows a + button on the right side.

So, I placed a Toolbar element on the view, then two bar button items (logo and add symbol) and placed two flexible space bar button items between them.

It now looks like this:

Storyboard

While this looks exactly like the desired behavior, it does not look like this in the simulator:

Simulator Portrait Mode

When testing the app with the iPhone 6s, the logo part is a little bit more to the left, but still not in the center. I am obviously doing something wrong, because I thought the point of "flexible space bar button items" is to dynamically adapt to different resolutions. What is it?


Solution

  • You should be using a UINavigationBar instead of a UIToolbar.

    UINavigationBar is for the top of the screen since it has a shadow on its bottom edge. It also supports having a title/titleView that is centred.

    UIToolbar is for the bottom of the screen since it has a shadow on its top edge. It does not have properties for adding a title so you would have to do it manually. Also, flexible space lays out the elements so each flexible width item has the same width.