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

Posted 2023-03-15

【中文标题】响应式设计 Xcode 6 - 如何设置约束以使您的设计响应式？

【英文标题】：Responsive design Xcode 6 - How to set constraints to make your design responsive?

【发布时间】：2015-05-10 08:18:24

【问题描述】：

让我们考虑以下示例：

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

1)

a) 为每个设置前导空格和尾随空格

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

2)

a) 为每个设置前导空格和尾随空格

b) 设置纵横比 3:1

设置除最底部之外的顶部和底部空间（将其固定到底部会导致约束冲突）

3)

a) 设置纵横比 3:1

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

我认为第三个选项会起作用，因为一旦知道垂直空间，它应该设置适当的宽度以满足纵横比约束。然而，这并没有奏效，Xcode 决定只调整条带的大小而不考虑纵横比。

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

第一个选项完全错误，因为没有纵横比，条纹有各种形状。

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

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

【问题讨论】：

如果不知道您到底想达到什么目标，将很难提出解决方案。这三个应该总是在屏幕的顶部吗？他们应该有一个固定的纵横比还是一个固定的高度，是每个固定之间的空间...

【参考方案1】：

我的做法是：

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

这样第一个的大小是固定的，其他的则依赖于它。

【讨论】：

我故意避免设置条纹的宽度和高度，因为我希望它们在每个屏幕尺寸上都有不同的尺寸。我想设置这些值会使条纹的大小变为静态，或者我错了？

这是一种误解。我不是要设置宽度/高度，而是要设置为相等。您通过为第一个定义纵横比、领先/滞后来隐式设置它。其他人只是依赖。 equal width & equal hight 将对齐其他人。没有固定尺寸:)

啊，好的，我会在几分钟内试一试，然后给您回复结果，谢谢！:)

嗯，这真的很接近完美。有没有办法将第一个的顶部间距设置为显示尺寸的百分比而不是固定的点数？猜猜这会完全解决我的问题吗？

我想这里的乘数会有所帮助，但是应该有什么值呢？