UINavigationBar using flexible spaces to distribute bar button items evenly - swift

Question

In an app that is based on a UINavigationController, the navigation controller's toolbar is turned on so that there is the UINavigationBar at the top and the UIToolbar at the bottom.
For the root view controller there is obviously no back button, and there is also no title (and no title view). I have set the title = nil.
This same root view controller has a lot of bar button items in the navigation bar's rightBarButtonItems. Since there is nothing else in the navigation bar apart from these items, I would like them to be centred and evenly spaced across the navigation bar. This way, they would look less crowded, be less likely to touch the wrong button, looks nicer in general, and would also match the look of the toolbar at the bottom.
In the bottom toolbar, this is easily achieved by using flexible space between each item (and before/after the first/last items in my case).
For the top navigation bar, flexible spaces (and fixed spaces) appears to be ignored.
How can I get my bar button items in the navigation bar to spread out across the entire bar when there is nothing else on the bar?
Or is the only option to hide the bar, and actually place an independent toolbar at the top in its place? (Would be a shame to have to resort to this, as the nav bar is already there and very nearly doing the job and is automatically managed.)

Answer 1

Here's how I've accomplished an approximation of using flexible spaces in a navigation bar to evenly space out all of the bar button items.
NB: As it stands, it only works for bar button items with images. Text-only items do not work, as it uses the image size to determine the widths of the items. It should not be too difficult to updated it to work with text or text/image items.
It works by summing the total widths of all the images in all the bar button items, and subtracting this from the size of the bar to get the amount of space remaining. Then divide this by the number of items (plus one as I want a space before and after all items) and adjust for screen scale.
Set this to the width of a new FIXED space item.
Add the items back in, with the new fixed space before, between and after each of them.
func updateNavbarItemSpacing(forBarWidth width: CGFloat) {
guard let oldItems = navigationItem.leftBarButtonItems else { return }
var nonSpaceItems: [UIBarButtonItem] = []
var usedWidth: CGFloat = 0.0
var itemCount:CGFloat = 0.0
for item in oldItems {
if let itemWidth = item.image?.size.width {
usedWidth += itemWidth
itemCount += 1
nonSpaceItems.append(item)
}
}
let spaceWidth = ( ( width - usedWidth) / itemCount + 1 ) / UIScreen.main.scale
let fixedSpace = UIBarButtonItem.fixedSpace(spaceWidth)
var newItems: Array<UIBarButtonItem> = [fixedSpace]
for item in nonSpaceItems {
newItems.append(item)
newItems.append(fixedSpace)
}
navigationItem.leftBarButtonItems = newItems
}
This function should be called whenever the items are updated, AND whenever the navbar size changes. Eg, don't forget to include it in the view controller's:
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
updateNavbarItemSpacing(forBarWidth: size.width)
}
Working well in testing so far. Perfect in portrait mode. But in lasdcape orientation, I end up with a little extra space at the end. Yet to figure this one out.

Answer 2

I've found an even simpler way to achieve this now.
This version simply divides the available space between the number of items.
Subtracting 2 points seems to work better - without this the results are not as pleasing in a crowded toolbar. I guess this allows for a tiny margin between each item?
Note that if the text/image of some items is wider than other items, then the spacing between each will not be even. So this method is best suited to items that have similar widths.
func updateNavbarItemSpacing(forBarWidth barWidth: CGFloat) {
guard let items = navigationItem.leftBarButtonItems else { return }
if items.count == 0 { return }
let itemWidth = barWidth / CGFloat(items.count) - 2
for item in items {
item.width = itemWidth
}
navigationItem.leftBarButtonItems = items
}
Call the above after setting the navigationItem's left toobar items.
Also, for correct behaviour when rotating the device, call it in the view controller's:
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
updateNavbarItemSpacing(forBarWidth: size.width)
}