提问者:小点点

iOS-使用故事板和自动布局来居中UIScrollView


我正在使用故事板和自动布局创建iOS应用程序,以便它在iPhone4和iPhone5上运行良好。下面是我使用情节提要创建的视图的屏幕截图。

在上图中,我想将滚动视图保持在Superview和右表视图的前沿中间。我不希望滚动视图在iPhone5中增加其宽度。我尝试了不同的约束组合,但我无法实现。

有人可以建议我必须为滚动视图设置的所有约束是什么,以便它位于中心。


共2个答案

匿名用户

此答案已针对Xcode 8更新。

这个答案是给那些只是在寻找如何使用故事板将事情居中,而不理解约束的人的。

我假设您使用的是情节提要(而不是XIB文件)和自动布局。这是目前的默认设置,因此如果你不知道这意味着什么,那么不要担心。如果你想检查,可以单击项目导航器中的Main.storyboard,然后单击文件检查器。您可以确保选中“使用自动布局”:

在故事板上选择你的按钮(或者任何你想要居中的视图)。然后点击右下角的对齐按钮。选择“水平放置在容器中”和“垂直放置在容器中”。单击“添加2个约束”。

如果它还没有完全居中,你可能需要再做一件事。点按“对齐”按钮左侧两个位置的“更新框架”按钮。您的视图现在应该位于故事板的中心。

更重要的是,现在当你运行你的应用程序时,无论你使用什么尺寸的设备,它都应该居中。

我最初是从创建用户交互界面-自动布局中学到的。基本思想仍然是一样的,但是现在Xcode中的UI排列发生了一些变化。

  • 如何以编程方式设置约束

匿名用户

您需要通过向屏幕添加其他视图来完成此操作。

目前你有...

- UIView (main view)
    |
    | - scrollView
    | - tableView

您应该将滚动视图放在另一个视图中,如下所示...

- UIView (main view)
    |
    | - UIView (spacer View)
    |    | - scrollView
    |
    | - tableView

现在你可以做的就是有这些约束...

spacer view leading edge constraint to super view = 0
spacer view trailing edge to table view leading edge = 0
table view width = (whatever the width is)
table view trailing edge to super view = 0

这将布局间隔视图和表视图,以便间隔视图将增长。

现在您需要添加…

scroll view width = x
scroll view height = y
scroll view centered vertically in super view
scroll view centered horizontally in super view.

现在,因为滚动视图的超级视图是间隔视图,所以它将始终位于表格视图和其余空间的中间。