如何使用自动布局创build总宽度的百分比?

我需要创build三个dynamic列,每个列都有一个固定的总宽度百分比。 不是三分之一,但不同的价值。 例如,下图显示了三列:第一列宽42%,第二列宽25%,第三列宽33%。

对于控制器600像素,分别是252,150和198像素。

然而,对于任何后续的显示尺寸(即iPhone 4横向(960宽)或iPad 2纵向(768宽)),我希望相对百分比是相同的(不是上面引用的像素宽度)。

有没有办法做到这一点使用故事板(即没有代码)? 我可以在代码中轻松完成这项工作,但我的目标是尽可能多地将这种显示逻辑放入故事板中。

在这里输入图像说明

如果如你所说,你知道如何用代码来做,那么你已经知道如何在故事板上做到这一点。 这完全是相同的约束,但是你是在视觉上而不是在代码中创build它们。

  1. select一个视图和它的超级视图。

  2. selectEditor – > Pin – > Widths同样限制宽度等于superview的宽度(实际上canvas底部的“pin”popup对话框效果最好)。

  3. 编辑约束并将乘数设置为所需的分数,例如0.42。 对于其他观点也是如此。

一张图片胜过千言万语,我已经在一个github项目中使用无代码实现了你的布局,你可以下载和检查:

https://github.com/mattneub/percentageWidthsInStoryboard

我认为这可以更详细地解释,所以它可以更容易地应用于在超视图内需要固定百分比布局的任意数量的视图。

最左边的看法

  • 锚定SuperView.Leading
  • SuperView.Height中将其固定百分比定义为乘数

中级意见

  • SuperView.Height中将其固定百分比定义为乘数
  • 把它的left邻居的右边

最右边的观点

  • 没有定义一个固定的百分比(这是剩余的可用视图)
  • 把它的left邻居的右边
  • SuperView.Trailing right

所有视图

  • 通过锚定到Top Layout Guide.Top来定义它们的非固定高度。 Top Layout Guide.TopTop Layout Guide.bottomTop Layout Guide.bottom 。 在上面的答案中,注意到这也可以通过设置与相邻视图相等的高度来完成。