Search code examples
iosios7ios8autolayout

How to position custom tab bar buttons percentage wise across the x axis?


I have a custom tab bar with my own images as buttons. The problem is adapting this for auto layout - I know to stick the leftmost and rightmost buttons to their respective sides but for the middle buttons I need them to be x * #of-button/total-buttons-minus-1.

So, for instance, if I have 4 total buttons across my tab bar, I need the second button to be 1/3 (minus half of its width, which is a separate issue) ways along the tab bar starting from the left side and the second button to be 2/3 of the way across the tab bar.

How can I program this without code using auto layout?

Below is an attached image that shows what I'm dealing with.

custom tab bar with auto layout


Solution

  • You have to make several simple steps:

    1. Place transparent views between each two buttons
    2. For each transparent view left and right spacing to buttons set to 0

    https://i.sstatic.net/JqhrJ.png

    1. Set each view to have same width. Select all transparent views by holding command and clicking on each view and then select "Equal Widths"

    https://i.sstatic.net/olMwH.png