如何在故事板中使用 UIScrollView

我回答我自己的问题，因为我刚刚花了2个小时找到解决方案和 StackOverflow 允许这种 QA 风格。

开始到结束这里是如何使它在故事板工作。

1: 进入你的视图控制器，点击 Attribute Inspector。

2: 将大小改为 Freeform而不是推断。

3: 转到故事板的主视图，不是你的滚动视图，而是顶层视图。

点击 Size Inspector并将这个视图设置为你想要的大小。我将我的高度改为1000。

现在你会看到你的故事板有你的视图设置，所以你可以看到整个高度的滚动，方便设计。

5: 点击一个滚动视图，拉伸它，使其占据整个视图。现在，视图控制器中的视图上应该有一个大小为320,1000的 scrollview。

现在我们需要让它滚动，并需要让它显示正确的内容。

点击你的滚动视图，然后点击 Identity Inspector。

7: 使用键路径 contentSize添加一个 User Defined runtime attribute，然后输入 SIZE 类型并输入内容大小。对我来说是(320,1000)。

因为我们想在故事板上看到整个滚动视图，所以我们把它拉长了，它有320,1000帧，但是为了让它在我们的应用程序中工作，我们需要把框架改成可见的滚动视图。

8: 使用键入 RECT 和0,0,320,416的 KeyPath frame添加 runtime attribute。

现在，当我们运行我们的应用程序，我们将有一个可见的 scrollview 有一个框架0,0,320,416，可以向下滚动到1000。我们能够布局我们的子视图和图像和故事板中的东西只是我们希望他们出现的方式。然后我们的运行时属性确保正确地显示它。所有这些都没有一行代码。

请注意，在 UITableView中，实际上可以通过选择单元格或其中的元素并使用轨迹板向上或向下滚动来滚动表视图。

对于 UIScrollView，我喜欢 Alex 的建议，但我建议 暂时的将视图控制器改为自由形式，增加根视图的高度，构建 UI (步骤1-5) ，然后在完成后将其改回标准推断大小，这样就不必硬编码内容大小作为运行时属性。如果你这样做了，你就会面临很多维护问题，试图同时支持3.5英寸和4英寸设备，以及在未来增加屏幕分辨率的可能性。

经过几个小时的尝试和错误，我发现了一种非常简单的方法，可以将内容放入“离开屏幕”的滚动视图中。使用 XCode 5和 iOS 7进行测试。你几乎可以完全在情节串连板中做到这一点，使用两个小技巧/变通方法:

1. 将一个视图控制器拖到故事板上。
2. 在这个 viewController 上拖动一个 scrollView，对于演示，您可以保留它的默认大小, 覆盖了整个屏幕。
3. 现在是 第一招: 在向 scrollView 添加任何元素之前，拖入一个常规的“视图”(这个视图将比屏幕大，并包含所有子元素，如按钮、标签... ... 让我们称之为“ 封闭式视野”)。
4. 让这个 封闭视图的 Y 大小在大小检查员到例如800。
5. 将一个标签放入封闭视图中，在 Y 位置的某个位置为200，将其命名为“ label 1”。
6. 技巧2 : 确保选择了 封闭式视野(不是 scrollView！) ，并将其 Y 位置设置为例如 -250，这样您就可以添加一个“在”屏幕之外的项目
7. 在屏幕底部的某个地方放入一个标签，将其命名为“ label 2”。这个标签实际上是“屏幕之外”的。
8. 将封闭视图的 Y 位置重置为0，您将不再看到标签2，因为它位于屏幕之外。

到目前为止，对于情节串连板的工作，现在需要向 viewController 的“ viewDidLoad”方法添加一行代码来设置 scrollView 内容，使其包含整个“封闭视图”。我在故事板里没有找到这样做的方法:

- (void)viewDidLoad
{
[super viewDidLoad];


self.scrollView.contentSize = CGSizeMake(320, 800);
}

您可以尝试这样做: 将 contentSize keyPath 作为 size添加到身份检查器中的 scrollView，并将其设置为(320,1000)。

我认为苹果应该让故事板更容易，在一个 TableViewController 中，你可以在故事板中滚动屏幕(只需添加20个单元格，你就会看到你可以简单地滚动) ，这应该也可以与 ScrollViewController 一起使用。

您应该只在 viewDidAppear 上设置 contentSize 属性，如下例所示:

- (void)viewDidAppear:(BOOL)animated{


[super viewDidAppear:animated];
self.scrollView.contentSize=CGSizeMake(306,400.0);


}

它解决了自动布局问题，在 iOS7上运行良好。

在这个例子中，我取消了 Interface Builder 的自动输出功能。而且，我还在(毫无理由地)使用相对较老的4.6.1版本的 Xcode。

从一个视图控制器开始，该控制器上有一个滚动视图(主视图)。

1: 从对象库向滚动视图添加容器视图。注意，一个新的视图控制器被添加到情节串连板中，并且通过滚动视图链接到视图控制器。

2: 选择容器视图，并在大小检查器上，使其锚定到顶部和左侧，而不自动调整大小。

3: 将其高度更改为1000。(本例中使用了1000。您应该应用所需的值。)

4: 选择新的视图控制器，然后从 Attributesspector 中将 Size 更改为 Freeform。

5: 选择新视图控制器的视图，并在 size spector 上将高度更改为1000(这等于容器视图的高度)。

6: 为了以后的测试，在新视图控制器的视图中，在视图的顶部和底部添加一个标签。

