约束不起作用

Question

I am not sure why but I have having so much trouble with constrains and auto layout. I have the below view and I want to make it display as is shown but every single approach I take to get seems to be incorrect.

I have been following this tutorial online Auto Layout Tutorial in iOS and I am rather trying to describe my constraints. Following this technique this is what I have:

Description of my constraints.

Label:

• Centered in the view
• 51 from the top

All images:

• Must have equal height and equal width.
• Are separated from the left and right by a 0 gutter.
• All inner gutters separating the images are 12.

I have also included my storyboard. storyboard link

Answer 1

为此，您只需要声明第一个imageview的高度和宽度，并且ViewController使用相等的高度和相同的宽度，然后更改乘数默认值，将其调整为1即可调整大小，然后对于其余的imageview则给定相等的宽度和相同的高度第一个imageview。

Answer 2

If you want keep height and width constant , don't pin it, just use horizontal centre constraint. Pin it up using auto layout , hope this is helpful.

Answer 3

You are set image height and set image bottom constraint and does not set label height that you are many choice

• Set your label height because you run iPhone 4 or 4s that your label doesn't display.

• remove your image bottom constraint because you are set fix image height.

• you image doesn't fix height that remove your set image height and all image select and set equal height constraint (all image height same).

Answer 4

Better You should move that four image views into a uiview(childView) .Make sure that 4 image views are the subviews of UIView.

-Add equal width and hight constraint to SuperView from the childView. - Add multiplier value for the EqualHight and Equal Width constraints by selecting both constraints on storyboard(like 1:2.1,1:2.2).it may keep the same distance in all orientation

• Add Y position and X position by trailing space and leading space, centre vertical in container.

• Then Select the 4 uiimageviews and make sure they have same width and hight,after that

• select 4 image views then click the pin button and check the equal width and equal hight.

• Add leading ,top and trailing space for image1

• [1,2]

  [3,4]

• add trailing and top space for image 2

• add leading ,top and bottom space for image 3
• add trailing ,top and bottom space for image 4,