ios 如何在 Storyboard 中使用 UIScrollView

How to use UIScrollView in Storyboard

提问by Alex Reynolds

I have a scroll view with content that is 1000px tall and would like to be able to lay it out for easy design on the storyboard.
I know it can be done programmatically but I really want to be able to see it visually. Every time I put a scroll view on a view controller it won't scroll. Is it possible to get it to work like I want or do I have to do it in the code?

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

回答by Alex Reynolds

I'm answering my own question because I just spent 2 hours to find the solution and StackOverflow allows this QA style.

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

Start to finish here is how to make it work in storyboard.

这里从头到尾是如何让它在故事板中工作。

1: go to you view controller and click on Attribute Inspector.

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

2: change Size to Freeforminstead of Inferred.

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

3: Go to the main view on that storyboard, not your scrollview but rather the top level view.

3：转到该情节提要上的主视图，而不是您的滚动视图，而是顶级视图。

4: Click Size Inspectorand set this view to your desired size. I changed my height to 1000.

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

Now you will see that you storyboard has your view setup so you can see the entire height of your scroll for easy design.

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

5: Drop on a scrollview and stretch it so it takes up the whole view. You should now have a scrollview with size of 320,1000 sitting on a view in your view controller.

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

Now we need to make it scroll and need to make it show content correctly.

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

6: Click on your scrollview and click on Identity Inspector.

6：单击您的滚动视图并单击Identity Inspector。

7: Add a User Defined runtime attributewith KeyPath of contentSizethen type of SIZE and put in your content size. For me it is (320, 1000).

7：添加一个User Defined runtime attribute带有contentSizeSIZE 类型的KeyPath并输入您的内容大小。对我来说是 (320, 1000)。

Since we want to see our whole scroll view on the storyboard we stretched it and it has a frame of 320,1000 but in order for this to work in our app we need to change the frame down to what the visible scrollview will be.

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

8: Add a runtime attributewith KeyPath framewith Type RECT and 0,0,320,416.

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

Now when we run our app we will have a visible scrollview has a frame of 0,0,320, 416 and can scroll down to 1000. We are able to layout our subviews and images and whatnot in Storyboard just the way we want them to appear. Then our runtime attributes make sure to display it properly. All of this without 1 line of code.

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

回答by jqgsninimo

Here are the steps with Auto Layoutthat worked for me on XCode 8.2.1.

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

1. Select Size Inspectorof View Controller, and change Simulated Sizeto Freeformwith height 1000instead of Fixed.
2. Rename the view of View Controlleras RootView.
3. Drag a Scroll Viewas subview of RootViewand rename it as ScrollView.
4. Add constraints for ScrollView:
   • ScrollView[Top, Bottom, Leading, Trailing] = RootView[Top, Bottom, Leading, Trailing]
5. Drag a Vertical Stack Viewas subview of ScrollViewand rename it as ContentView.
6. Add constraints for ContentView:
   • ContentView.height = 1000
   • ContentView[Top, Bottom, Leading, Trailing, Width] = ScrollView[Top, Bottom, Leading, Trailing, Width]
7. Select Attributes Inspectorof ContentView, and change Distributionto Fill Equallyinstead of Fill.
8. Drag a Viewas subview of ContentViewand rename it as RedView.
9. Set Redas the background of RedView.
10. Drag a Viewas subview of ContentViewand rename it as BlueView.
11. Set Blueas the background of BlueView.
12. Select RootView, and click Update Framesbutton.
    • Update Framesis a new button in Xcode8, instead of Resolve Auto Layout Issuesbutton. It looks like a refresh button, located in the control bar below the Storyboard:

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

---

---

View hierarchy:

查看层次结构：

• RootView
  • ScrollView
    • ContentView
      • RedView
      • BlueView

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

---

---

View Controller Scene (Height: 1000):

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

Run on iPhone7 (Height: 1334 / 2):

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

回答by Raja Rao

