XCode 5 - Center horizontaly several buttons width AutoLayout

I'm a beginner in iOS development and I need some help please.

I have a view which contains 4 buttons. I would like to center vertically these button on the screen (but keep spaces between each button) using Auto Layout.

There is how my screen looks like :

 -------------------------
|     NAVIGATION BAR      |
|-------------------------|
|                         |
|  |------|     |------|  |
|  |      |     |      |  |
|  |      |     |      |  |
|  |------|     |------|  |
|                         |
|  |------|     |------|  |
|  |      |     |      |  |
|  |      |     |      |  |
|  |------|     |------|  |
|                         |
|                         |
|                         |
|                         |
|-------------------------|
|         TAB BAR         |
 -------------------------

How can I fix this?

Solution

This is very easy using auto layout, as auto layout is built for cases like these (even the string and struts model would solve this quite easily).

1. All you have to do is create a wrapper UIView that contains the buttons. The view should have clear - transparent background, so you will not see it at all.

 -------------------------
|     NAVIGATION BAR      |
|-------------------------|
|  ---------------------  |
| ||------|     |------|| |
| ||      |     |      || |
| ||      |     |      || |
| ||------|     |------|| |
| |                    || |
| ||------|     |------|| |
| ||      |     |      || |
| ||      |     |      || |
| ||------|     |------|| |
|  ---------------------  |
|                         |
|                         |
|                         |
|                         |
|-------------------------|
|         TAB BAR         |
 -------------------------

2. Then you have to set the constraints of that view to center horizontally and vertically. This is the result below:

 -------------------------
|     NAVIGATION BAR      |
|-------------------------|
|                         |
|                         |
|  ---------------------  |
| ||------|     |------|| |
| ||      |     |      || |
| ||      |     |      || |
| ||------|     |------|| |
| |                    || |
| ||------|     |------|| |
| ||      |     |      || |
| ||      |     |      || |
| ||------|     |------|| |
|  ---------------------  |
|                         |
|                         |
|-------------------------|
|         TAB BAR         |
 -------------------------

So when the view will be higher, you will get this result:

 -------------------------
|     NAVIGATION BAR      |
|-------------------------|
|                         |
|                         |
|                         |
|                         |
|  ---------------------  |
| ||------|     |------|| |
| ||      |     |      || |
| ||      |     |      || |
| ||------|     |------|| |
| |                    || |
| ||------|     |------|| |
| ||      |     |      || |
| ||      |     |      || |
| ||------|     |------|| |
|  ---------------------  |
|                         |
|                         |
|                         |
|                         |
|-------------------------|
|         TAB BAR         |
 -------------------------

You can do this both in Interface Builder or in code, as you wish. And I do suggest that you read some resources on how auto layout works.