在iOS中使用自动布局将视图居中放置在相邻视图之间

12

我试图使用界面构建器中的约束(自动布局)来布置屏幕设计,并希望避免编写约束条件,但我想我会接受任何一种情况的答案。

我在一个顶级视图中包含两个子视图。我想要固定第一个子视图到屏幕顶部的垂直距离(我已经成功完成了这个 - 垂直间距约束的常见用例)。我希望第二个子视图在第一个子视图底部和屏幕底部之间的距离的中心浮动(垂直方向)。其想法是设计能够对 iPhone 3.5 英寸与 4 英寸的尺寸做出响应。

我很难定义一个或一组约束条件来实现这一点。

我尝试在第二个子视图与其邻居(第一个子视图)的顶部和父视图的底部之间设置垂直间距约束的不等式,并调整这些约束的优先级。

在 SO 的几篇相关帖子中提出的一个想法是使用一个固定在屏幕底部并固定在第一个子视图底部边缘的容器,然后在容器中居中放置第二个子视图。我希望尽可能避免复杂化视图层次结构,但也许这是不容易避免的。

有什么想法或建议吗?


在界面构建器中,您可能需要使用容器。如果您愿意在代码中调整约束条件,那么可以添加比例约束条件,这样您就可以将顶部和底部空间设置为相等,从而实现您想要的效果。 - sapi
我刚刚尝试了10分钟,但没能完成。也许只是我自己的问题,但到目前为止,我只发现两种在IB中使自动布局工作的技巧:1)随意提升、固定和删除元素,直到它偶然达到我想要的效果。经过一段时间后,转向技巧2),即放弃并编写代码。 - danh
你在最后一段提到的建议是实现这个功能最简单的方法。 - rdelmar
1个回答

17

更新

这个答案描述了如何在Xcode 6.0中实现此操作(可能也适用于Xcode 5.0和5.1)。

原始内容

如果您想使用自动布局来实现此操作,必须添加至少一个间隔视图。它不必是垂直居中视图(或任何其他视图)的父视图,因此对您的视图层次结构影响很小。

我建议不要在Xcode 4.6.3的Interface Builder中尝试设置约束条件。这太痛苦了。但是,如果您真的必须这样做,这是可以做到的。

  1. 从上方视图的底部边缘到父视图的底部边缘创建一个间隔(一个普通的UIView)。将其设置为隐藏。给它与顶部贴合视图、根视图的左边和底部边缘之间的约束,并固定其宽度。我的间隔宽度为10:

    spacer constraints

  2. 添加您的中间视图(这里是一个按钮)。给它一个“在容器中水平居中”的约束条件。然后选择中间视图和间隔视图,并为它们提供“垂直中心”约束条件:

    middle view constraints

请注意,如果您在IB显示正确的指南时放置中间视图,则它将为您设置这些约束条件。

您可以通过启用后代调整大小(但不包括同级和祖先)并在IB中调整根视图的大小来进行测试。中间视图将保持在顶部贴合视图和父视图底部之间的中心位置:

4-inch screen size

short view


虽然这需要在层次结构中增加一个额外的视图,但比我原本想做的更优雅一些。非常感谢。 - sschubert
在非平凡的情况下需要额外的辅助视图。约束表示两个属性之间的线性关系,因此如果您想要三个属性之间的关系,则必须使用多个约束来实现所需的效果。 - Tricertops

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接