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

时间:2015-05-10 08:18:24

标签: ios storyboard autolayout

让我们考虑以下示例:

enter image description here

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

1)

a)为每个

设置前导空格和尾随空格

b)为每一个设置顶部和底部空间

2)

a)为每个

设置前导空格和尾随空格

b)设置宽高比3:1

设置除最下面的空格之外的顶部和底部空格(将其固定到底部会导致约束冲突)

3)

a)设定宽高比3:1

b)为每一个设置顶部和底部空间

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

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

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

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

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

1 个答案:

答案 0 :(得分:1)

我的方法是:

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

这样,第一个的大小就会被修复,其他大小则依赖于它。