7: 从原始视图控制器中选择滚动视图。在 Identity 检查器上，添加一个属性，其 keyPath 设置为 contentSize，类型设置为 Size，值设置为{320,1000}(或容器视图的 Size)。

8: 在4英寸的 iPhone 模拟器上运行。您应该能够从顶部标签滚动到底部标签。

9: 在3.5英寸的 iPhone 模拟器上运行。您应该能够从顶部标签滚动到底部标签。

请记住，Xcode 4.6.1只能为 iOS6及以下版本构建。使用这种方法并构建 iOS6，当应用程序在 iOS7上运行时，我仍然能够获得相同的结果。

在 iOS7中，我发现如果我在一个 FreeForm 大小的 ViewController 上的 UIScrollView 中有一个 View，那么无论我做什么，它都不会在应用中滚动。我尝试了一下，发现下面的方法似乎可行，但是没有使用 FreeForms:

1. 在 ViewController 的主视图中插入 UIScrollView

2. 在 ScrollView 上设置适当的自动布局约束 布局指南和0到底部布局指南

3. 在 ScrollView 中，放置一个容器视图，将它的高度设置为你想要的(例如1000)

4. 向容器添加一个 Height 约束(1000) ，这样容器就不会调整大小。底部将过去的形式结束。

5. 在包含 scrollView 的 ViewController 中添加一行[ self. scrollView setContentSize: CGSizeMake (320,1000)](您已经将其连接为一个 IBOutlet)

与容器相关联的 ViewController (自动添加)将具有所需的高度(1000) Interface Builder，并且会在原始视图控制器中正确滚动。现在可以使用容器的 ViewController 来布局控件。

我想用我的五分钱来回答这个问题: 我已经研究了2天的话题，终于找到了一个解决方案，我会一直使用从现在开始

在已接受的答案中上升到第4项，并且忘记添加框架和内容大小等属性

使一切自动化只需使用解决方案从 这个链接

一切都是清晰的，简单的，优雅的，像 ios 7上的一个魅力。我非常高兴与所有的哈哈大笑

以下是我在 iOS7和 XCode5上使用的步骤。

1. 拖动 ViewController (它附带 UIView“ View”)。

   1.1选择“查看控制器”，选择“文件检查器”，取消选中“自动布局”。

2. 拖动一个 ScrollView (作为 ViewController 的 UIView“ View”的子级)
3. 选择 ScrollView 并打开“标识检查器”。

4. 为 keyPath 输入“ contentSize”。为 Type 选择“ Size”。为 value 输入 {320,1000}。

   注意: 第4步只是简单地说，滚动器包含一些大小为320x1000单位的内容。因此，设置 contentSize 将使滚动器工作。

5. 选择查看控制器，选择“属性检查器”，然后从大小中选择 自由形式。

   注意: 步骤5允许我们更改视图控制器附带的“ View”的大小。

6. 选择“查看”，然后选择“大小检查器”。

7. 将 Width 设置为320，高度设置为1000。

注意: 5,6 & 7是纯粹为我们的 看拉伸或整个故事板内扩展视图。 注意: 确保在视图控制器上取消选择“自动布局”。

你的视图层级应该是这样的:

在 iOS7中使用滚动，在 iOS7和 XCode5中使用自动布局。

除此之外: https://stackoverflow.com/a/22489795/1553014

显然，我们需要做的就是:

1. 将所有约束设置为“滚动视图”(即先修复滚动视图)

2. 然后将“距离 scrollView”约束设置为滚动视图(即“超级视图”)中最底部的项。

注意: 步骤2将告诉情节串连图板滚动视图中的最后一段内容位于何处。

这里有一个关于垂直滚动视图的相同解决方案的脏答案，但是(与 stackoverflow 的思想相反)没有回答这个问题。与其使用 scrollView，不如使用一个 UITableView，将一个普通的 UIView 拖放到页眉中，并使其尽可能大，现在您可以在情节串连板中滚动内容。

以下是在 XCode8.2.1中使用 Auto Layout的步骤。

1. 选择 View Controller的 Size Inspector，并将高度 1000的 Simulated Size改为 Freeform，而不是 Fixed。
2. 将 View Controller的视图重命名为 RootView。
3. 拖动一个 Scroll View作为 RootView的子视图，并将其重命名为 ScrollView。
4. 为 ScrollView添加约束:
   • [顶部，底部，领先，尾部] = RootView[顶部，底部，领先，尾部]
5. 拖动一个 Vertical Stack View作为 ScrollView的子视图，并将其重命名为 内容视图。
6. 为 内容视图添加约束:
   • ContentView . height = < strong > 1000
   • 内容视图 [顶部，底部，领先，尾随，宽度] = ScrollView[顶部，底部，领先，尾随，宽度]
7. 选择 内容视图的 Attributes Inspector，并将 Distribution改为 Fill Equally而不是 Fill。
8. 拖动一个 View作为 内容视图的子视图，并将其重命名为 RedView。
9. 将 Red设置为 RedView的背景。
10. 拖动一个 View作为 内容视图的子视图，并将其重命名为 BlueView。
11. 将 Blue设置为 BlueView的背景。
12. 选择 RootView，然后单击 Update Frames按钮。
    • Update Frames是 Xcode8中的一个新按钮，而不是 Resolve Auto Layout Issues按钮。它看起来像一个刷新按钮，位于故事板下面的控制栏:

视图层次结构:

• • ScrollView
    • 内容视图
      • RedView
      • BlueView