19

I have 5 items on the top of my View Controller, and I am trying to space them evenly with autolayout. For the left item (back button), I added a constraint to be 15px from the left border, and for the right item (camera), I added a constraint to be 15px from the right border. Then, I set up the center item (0:01) to align center x so it is in the middle. Lastly, I selected "Reset to suggested constraints" for the ... and the flash item.

Upon looking at it in the iphone 5 and 4, it looks great. As you can see, all the items are evenly divided:
enter image description here

So far, everything is going smoothly. HOWEVER, when I test on the iphone6 and iphone6+, the "..." and the flash symbol are not centered between the < and the 0:01, as depicted: enter image description here

How do you center an item between two neighboring items? Aka, how to I center the "..." to be exactly in between the < and 0:01?? This simple task is taking me hours, and I don't understand why Xcode doesnt have a center between two neighbors.

Any help would be greatly appreciated!

Josh O'Connor
  • 4,694
  • 7
  • 54
  • 98

2 Answers2

33

The only way I have figured out how to do this is to create a container that holds the thing you want to center between the two items. That container should have the same trailing and leading amounts and then just center your "thing" in that container.

In the example below, the blue box would represent your orange "..." and the dark grey box would represent the container just used for centering. Once the layout works, just set the container to have a clear fill.

enter image description here

picciano
  • 22,341
  • 9
  • 69
  • 82
  • Awesome. I will try it out. I hope Apple figures out an easier way to figure this out in the near future. – Josh O'Connor Sep 16 '15 at 23:06
  • Take a look at [this question](http://stackoverflow.com/questions/13075415/evenly-space-multiple-views-within-a-container-view) for more general solutions (i.e. for spacing `n` views). – ahmacleod Sep 17 '15 at 00:55
  • 1
    I use this technique several times. So, is it still impossible to achieve this without the container? – Seto Dec 20 '17 at 09:29
  • 1
    this container practice is really annoying, did you find an other solution yet? – PaFi May 08 '18 at 19:16
0

Just to add: If you use UIImageView as container, then it is already transparent as you don't populate it with an image. Also, the top and bottom handles are easy to position

Uwe
  • 65
  • 4
  • 1
    yes, but I recommend using a view as a container as standard practice. – Josh O'Connor Jul 10 '17 at 20:06
  • We're past the VB6 days I guess.. UIView is intended as the "standard" container view; UIImageView serves a completely different purpose. – Mark Feb 18 '19 at 16:25