自动布局以设置六个正方形图像 [英] Autolayout to set six square images

问题描述

我想实现自动布局以设置六个正方形图像，即使屏幕尺寸已更改，这些图像也始终处于正方形. 我尝试了太多的变体，但没有这样做. 在所附的图片中，我分享了将应用自动版式的示例视图.

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.

推荐答案

您在这里不需要任何视图包装或其他有趣的业务，您可以完全在每个项目之间的IB或AL约束范围内完成此操作. 技巧"是考虑每个项目之间的关系，并同时使用常量和乘数.

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.

• 这里的每个正方形都是1:1的比例.
• 橙色正方形为2:1，第一个黄色正方形为8，填充为8.
• 橙色正方形固定在左侧，第一个黄色正方形固定在右侧.
• 所有其他黄色正方形是第一个正方形的相对宽度.

• 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.

这也是情节提要文件:

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).

这篇关于自动布局以设置六个正方形图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！