Question

我有一个滚动视图，其内容高度为1000像素，并且希望能够在故事板上进行简单设计。我知道它可以通过编程方式完成，但我真的希望能够直观地看到它。每次我在视图控制器上放置滚动视图时，它都不会滚动。是否有可能让它像我想要的那样工作，或者我必须在代码中完成它吗？

Answer 1

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

这里开始完成是如何使它在故事板中工作。

1：转到您查看控制器并单击Attribute Inspector。

2：将尺寸更改为Freeform而不是推断。

3：转到该故事板上的主视图，而不是滚动视图，而是顶层视图。

4：点击Size Inspector并将此视图设置为所需的大小。我将身高改为1000.

现在您将看到您的故事板设置了视图，因此您可以看到滚动的整个高度，以便于设计。

5：放在滚动视图上并拉伸它以便占据整个视图。您现在应该在视图控制器中的视图上有一个大小为320,1000的滚动视图。

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

6：点击您的滚动视图，然后点击Identity Inspector。

7：添加User Defined runtime attribute，KeyPath为contentSize，然后输入SIZE类型，并输入您的内容大小。对我来说是（320,1000）。

由于我们希望在故事板上看到我们的整个滚动视图，我们将其拉伸并且它具有320,1000的框架但是为了在我们的应用程序中工作，我们需要将框架更改为可见的scrollview将是

8：使用类型为RECT且为0,0,320,416的KeyPath runtime attribute添加frame。

现在，当我们运行我们的应用程序时，我们将看到一个可见的scrollview框架为0,0,320,416并且可以向下滚动到1000.我们能够在Storyboard中按照我们想要的方式布局我们的子视图和图像以及诸如此类的东西出现。然后我们的运行时属性确保正确显示它。所有这一切都没有一行代码。

Answer 2

以下是在xCode 8.2.1上为我工作的 Auto Layout 的步骤。

选择Size Inspector View Controller，将Simulated Size更改为Freeform，身高 1000 ，而不是Fixed。
将View Controller的视图重命名为 RootView 。
将Scroll View拖动为 RootView 的子视图，并将其重命名为 ScrollView 。
为 ScrollView 添加约束：
- ScrollView [顶部，底部，引导，尾随] = RootView [顶部，底部，引导，尾随]
将Vertical Stack View拖动为 ScrollView 的子视图，并将其重命名为 ContentView 。
为 ContentView 添加约束：
- ContentView .height = 1000
- ContentView [顶部，底部，前导，尾随，宽度] = ScrollView [顶部，底部，前导，尾随，宽度]
选择 ContentView 的Attributes Inspector，然后将Distribution更改为Fill Equally，而不是Fill。
将View拖动为 ContentView 的子视图，并将其重命名为 RedView 。
将Red设置为 RedView 的背景。
将View拖动为 ContentView 的子视图，并将其重命名为 BlueView 。
将Blue设置为 BlueView 的背景。
选择 RootView ，然后点击Update Frames按钮。
- Update Frames是Xcode8中的新按钮，而不是Resolve Auto Layout Issues按钮。它看起来像一个刷新按钮，位于Storyboard下面的控制栏中：

查看层次结构：

的 RootView

的滚动型

的内容查看

的 RedView

的蓝景

查看控制器场景（高度：1000）：

在iPhone7上运行（高度：1334/2）：

Answer 3

以下是适用于iOS 7和XCode 5的步骤。

拖动一个ViewController（它带有UIView＆＃34; View＆＃34;）。

1.1选择＆＃34;查看控制器＆＃34;并选择＆＃34; File Inspector＆＃34;并取消选中＆＃34;自动布局＆＃34;。
拖动ScrollView（作为ViewController的子项＆＃39; UIView＆＃34; View＆＃34;）
选择ScrollView并打开＆＃34; Identity Inspector＆＃34;。
输入＆＃34; contentSize＆＃34;用于keyPath。选择＆＃34;尺寸＆＃34;对于类型。并输入 {320,1000} 作为值。

注意：步骤4只是说滚动条包含一些大小为320x1000单位的内容。因此，设置contentSize将使卷轴工作。
选择View Controller，选择＆＃34;属性Inspector＆＃34;然后从尺寸中选择自由格式。

注意：步骤5将允许我们更改＆＃34;查看＆＃34;视图控制器附带。
选择＆＃34;查看＆＃34;然后选择＆＃34; Size Inspector＆＃34;。
将宽度设置为320，将高度设置为1000。

注意：5,6＆amp; 7纯粹是为了让我们在StoryBoard中看拉伸或整个展开的视图。注意：确保取消选择＆＃34;自动布局＆＃34;在View Controller上。

您的视图层次结构应如下所示： hierarchy

Answer 4

经过数小时的反复试验，我发现了一种将内容放入“屏幕外”滚动视图的简单方法。用XCode 5＆amp; S测试iOS 7.您几乎可以在Storyboard中完成此操作，使用2个小技巧/解决方法：

