Positioning a UISegmentedControl in a button bar

Question

I'm trying to use a UISegmentedControl as a custom right button bar item. Using Interface Builder, when I drag the control into the navigation bar, it gets sized to be quite wide (too wide, considering the segment contents):

I've tried setting the widths of the segments to something that I think looks good and the overall control resizes, but it is pinned to the left side of the original space it was allocated. I can't seem to find a way of moving it from there. Here's a picture of what this looks like in IB in landscape:

and here's what it looks like running on an iPhone 7 Plus simulator in portrait mode:

As you can see, the segmented control is positioned way too far toward the center.

I tried a hack (suggested in this thread) of embedding the segmented control inside another view, leaving the containing view to be full width of the bar button item and constraining the segmented view to be on the right of it's container. That gets it over to the right, but here's the effect of running that on an iPhone 7 simulator (somewhat narrower than the 7 Plus):

Here the problem is that the title, which is supposed to be centered, has been pushed off to the left. I assume that this is because the (transparent) bar button item is taking up so much more width than what is needed just for the segmented control.

Is there some way of getting the right button area of the navigation bar to simply be smaller?

Answer 1

My steps are below:

1.Drag the segment control to navigationbar:

2.Change the segment width:

3.iPhone7 & iPhone 7Plus all looks good: