Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center an item between two other items in autolayout (iOS)

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!

like image 310
Josh O'Connor Avatar asked Sep 16 '15 22:09

Josh O'Connor


1 Answers

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

like image 126
picciano Avatar answered Nov 14 '22 10:11

picciano