如何在这些Uiimage视图中使用Xcode自动布局？

Question

I'm trying to use auto layout,to make these UiImages views like in the image below, but its always in a mess in one of these devices screens 3.5", 4", 4.7"

so what I have to do to make it like this ?

Answer 1

If you want equal width and equal height of each image then you can add the constraints as shown in below image and if you want to use whole screen space (ie height and width of image will be different) then select all the four pins and select Equal Widths and Equal Heights check box (keep Aspect Ration check box unselected)

Answer 2

I think you are missing some constrains, you can do step by step. Lets number the imageview for easy reference

imgv1 imgv2 imgv3

imgv4 imgv5 imgv6

imgv7 imgv8 imgv9

imgv10 imgv11 imgv12

Drap and drop imgv1, 2 , 3 to the storyboard and place them adjacent to each other. cmd+right click on the three imageview and set constrains(it should be to the nearest neighbour do not forget to untick the checkbox for "from margin"). Based on the figure in the question constrains should be

top - 40, left - 20, right - 20. I am assuming that all imageview are of equal height and equal width, in that case select the three imageview and select equal width and equal height constrain. Dont update the frames yet. It will show error dont worry we will solve it.

Now for 2nd, 3rd, 4th row.

Drag and drop the imageview to storyboard and place them as you want ie.

imgv4,5,6 imgv7,8,9 imgv10,11,12

then select all these imageview(4-12) and add constrains to it. The constrains should be

top - 20, left - 20, right - 20

and as all the image view are equal in height and width, select all the imageview that is imgv(4-12) and imgv(1,2,3) and add the constrain equal height and width.

There is one more thing missing that is we have to add bottom constrain to the last row ie.(imgv10,11,12) for that select these three imageview and add bottom constrain(remember all constrains are from the nearest neighbor).

Then at last update the frames in the controller. It should look like the image in the question.