ios - 如何在 Storyboard 中使用 UIScrollView

Question

我有一个滚动视图，其内容为 1000 像素高，并且希望能够将其布局以便在情节提要上轻松设计。
我知道它可以以编程方式完成，但我真的希望能够直观地看到它。每次我在视图控制器上放置滚动视图时，它都不会滚动。是否有可能让它像我想要的那样工作，还是我必须在代码中这样做？

score 149 · Accepted Answer

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

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

1：转到您的视图控制器并单击Attribute Inspector。

2：将SizeFreeform改为Inferred。

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

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

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

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

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

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

7：添加一个类型为 SIZEUser Defined runtime attribute的 KeyPathcontentSize并输入您的内容大小。对我来说是 (320, 1000)。

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

8：添加一个带有类型 RECT 和 0,0,320,416的runtime attributeKeyPath 。frame

现在，当我们运行我们的应用程序时，我们将看到一个可见的滚动视图，其帧数为 0,0,320, 416，并且可以向下滚动到 1000。我们能够按照我们希望它们出现的方式在 Storyboard 中布局我们的子视图和图像等等。然后我们的运行时属性确保正确显示它。所有这一切都无需 1 行代码。

score 51 · Accepted Answer

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

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

查看层次结构：

根视图
- 滚动视图
  - 内容视图
    - 红景
    - 蓝景

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

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

score 43 · Accepted Answer

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

拖动一个 ViewController（它带有 UIView “View”）。

1.1 选择“View Controller”并选择“File Inspector”并取消选中“Auto layout”。
拖动 ScrollView（作为 ViewController 的 UIView “View”的子级）
选择 ScrollView 并打开“Identity Inspector”。
为 keyPath 输入“contentSize”。为类型选择“大小”。并输入{320, 1000}作为值。

注意：第 4 步只是说滚动条包含一些大小为 320x1000 单位的内容。因此设置 contentSize 将使滚动条工作。
选择 View Controller，选择“Attributes Inspector”，然后从 Size 中选择Freeform 。

注意：第 5 步将允许我们更改视图控制器附带的“视图”的大小。
选择“查看”，然后选择“尺寸检查器”。
将宽度设置为 320，高度设置为 1000。

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

您的视图层次结构应如下所示： 等级制度

score 13 · Accepted Answer

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

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

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

- (void)viewDidLoad
{
    [super viewDidLoad];

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

您可以尝试通过将contentSizekeyPath 作为 a添加size到 Identity Inspector 中的 scrollView 并将其设置为 (320, 1000) 来执行此操作。

我认为Apple应该在情节提要中使这更容易，在TableViewController中您可以在情节提要中滚动屏幕外（只需添加20个单元格，您就会看到您可以简单地滚动），这也应该可以通过ScrollViewController实现。

score 8 · Accepted Answer

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

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

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

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

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

score 7 · Accepted Answer

对于这个例子，我取消了界面生成器的自动布局功能。而且，我仍在使用（完全没有理由）相对较旧的 4.6.1 版本的 Xcode。

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

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

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

在此处输入图像描述

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

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

在此处输入图像描述

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

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

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

在此处输入图像描述

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

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

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

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

- (void)viewDidAppear:(BOOL)animated{

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

}

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

score 4 · Accepted Answer

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

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

添加带有约束的滚动视图 - 固定到左侧、右侧、底部、顶部（无边距）到超级视图（视图）
将具有相同约束的堆栈视图添加到滚动视图。
堆栈视图其他约束：- stackView.bottom = view.bottom 和 stackView.width = scrollView.width
开始添加您的视图。滚动视图将根据堆栈视图的大小（本质上是您的内容视图）决定滚动

score 3 · Accepted Answer

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

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

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

一切都清晰、简单、优雅，在 ios 7 上就像一个魅力。我很高兴所有这些，哈哈

score 3 · Accepted Answer

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

将情节提要中视图控制器的大小属性设置为“自由形式”并设置所需的大小。确保它足够大以容纳滚动视图的全部内容。
像往常一样添加滚动视图并设置约束。即，如果您希望滚动视图成为您的视图的大小，然后像往常一样将您的顶部、底部、前导、尾随边距附加到超级视图。
现在只需确保在连接滚动视图顶部和底部的滚动视图的子视图中有约束。如果您有水平滚动，左右相同。

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

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

2 - 将内容视图添加到滚动视图，将连接拖到内容布局指南并选择前导、顶部、底部和尾随。确保将其值设置为 0 或您想要的常量。

3 - 从 Content View 拖到 Frame Layout Guide 并选择 Equal Widths

4 - 为内容视图设置一个高度约束常量

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

关键是 contentSize。

添加 UIScrollView 时，这通常会丢失且未指示。

选择 UIScrollView 并选择 Identity Inspector。

将contentSizekeyPath 作为 a添加size到 Identity Inspector 中的 scrollView 并将其设置为 (320, 1000)。

滚开。

score 0 · Accepted Answer

显然你根本不需要指定高度！ 如果它因某种原因发生变化（您调整组件大小或更改字体大小），那就太好了。

我刚刚按照本教程进行操作，一切正常：http: //natashatherobot.com/ios-autolayout-scrollview/

（旁注：没有必要实现 viewDidLayoutSubviews 除非您想使视图居中，因此步骤列表更短）。

希望有帮助！

ios - 如何在 Storyboard 中使用 UIScrollView

17 回答 17

Related

Reference