iOS - 使用storyboard和autolayout将UIScrollView居中

时间:2013-07-29 06:36:52

标签: ios uiscrollview autolayout storyboard

我正在使用故事板和自动布局创建iOS应用程序,以便在iPhone4和iPhone5上都能正常运行。下面是我使用故事板创建的视图的屏幕截图。

enter image description here

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

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

2 个答案:

答案 0 :(得分:41)

如何在故事板上居中视图

此答案已针对Xcode 8进行了更新。

这个答案适用于那些只是在使用故事板进行一般性搜索并且不了解约束的人。

我假设您使用的是Storyboard(不是XIB文件)和自动布局。这是现在的默认值,所以如果您不知道这意味着什么,那么不要担心它。但是,如果要检查,可以单击Project Navigator中的Main.storyboard,然后单击File检查器。您可以确保选中使用自动布局:

enter image description here

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

enter image description here

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

enter image description here

更重要的是,现在当您运行应用时,无论您使用何种设备尺寸,它都应居中。

我最初是从Creating the user interface – Auto layout学到的。基本思路仍然相同,但现在Xcode中的UI安排发生了一些变化。

另见

答案 1 :(得分:6)

您需要通过在屏幕上添加其他视图来执行此操作。

目前你有......

- 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.

现在,因为滚动视图的超视图是间隔视图,所以它总是位于表视图和其余空间之间的中心。