将视图控制器拖到故事板上。
在此viewController上拖动scrollView，对于演示，您可以将其大小保留为默认值，覆盖整个屏幕。
现在来了技巧1 ：在向scrollView添加任何元素之前，拖动常规“视图”（此视图将比屏幕大，并将包含所有子元素，如按钮，标签，...我们称之为'封闭视图'）。
在尺寸检查器中将此封闭视图的Y尺寸设为例如800.
将标签放入封闭视图，位于Y位置200处，将其命名为“标签1”。
技巧2 ：确保选中封闭视图（不是scrollView！），并将其Y位置设为例如 - 250，所以你可以添加一个“在屏幕外”的项目
放入屏幕底部某处的标签，将其命名为“标签2”。这个标签实际上是“屏幕外”。
将封闭视图的Y位置重置为0，您将不再看到标签2，因为它位于屏幕外。

到目前为止，对于storyboard工作，现在你需要在viewController的'viewDidLoad'方法中添加一行代码来设置scrollViews内容，使其包含整个'封闭视图'。我没有在Storyboard中找到这样做的方法：

- (void)viewDidLoad
{
    [super viewDidLoad];

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

您可以尝试将contentSize keyPath作为size添加到Identity Inspector中的scrollView并将其设置为（320,1000）。

我认为Apple应该在故事板中使这更容易，在TableViewController中你只需在Storyboard中滚动屏幕（只需添加20个单元格，你就会看到你可以简单地滚动），这也应该可以使用ScrollViewController。

Answer 5

让滚动在iOS7中工作，在iOS 7和XCode 5中自动布局。

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

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

将所有约束设置为滚动视图（即先修复滚动视图）
然后将distance-from-scrollView约束设置为最底部的项目以滚动视图（这是超级视图）。

注意：步骤2将告诉故事板最后一段内容位于滚动视图中。

Answer 6

对于此示例，我取消选中了Interface构建器的Autolayout功能。并且，我仍然使用（完全没有任何理由）相对较旧的4.6.1版本的Xcode。

从一个视图控制器开始，它有一个滚动视图（主视图）。

1：从对象库添加容器视图到滚动视图。请注意，新的视图控制器已添加到情节提要板，并通过滚动视图链接到视图控制器。

2：选择容器视图，然后在尺寸检查器上，将其锚定到顶部和左侧，而不自动调整大小。

enter image description here

3：将其高度更改为1000.（此示例使用1000.您应该应用所需的值。）

4：选择新的视图控制器，然后从“属性”检查器中将“大小”更改为“自由形式”。

enter image description here

5：选择新视图控制器的视图，并在尺寸检查器上将高度更改为1000（等于容器视图的高度）。

6：对于稍后的测试，在仍然在新视图控制器的视图上时，在视图的顶部和底部添加标签。

7：从原始视图控制器中选择滚动视图。在Identity检查器上，添加一个keyPath设置为contentSize的属性，type设置为Size，值设置为{320,1000}（或容器视图的大小）。

enter image description here

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

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

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

Answer 7

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

对于UIScrollView，我喜欢Alex的建议，但我建议暂时将视图控制器更改为自由格式，增加根视图的高度，构建UI（步骤1-5），然后在完成后将其更改回标准推断大小，以便您不必将内容大小硬编码为运行时属性。如果您这样做，那么您将面临许多维护问题，试图支持3.5“和4”设备，以及将来增加屏幕分辨率的可能性。

Answer 8

在iOS7中，我发现如果我在FreeForm大小的ViewController上的UIScrollView中有一个View，它就不会在应用程序中滚动，无论我做了什么。我玩了一遍，发现以下似乎工作，它没有使用FreeForms：

在ViewController的主视图中插入UIScrollView
根据需要在ScrollView上设置Autolayout约束。对我来说，我使用0到顶部布局指南和0到底部布局指南
在ScrollView中，放置一个容器视图。将其高度设置为您想要的任何高度（例如1000）
向Container添加高度约束（1000），因此不会调整大小。底部将超过表格的末尾。
添加行[self.scrollView setContentSize：CGSizeMake（320,1000）];到包含scrollView的ViewController（你已经连接成IBOutlet）

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

Answer 9

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

- (void)viewDidAppear:(BOOL)animated{

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

}

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

Answer 10

免责声明： - 仅适用于ios 9及以上版本（Stack View）。

如果您要在ios 9设备上部署应用，请使用堆栈视图。以下是步骤： -

添加带约束的滚动视图 - 将图钉向左，向右，向下，向上（无边距）到superview（视图）
添加具有相同约束的堆栈视图以滚动视图。
堆栈查看其他约束： - stackView.bottom = view.bottom和stackView.width = scrollView.width
开始添加您的观点。滚动视图将决定基于堆栈视图的大小（实际上是您的内容视图）滚动

Answer 11

我想把我的5美分用于接受的答案：我已经研究了2天的主题，终于找到了一个解决方案，我将从现在开始使用

在接受的答案中转到第4项，忘记添加框架和内容的属性等等

使所有内容都自动使用来自this link

的解决方案

一切都清晰，简单，优雅，就像ios 7上的魅力一样。我很高兴所有的笑声

Answer 12

Here is a simple solution.

Set the size attribute of your view controller in the storyboard to "Freeform" and set the size you want. Make sure it's big enough to fit the full content of your scroll view.
Add your scroll view and set the constraints as you normally would. i.e. if you wants the scroll view to be the size of your view, then attach your top, bottom, leading, trailing margins to the superview as you normally would.
Now just make sure there are constraints in the subviews of the scrollview that connect the top and bottom of the scroll view. Same for left and right if you have horizontal scrolling.