如何在Storyboard中使用UIScrollView

我有一个1000像素高的内容的滚动视图，并希望能够在故事板上进行简单的devise。
我知道这可以通过编程来完成，但是我真的希望能够以可视方式看到它。 每次我把一个视图控制器上的滚动视图，它不会滚动。 是否有可能让它像我想要的那样工作，还是必须在代码中执行？

Answer 1

我正在回答我自己的问题，因为我花了2个小时来find解决scheme，StackOverflow允许这种QA风格。

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

1：去你的视图控制器，并点击Attribute Inspector 。

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

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

4：单击Size Inspector并将此视图设置为所需的尺寸。 我把我的身高改成了1000。

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

5：放在一个滚动视图，并将其拉伸，使其占据整个视图。 你现在应该有一个大小为320,1000的滚动视图，坐在视图控制器的视图中。

现在我们需要使其滚动，并需要使其正确显示内容。

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

7：添加一个User Defined runtime attribute其中ContentPath的KeyPath然后是SIZEtypes并放入您的内容大小。 对我来说是（320，1000）。

既然我们想要在故事板上看到我们的整个滚动视图，我们就把它展开，它有一个320,1000的框架，但为了在我们的应用程序中工作，我们需要将框架更改为可见的滚动视图。

8：添加一个带有RECTtypes和0,0,320,416的KeyPath frame的runtime attribute 。

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

Answer 2

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

1. 拖动一个ViewController（它带有UIView“视图”）。

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

2. 拖动ScrollView（作为ViewController的UIView“View”的子项）
3. selectScrollView并打开“身份检查器”。

4. 为keyPathinput“contentSize”。 为typesselect“大小”。 并input{320，1000}作为值。

   注意：第4步只是说滚动包含一些大小为320×1000单位的内容。 所以设置contentSize将使滚动工作。

5. select视图控制器，select“属性检查器”，然后从大小select自由forms 。

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

6. select“查看”，然后select“尺寸检查”。

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

注意：5,6和7纯粹是为了让我们看到 StoryBoard内部伸展或整个展开视图。 注意：确保取消selectView Controller上的“自动布局”。

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

Answer 3

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

1. select“ View Controller Size Inspector ”，然后将“ Simulated Size更改为“ Freeform ，高度为1000，而不是“ Fixed 。
2. 将View Controller的视图重命名为RootView 。
3. 拖动Scroll View作为RootView的子视图，并将其重命名为ScrollView 。
4. 为ScrollView添加约束：
   • ScrollView [Top，Bottom，Leading，Trailing] = RootView [Top，Bottom，Leading，Trailing]
5. 拖动Vertical Stack View作为ScrollView的子视图，并将其重命名为ContentView 。
6. 为ContentView添加约束：
   • ContentView .height = 1000
   • ContentView [Top，Bottom，Leading，Trailing，Width] = ScrollView [Top，Bottom，Leading，Trailing，Width]
7. selectContentView的 Attributes Inspector ，然后将Distribution更改为Fill Equally而不是Fill 。
8. 将View拖放为ContentView的子视图，并将其重命名为RedView 。
9. 将Red设置为RedView的背景。
10. 拖动View作为ContentView的子视图，并将其重命名为BlueView 。
11. 将Blue设置为BlueView的背景。
12. selectRootView ，然后单击Update Framesbutton。
    • Update Frames是Xcode8中的新button，而不是“ Resolve Auto Layout Issuesbutton。 它看起来像一个刷新button，位于故事板下方的控制栏中：

---

查看层次：

• RootView
  • 滚动型
    • 内容查看
      • RedView
      • 蓝景

---

视图控制器场景（高度：1000）：

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

Answer 4

经过几个小时的反复试验，我发现了一个非常简单的方法，将内容放入“离屏”的滚动视图中。 使用XCode 5和iOS 7进行testing。您可以使用2个小技巧/解决方法几乎完全在Storyboard中执行此操作：

1. 将视图控制器拖到故事板上。
2. 在这个viewController上拖动一个scrollView，这个demo可以保持默认的大小，覆盖整个屏幕。
3. 现在来诀窍1 ：在向scrollView添加任何元素之前，拖动一个常规的“视图”（该视图将比屏幕大，并将包含button，标签等所有子元素…让我们称之为' 封闭视图 '）。
4. 在这个尺寸检查器中把这个视图的Y尺寸设置为例如800。
5. 将标签放入封闭的视图中，在Y位置200的某处，将其命名为“标签1”。
6. 技巧2 ：确保select封闭视图 （ 而不是scrollView！ ），并将其Y位置设置为例如-250，以便您可以添加屏幕“外部”的项目
7. 放在屏幕底部的某个标签上，将其命名为'label 2'。 这个标签实际上是“屏幕外”。
8. 将封闭视图的Y位置重置为0，您将不再看到标签2，因为它位于屏幕外。