Here are the steps that worked for me on iOS 7 and XCode 5.

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

1. Drag a ViewController (it comes with UIView "View").

   1.1 Select "View Controller" and select "File Inspector" and uncheck "Auto layout".

2. Drag a ScrollView (as child of ViewController's UIView "View")
3. Select ScrollView and open "Identity Inspector".

4. Enter "contentSize" for keyPath. Select "Size" for Type. And Enter {320, 1000}for value.

   Note: Step 4 is simply saying that the scroller contains some content whose size is 320x1000 units. So setting contentSize will make scroller work.

5. Select View Controller, Select "Attributes Inspector" then select Freeformfrom Size.

   Note: step 5 will allow us to change the size of "View" that the view controller comes with.

6. Select "View" and then select "Size Inspector".

7. Set Width to 320 and height to 1000.

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

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

2. 拖动一个 ScrollView（作为 ViewController 的 UIView“View”的孩子）
3. 选择 ScrollView 并打开“身份检查器”。

4. 为 keyPath 输入“contentSize”。类型选择“尺寸”。并输入{320, 1000}作为值。

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

5. 选择 View Controller，选择“Attributes Inspector”，然后选择Freeformfrom Size。

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

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

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

Note: 5, 6 & 7 is purely for us to seestretched or entire expanded view inside StoryBoard. Note: Make sure to unselect "Auto Layout" on View Controller.

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

Your View hierarchy should look like:

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

回答by Ronny Webers

After hours of trial and error, I've found a very easy way to put contents into scrollviews that are 'offscreen'. Tested with XCode 5 & iOS 7. You can do this almost entirely in Storyboard, using 2 small tricks/workarounds :

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

1. Drag a viewcontroller onto your storyboard.
2. Drag a scrollView on this viewController, for the demo you can leave its size default, covering the entire screen.
3. Now comes trick 1: before adding any element to the scrollView, drag in a regular 'view' (This view will be made larger than the screen, and will contain all the sub elements like buttons, labels, ...let's call it the 'enclosing view').
4. Let this enclosing view's Y sizein the size inspector to for example 800.
5. Drop in a label onto the enclosing view, somewhere at Y position 200, name it 'label 1'.
6. Trick 2: make sure the enclosing viewis selected (not the scrollView !), and set its Y position to for example -250, so you can add an item that is 'outside' the screen
7. Drop in a label, somewhere at the bottom of the screen, name it 'label 2'. This label is actually 'off screen'.
8. Reset the Y position of the enclosing view to 0, you'll no longer see label 2, as it was positioned off screen.

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

So far for the storyboard work, now you need to add a single line of code to the viewController's 'viewDidLoad' method to set the scrollViews contents so it contains the entire 'enclosing view'. I didn't find a way to do this in Storyboard:

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

- (void)viewDidLoad
{
    [super viewDidLoad];

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

You can try doing this by adding a contentSizekeyPath as a sizeto the scrollView in the Identity Inspector and setting it to (320, 1000).

您可以尝试通过将contentSizekeyPath 作为 a添加size到身份检查器中的滚动视图并将其设置为 (320, 1000)来尝试执行此操作。

I think Apple should make this easier in storyboard, in a TableViewController you can just scroll offscreen in Storyboard (just add 20 cells, and you'll see you can simply scroll), this should be possible with a ScrollViewController too.

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

回答by Raja Rao

Getting Scrolling to work in iOS7 and Auto-layout in iOS 7 and XCode 5.

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

In addition to this: https://stackoverflow.com/a/22489795/1553014

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

Apparently, all we need to do is:

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

1. Set all constraints to Scroll View (i.e. fix scroll view first)

2. Then set distance-from-scrollView constraint to the bottom most item to scroll view (which is the super view).

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

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

Note: Step 2 will tell storyboard where the last piece of content lies within Scroll view.

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

回答by yoninja

For this example, I have unchecked the Autolayout feature of the Interface builder. And, I'm still using (for no reason at all) the relatively old 4.6.1 version of Xcode.

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

Start with a view controller that has a scroll view over it (the main view).

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

1: Add a Container View, from the Object Library, to the scroll view. Notice that a new view controller is added to the storyboard and it is linked to the view controller with the scroll view.

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

2: Select the container view and, on the Size Inspector, make it anchor to top and left without auto resizing.

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

3: Change its height to 1000. (1000 is used for this example. You should apply the value that you require.)

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

4: Select the new view controller and, from the Attributes Inspector, change Size to Freeform.

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

5: Select the view of the new view controller and, on the size Inspector, change the height to 1000 (which is equal to the container view's height).

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

6: For your test later, while still on the view of the new view controller, add a label at the top and at the bottom of the view.

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

7: Select the scroll view from the original view controller. On the Identity inspector, add an attribute with the keyPath set to contentSize, type set to Size, and value set to {320, 1000} (or your container view's size).

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

8: Run on the 4-inch iPhone Simulator. You should be able to scroll from the top label up to the bottom label.

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

9: Run on the 3.5-inch iPhone Simulator. You should be able to scroll from the top label up to the bottom label.

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

Remember that Xcode 4.6.1 can only build for iOS6 and below. Using this approach and building for iOS6, I am still able to achieve the same results when the app is run on iOS7.

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

回答by Kyle Clegg

Note that within a UITableView, you can actually scroll the tableview by selecting a cell or an element in it and scrolling up or down with your trackpad.

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

For a UIScrollView, I like Alex's suggestion, but I would recommend temporarilychanging the view controller to freeform, increasing the root view's height, building your UI (steps 1-5), and then changing it back to the standard inferred size when you are done so that you don't have to hard code content sizes in as runtime attributes. If you do that you are opening yourself up to a lot of maintenance issues trying to support both 3.5" and 4" devices, as well as the possibility of increased screen resolutions in the future.

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

回答by Lucio Fonseca

You should only set the contentSize property on the viewDidAppear, like this sample:

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

- (void)viewDidAppear:(BOOL)animated{

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

}

It solve the autolayout problems, and works fine on iOS7.

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

回答by nh32rg

In iOS7 I found that if I had a View inside a UIScrollView on a FreeForm-sized ViewController it would not scroll in the app, no matter what I did. I played around and found the following seemed to work, which uses no FreeForms:

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

1. Insert a UIScrollView inside the main View of a ViewController

2. Set the Autolayout constraints on the ScrollView as appropriate. For me I used 0 to Top Layout guide and 0 to Bottom layout Guide

3. Inside the ScrollView, place a Container View. Set its height to whatever you want (e.g. 1000)

4. Add a Height constraint (1000) to the Container so it doesn't resize. The bottom will be past the end of the form.

5. Add the line [self.scrollView setContentSize:CGSizeMake(320, 1000)]; to the ViewController that contains the scrollView (which you've hooked up as a IBOutlet)

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

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

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

4. 向容器添加高度约束 (1000)，使其不会调整大小。底部将超过表格的末尾。

5. 添加行 [self.scrollView setContentSize:CGSizeMake(320, 1000)]; 到包含滚动视图的 ViewController（您已将其连接为 IBOutlet）

The ViewController (automatically added) that is associated with the Container will have the desired height (1000) in Interface Builder and will also scroll properly in the original view controller. You can now use the container's ViewController to layout your controls.

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

回答by DharinS

Disclaimer :- Only for ios 9 and above (Stack View).

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

If you are deploying your app on ios 9 devices use a stack view. Here are the steps :-

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

1. Add a scroll view with constraints - pin to left, right, bottom, top (without margins) to superview (view)
2. Add a stack view with same constraints to scroll view.
3. Stack View Other Constraints :- stackView.bottom = view.bottom and stackView.width = scrollView.width
4. Start adding your views. The scroll view will decide to scroll based on the size of the stack view (which is essentially your content view)

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