问题
I want to implement autolayout to set six square images that are always be in square even if screen size is changed. I have tried too many variations but fail to do so. In attached image i share sample view that autolayout will be applied.
回答1:
You don't need any view wrappers or other funny business here, you can do it purely within IB or AL constraints between each item. The 'trick' is to think about the relationships between each item and to use both constants and multipliers.
- Each square here is 1:1 ratio.
- The orange square is 2:1 with to the first yellow square, plus 8 for the padding.
- The orange square is pinned to the left, the first yellow square is pinned to the right.
- All the other yellow squares are relative width to the first one.
Here's the storyboard file too:
https://www.dropbox.com/s/pk8iwj1beamkxtp/SO_Solution-20151215_2.storyboard?dl=0
Based on a comment, I added one wrapper view to make it easy to apply size classes if you want the entire thing to always be visible. (also makes it easier to drop into another storyboard).
回答2:
Okay, i'll give you an easy way to achieve this, but this is my implementation, and i'm pretty sure there are a lot of implementations easier.
First, create a empty subview, and add the constraints so the view will always be a square in the top left corner:
Trailing Space to superview >= 0
Trailing Space to superview = 0 @750
Top Space to superview = 0
Left Space to superview = 0
Bottom Space to superview = 0 @750
Bottom Space to superview >= 0
Aspect ratio : 1
Now add in this square the square in the top left corner and the topRightView :
// TopLeftView constraints :
Leading Space to superview = 20
Top Space to superview = 20
Aspect ratio : 1
// TopRightView constraints :
Trailing Space to superview = 20
// Contraints between TopRightView and TopLeftView
Align bottom
Align top
Equal Width
Horizontal spacing = 20
You can now set the ratio between the squares, by setting the multiplier value of the "equal width" constraint. Let's use a 1/3 multiplier.
Let's add the bottomLeftView now. In order to not over constraining our view, we don't need to set a multiplier between the square height and this view height. We know the space on the right of the green square is equal to the space below it, so let's use only spacing and alignement constraints.
// BottomRight constraints:
Bottom Space to superview = 20
// Contraints between BottomLeftView and TopLeftView
Align left
Align right
Vertical spacing = 20
The last view to add is the BottomRightView, and alignment constraints will works well :
// Contraints between BottomRightView and BottomLeftView
Align top
Align bottom
// Contraints between BottomRightView and TopRightView
Align left
Align right
Here we are. Now you just need to add squared subviews in top and bottom of TopRightView, and at left and right of BottomLeftView. You can also change the ratio with a single variable, which would not be possible if you had set a ratio constraint between TopLeftView and BottomLeftView.
来源：https://stackoverflow.com/questions/34289803/autolayout-to-set-six-square-images