到目前为止的故事板工作，现在你需要添加一行代码到viewController的“viewDidLoad”方法来设置scrollViews的内容，所以它包含了整个“封闭视图”。 我在Storyboard中找不到这样的方法：

 - (void)viewDidLoad { [super viewDidLoad]; self.scrollView.contentSize = CGSizeMake(320, 800); } 

您可以通过将ContentSize keyPath作为size到Identity Inspector中的scrollView并将其设置为（320，1000）来尝试执行此操作。

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

Answer 5

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

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

显然，我们需要做的是：

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

2. 然后将距离从scrollView约束设置到最底部的项目滚动视图（这是超级视图）。

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

Answer 6

对于这个例子，我没有选中“界面”构build器的Autolayoutfunction。 而且，我还在使用Xcode的相对较旧的4.6.1版本（完全没有理由）。

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

1：从对象库中添加一个容器视图到滚动视图。 注意，一个新的视图控制器被添加到故事板，它被链接到视图控制器的滚动视图。

2：select容器视图，然后在“大小”检查器上将其固定到顶部和左侧，而不进行自动resize。

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

4：select新的视图控制器，并从“属性”检查器中将“大小”更改为“自由forms”。

5：select新视图控制器的视图，并在“检查器”大小上将高度更改为1000（等于容器视图的高度）。

6：为了以后的testing，仍然在新的视图控制器的视图上，在视图的顶部和底部添加一个标签。

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

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

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

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

Answer 7

请注意，在UITableView ，实际上可以通过select一个单元格或其中的一个元素来滚动tableview，并使用触控板向上或向下滚动。

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

Answer 8

在iOS7中，我发现如果我在一个FreeForm大小的ViewController里面有一个UIScrollView的View，它不会在应用程序中滚动，不pipe我做了什么。 我玩过，发现以下似乎工作，它不使用FreeForm：

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

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

3. 在ScrollView中，放置一个容器视图。 将其高度设置为任何你想要的（例如1000）

4. 将容器高度约束（1000）添加到容器，以便不resize。 底部将超过表格的末尾。

5. 添加行[self.scrollView setContentSize：CGSizeMake（320，1000）]; 到包含scrollView的ViewController（你已经把它作为一个IBOutlet）

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

Answer 9

我想把我的5分钱接受答案：我已经研究了2天的主题，终于find了一个解决scheme，我将永远使用从现在开始

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

使一切自动只是从这个链接使用解决scheme

一切都清晰，轻松，优雅，像ios 7上的魅力。我很高兴与所有的笑声

Answer 10

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

 - (void)viewDidAppear:(BOOL)animated{ [super viewDidAppear:animated]; self.scrollView.contentSize=CGSizeMake(306,400.0); } 

它解决了自动布局问题，并在iOS7上正常工作。

Answer 11

免责声明： – 仅适用于ios 9及以上（堆栈视图）。

如果您在ios 9设备上部署应用程序，请使用堆栈视图 。 这里是步骤：

1. 添加约束的滚动视图 – 引脚左，右，底部，顶部（无边距）superview（视图）
2. 添加具有相同约束的堆栈视图以滚动视图。
3. 堆栈查看其他约束： – stackView.bottom = view.bottom和stackView.width = scrollView.width
4. 开始添加您的意见。 滚动视图将决定根据堆栈视图的大小进行滚动（这基本上是您的内容视图）

Answer 12

这是一个肮脏的答案，得到了垂直滚动视图相同的解决scheme，但（对于stackoverflow的精神）不回答这个问题。 而不是使用scrollView，只需使用UITableView，将一个普通的UIView拖动到标题中，然后使其大小尽可能大，现在可以在故事板中滚动内容。

Answer 13

这是一个简单的解决scheme。

1. 在故事板中将视图控制器的大小属性设置为“Freeform”并设置所需的大小。 确保它足够大以适应滚动视图的全部内容。

2. 添加您的滚动视图，并像往常一样设置约束。 也就是说，如果您希望滚动视图成为您视图的大小，那么就像平常一样将您的顶部，底部，前导和尾部边距附加到超级视图。

3. 现在只要确保在滚动视图的子视图中有连接滚动视图顶部和底部的约束。 如果您有水平滚动，则左侧和右侧相同。

Answer 14

显然你不需要指定高度！ 如果由于某种原因（您调整组件大小或更改字体大小）发生更改，这是非常棒的。

我只是按照这个教程，一切工作： http : //natashatherobot.com/ios-autolayout-scrollview/

（注意：除非你想中心视图，否则不需要实现viewDidLayoutSubviews，所以步骤列表更短）。

希望有所帮助！

Answer 15

关键是contentSize。

添加UIScrollView时，这通常会丢失，并且不会显示。

selectUIScrollView并selectIdentity Inspector。

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

滚动。

Answer 16

如果您使用的是自动布局，最好的方法是在故事板中使用静态单元格的UITableViewController。

我也曾经遇到过需要更多滚动的观点，所以用上面提到的技术来改变UIScrollView。