【问题标题】:AutoLayout: Vertically centering two UIViews in a superview that can resizeAutoLayout:在可以调整大小的超级视图中垂直居中两个 UIView
【发布时间】:2013-07-11 16:06:18
【问题描述】:

我有两个 UIButton,一个在另一个之上,在一个可以调整高度的超级视图中。两个按钮之间应该有一个恒定的垂直间距,但是顶部和底部的间距应该调整大小,以便两个按钮在调整大小时保持在超级视图的中心。

我尝试在每个按钮到超级视图的间距上创建两个小于或等于约束(具有相同优先级),以及按钮之间的恒定垂直间距,如下所示:

(这里小于或等于的原因是因为此视图是在 IB 中为 4" 屏幕的给定高度定义的,但对于 3.5" 屏幕可以缩小。)但是,这不起作用诀窍,正如您在应用程序运行时从屏幕截图中看到的那样:

这几乎就像您希望能够告诉 AutoLayout 这两个约束本身应该具有相等的值,即使它们都设置为“小于或等于”。有什么方法可以做我想做的事情,或者更好的方法吗?

【问题讨论】:

  • 您使用的是 Storyboards 还是 Interface Builder?
  • IB 中的故事板。

标签: iphone ios autolayout


【解决方案1】:

这在 IB 中太简单了。

1) ⌃ 从 button1 拖动到顶部。选择“在容器中水平居中”。

2) ⌃ 从 button1 向左拖动。选择“在容器中垂直居中”。

3) 对 button2 执行相同操作。

4) 现在唯一要做的就是调整按钮的大小,因为这就是它的样子。

这也很琐碎。

5) ⌃ 从 button1 向左拖动。选择“前导空间到容器边距”。

6) ⌃ 从 button1 拖动到右侧。选择“容器边距的尾随空间”。

7) 对 button2 执行完全相同的操作。

成品,看起来像这样(注意我并没有把它们放在中心,但我可以很容易地做到):

【讨论】:

  • 这个接受的答案不准确。第一部分,作者说简单地添加 centerX 和 centerY 约束,不会导致下面的屏幕截图中显示的视觉效果。如果将两个 UIView 设置为相同的 centerX 和 Y,它们将被 z-index 堆叠。准确的屏幕截图会将它们显示为一个按钮。当心。
  • @garrettmurray 将按钮拖动到您想要的位置,然后执行这些步骤。您可能还需要更新约束。这将教您如何使用将正确调整方向变化的居中约束。我在回答中假设对自动布局有一些非常基本的知识。
【解决方案2】:

垂直居中的最简单方法是添加NSLayoutAttributeCenterY 约束 - 最好是添加到靠近视图中心的元素。如果所有视图都有垂直间距约束,那么它们都将居中。无需破坏视图层次结构或添加间隔视图。

[self.view addConstraint:
    [NSLayoutConstraint constraintWithItem:button2 
                                 attribute:NSLayoutAttributeCenterY
                                 relatedBy:NSLayoutRelationEqual 
                                    toItem:self.view 
                                 attribute:NSLayoutAttributeCenterY 
                                multiplier:1.0 
                                  constant:0]];

如果需要调整定位,设置常数。例如:constant:-30 会将其向上移动 30 点。

您还可以根据视图的不同逻辑区域锚定元素。例如,如果您想将第一个按钮锚定在视图高度的 25%,您可以将乘数设置为 0.5

【讨论】:

    【解决方案3】:

    同意 rdelmar。如果您想保留视图层次结构,这是另一种选择。

    您目前正在使用约束来分隔顶部和底部的按钮。相反,创建两个空的UIViews,它们将用作间隔。它们应该一个位于按钮的顶部,一个位于按钮的底部。使用自动布局约束,确保这两个间隔视图的高度始终相等。确保它们分别固定在按钮的顶部和底部以及超级视图的顶部和底部。

    在 VFL 中:V:|-[spacer1(==spacer2)]-[button1]-(20)-[button2]-[spacer2(==spacer1)]-|

    您可能必须在代码中执行此操作,我不确定 IB 是否可以执行此操作。

    【讨论】:

    • @JasonMoore "用两句话描述 ios 的布局"
    【解决方案4】:

    实现此目的的一种方法是将两个按钮包含在另一个 UIView 中,并将该视图置于控制器视图的中心。为按钮设置到该视图顶部和底部的固定距离,以及它们之间的固定距离或视图的固定高度。

    【讨论】:

    • 我也尝试过这样做,但无法正常工作。在任何情况下,您似乎应该能够做我想做的事情,而无需将所有内容包装在另一个 UIView 中。
    • @JamieForrest,我认为不将其包装在另一个视图中并不容易。我只需将两个按钮拖到控制器的视图上,将它们都选中,嵌入 UIView(从菜单中),然后将该视图居中。你是如何尝试的,你得到了什么结果?
    • Autolayout 的全部意义不在于我们不需要将视图封装到容器视图中吗?
    猜你喜欢
    • 2015-03-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-12
    • 1970-01-01
    • 2011-03-18
    • 2013-06-23
    相关资源
    最近更新 更多