如何在情节提要中使用UIScrollView

我有一个滚动视图，其内容高度为1000px，并希望能够将其布局以便在情节提要板上进行轻松设计。
我知道可以通过编程方式完成，但是我真的希望能够以视觉方式看到它。每次将滚动视图放在视图控制器上时，它都不会滚动。是否有可能让它按我想要的方式工作，还是必须在代码中进行？

我正在回答自己的问题，因为我只花了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的contentSizeSIZE类型，然后输入您的内容大小。对我来说是（320，1000）。

由于我们希望在情节提要板上看到整个滚动视图，因此我们对其进行了拉伸，它具有320,1000的框架，但是为了使其在我们的应用程序中正常工作，我们需要将框架更改为可见的滚动视图。

8：添加一个runtime attribute带有KeyPath的frameRECT类型和0,0,320,416。

现在，当我们运行我们的应用程序时，我们将看到一个可见的滚动视图，其框架为0,0,320，416，并且可以向下滚动到1000。我们能够以我们希望它们出现的方式在Storyboard中布置子视图和图像以及其他内容。然后，我们的运行时属性确保正确显示它。所有这些都没有1行代码。

以下是Auto Layout在XCode 8.2.1上对我有用的步骤。

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

视图层次结构：

• 根视图
  • 滚动视图
    • 内容查看
      • 红景
      • 蓝景

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

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

以下是在iOS 7和XCode 5上对我有用的步骤。

1. 拖动一个ViewController（它随UIView“视图”一起提供）。

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

2. 拖动ScrollView（作为ViewController的UIView“视图”的子级）
3. 选择ScrollView并打开“身份检查器”。

4. 输入keyPath的“ contentSize”。选择“大小”作为类型。然后输入{320，1000}作为值。

   注意：步骤4只是说滚动条包含一些内容，其大小为320x1000单位。因此，设置contentSize将使滚动条起作用。

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

   注意：第5步将允许我们更改视图控制器随附的“视图”的大小。

6. 选择“查看”，然后选择“尺寸检查器”。

7. 将“宽度”设置为320，将“高度”设置为1000。

注意：5、6和7纯粹是让我们在StoryBoard中看到拉伸或整个展开的视图。注意：确保在View Controller上取消选择“自动布局”。

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

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

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

到目前为止，对于情节提要板的工作，现在您需要向viewController的'viewDidLoad'方法中添加一行代码，以设置scrollViews内容，使其包含整个“封闭视图”。我在Storyboard中找不到实现此目的的方法：

- (void)viewDidLoad
{
    [super viewDidLoad];

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

您可以尝试通过将contentSizekeyPath 添加为size到Identity Inspector中的scrollView并将其设置为（。

我认为苹果公司应该使这在故事板中更容易些，在TableViewController中，您可以在故事板中进行屏幕外滚动（只需添加20个单元格，您会看到您可以简单地滚动），这也可以通过ScrollViewController来实现。

在iOS7中获得滚动功能，在iOS 7和XCode 5中获得自动布局功能。

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

显然，我们需要做的是：

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

2. 然后将distance-from-scrollView约束设置为最底部的项目以滚动视图（超级视图）。

注意：第2步将告诉情节提要板最后一块内容在“滚动”视图中的位置。

对于此示例，我未选中“界面”构建器的“自动布局”功能。而且，我仍在使用（完全没有理由）相对较旧的Xcode 4.6.1版本。

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

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

2：选择容器视图，然后在“大小”检查器上将其固定到顶部和左侧，而无需自动调整大小。

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

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

5：选择新视图控制器的视图，然后在Inspector大小上将高度更改为1000（等于容器视图的高度）。

6：为了以后进行测试，当仍在新视图控制器的视图上时，在视图的顶部和底部添加标签。

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

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

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

请记住，Xcode 4.6.1只能针对iOS6及更低版本进行构建。使用此方法并针对iOS6进行构建，当该应用程序在iOS7上运行时，我仍然可以获得相同的结果。

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

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

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

- (void)viewDidAppear:(BOOL)animated{

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

}

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

免责声明：-仅适用于ios 9及更高版本（堆栈视图）。

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

1. 添加具有约束的滚动视图-固定到左，右，下，上（无边距）以显示超级视图（视图）
2. 添加具有相同约束的堆栈视图以滚动视图。
3. 堆栈视图其他约束：-stackView.bottom = view.bottom和stackView.width = scrollView.width
4. 开始添加您的视图。滚动视图将根据堆栈视图的大小决定滚动（本质上是您的内容视图）

在iOS7中，我发现，如果我在FreeForm大小的ViewController的UIScrollView内有一个View，无论我做什么，它都不会在应用程序中滚动。我到处玩耍，发现以下内容似乎有效，它不使用FreeForms：

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

2. 根据需要在ScrollView上设置Autolayout约束。对我来说，我使用了0到顶部布局指南和0到底部布局指南

3. 在ScrollView内部，放置一个Container View。将其高度设置为任意值（例如1000）

4. 向容器添加一个高度限制（1000），以使其不会调整大小。底部将超过表格的结尾。

5. 添加行[self.scrollView setContentSize：CGSizeMake（320，1000）]; 到包含scrollView的ViewController（您已将其作为IBOutlet连接）

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

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

在接受的答案中转到第4项，而不必添加框架和contentsizes等属性

使一切自动化，只需使用此链接中的解决方案

一切都清晰，轻松，优雅，并且像ios 7上的魅力一样工作。

这是一个简单的解决方案。

1. 在情节提要中将视图控制器的大小属性设置为“自由格式”，然后设置所需的大小。确保它足够大以适合滚动视图的全部内容。

2. 添加滚动视图并按照通常的方式设置约束。即，如果您希望滚动视图成为视图的大小，则可以像往常一样将顶部，底部，前导和尾随页边距附加到超级视图。

3. 现在，只需确保在滚动视图的子视图中有连接滚动视图顶部和底部的约束即可。如果进行水平滚动，则左右方向相同。

对于垂直滚动视图，有一个肮脏的答案，可以得到相同的解决方案，但是（与stackoverflow的精神相反）不能回答这个问题。无需使用scrollView，只需使用UITableView，将普通的UIView拖动到标题中，然后使其达到所需的大小即可，现在可以在情节提要中滚动内容。

显然，您根本不需要指定高度！ 如果它由于某些原因而发生更改（调整组件大小或更改字体大小），则该功能很好。

我只是按照本教程操作，所以一切正常：http : //natashatherobot.com/ios-autolayout-scrollview/

（附带说明：除非您要使视图居中，否则无需实现viewDidLayoutSubviews，因此步骤列表甚至更短）。

希望有帮助！

关键是contentSize。

添加UIScrollView时通常会丢失并且未指出这一点。

选择UIScrollView并选择“身份检查器”。

将contentSizekeyPath作为a 添加size到Identity Inspector中的scrollView中，并将其设置为（320，1000）。

滚开。

如果您使用自动布局，则最好的方法是将UITableViewController与情节提要中的静态单元格一起使用。

我还曾经遇到过需要更多滚动的视图问题，因此请使用上述技术更改UIScrollView。

这是使用Xcode 11设置滚动视图的方法

1-添加滚动视图并设置顶部，底部，前导和尾随约束

2-将内容视图添加到滚动视图，将连接拖动到“内容布局指南”，然后选择“前导”，“顶部”，“底部”和“尾随”。确保将其值设置为0或所需的常数。

3-从“内容视图”拖动到“帧布局指南”，然后选择“等宽”

4-将高度限制常数设置为“内容”视图