响应式设计 Xcode 6 - 如何设置约束以使您的设计响应式?

Responsive design Xcode 6 - How to set constraints to make your design responsive?

让我们考虑以下示例:

这是 3 个条纹,每个条纹的宽度为 450,高度为 150。我想让它响应,这基本上意味着我希望它们根据屏幕尺寸调整大小。我尝试了三组不同的约束,我在下面列出它们:

1)

a) 为每个

设置前导 space 和尾随 space

b) 为每个设置顶部和底部 space

2)

a) 为每个

设置前导 space 和尾随 space

b) 设置纵横比3:1

设置顶部和底部spaces 除了最底部的(固定到底部会导致约束冲突)

3)

a) 设置纵横比3:1

b) 为每个设置顶部和底部 spaces

我认为第三个选项可行,因为一旦垂直 space 已知,它应该设置适当的宽度以满足纵横比约束。但是,这没有用,Xcode 决定只调整条纹的大小而不考虑纵横比。

第二个选项接近但仍然不合适。没有底部 space 整组条纹的垂直位置会因屏幕尺寸而异。

第一个选项是完全错误的,因为没有宽高比条纹有各种形状。

您能否为我提供有关如何处理此类问题的具体或一般性建议? iOS 响应式设计的一般规则是什么。我想解决这个简单的示例性问题会告诉我很多关于响应式设计的方法。

编辑:我想要实现的是:固定纵横比和固定条纹之间的 spaces。大小、尾随和前导 spaces、顶部和底部 spaces 应在每个屏幕上有所不同,但在每个屏幕上应保持相同的比例。基本上,无论屏幕尺寸如何,这看起来应该几乎相同。

我的做法是:

  • 为第一个设置前导和滞后间距
  • 为第一个设置顶部间距
  • 将第一个的宽高比设置为3:1
  • 将所有的宽度和高度设置为彼此相等(没有固定大小!)
  • 将垂直间距设置在 1,2 和 2,3 之间
  • 全部水平居中

这样第一个的大小就固定了,其他的就依赖于它了。