Issues with AutoLayout

Question

The Bar at the top is a view in a view that contains 10 views, each the same size however I am unable to get them to look like this on the simulator. What constraints settings should I be using?

Also is there a better way to have visually represent all of these boxes without using views? it can't be an image as the individual views will visible depending on remaining battery.

What I am using: I am not currently using any constraints as I was only able to make it worse.

What it is doing now:

portrait:

Landscape:

Answer 1

You just need to give leading, trailing and equal-widths constraints between adjacent buttons.

Check my answer here, I've explained with screenshots and steps to achieve this: What is the best approach for horizontally aligning 5 buttons with Autolayout

Let me know if you want more clarity.

Answer 2

Select all the bars at once and then apply the following constraints:

Check the equal width. which will make all bar of same width. 5 is the margin from top, bottom, center, leading and trailing.

Press Add x Constraints.

At the end update frame by pressing option + command + equal simultaneously.

Answer 3

The first has left, up and bottom constraints and then it is linked to next one on the right and the next is linked to the next and so on with the horizontal leading option.