iOS - 使用storyboard和autolayout将UIScrollView居中

Sat*_*yam 12 storyboard uiscrollview ios autolayout

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

在此输入图像描述

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

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

Sur*_*gch 41

如何在故事板上居中视图

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

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

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

在此输入图像描述

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

在此输入图像描述

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

在此输入图像描述

更重要的是,现在当您运行应用程序时,无论您使用何种设备大小,它都应该居中.

我最初是从创建用户界面 - 自动布局中学到.基本思路仍然相同,但现在Xcode中的UI安排有所改变.

也可以看看

  • 我意识到这不能回答你的问题.你接受@Fogmeister的答案是对的,而不是我的答案.然而,由于你的头衔,许多人来到这里期待学习如何在故事板上居中.这是我想要帮助的人. (15认同)

Fog*_*ter 6

您需要通过向屏幕添加其他视图来执行此操作.

目前你有......

- UIView (main view)
    |
    | - scrollView
    | - tableView
Run Code Online (Sandbox Code Playgroud)

您应该将滚动视图放在另一个视图中...

- UIView (main view)
    |
    | - UIView (spacer View)
    |    | - scrollView
    |
    | - tableView
Run Code Online (Sandbox Code Playgroud)

现在你能做的就是有这些限制......

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
Run Code Online (Sandbox Code Playgroud)

这将布置间隔视图和表视图,以便间隔视图将增长.

现在你需要添加......

scroll view width = x
scroll view height = y
scroll view centered vertically in super view
scroll view centered horizontally in super view.
Run Code Online (Sandbox Code Playgroud)

现在,因为滚动视图的超视图是间隔视图,所以它将始终位于表视图和空间的其余部分之间.