IOS uses constraint to achieve 2 controls the white space is equal

It's a little messy, let's take a look at the picture.

In fact, the purpose of this constrant is to control the size of white space above and below the two square controls.

For each block, the blanks above and below them are the same. This "center" design is visible everywhere. A control wants to achieve this centering and simple, just need to create a reference view, such as here H1 or H2, and then adjust the height of the reference view, finally set the control and the reference view in the middle of the alignment. 2 consecutive controls want to implement, just a little trouble, need 2 reference view, the specific setting method, please refer to. Note that the m,n,height here are fixed values. So the corresponding H1 and H2 can unlock a unique set of values, so the central y-coordinate of the 2 controls is unique, meaning the set of constraint can achieve the goal!

But the above method is not good, here is mainly to give a judge can use constraint to determine the location of the method, here is the use of equations, to solve the specific value.

Look at a really good way to see

Here the height of the 2 controls is fixed, one is M, and the other is N. After adding 3 auxiliary view, these 3 view does not set the specific height, but uses constraint to string up these 5 view, and sets 2 constraint, thus, has the following equation

M+N+H1+H2+H3 = Total Height

H1 = H2 = 0.3*h3

This will solve the h1,h2,h3, so the position of the control is determined, and the blank spacing of the 2 controls can be adjusted according to our needs.