ios 使用故事板在 xcode 4.2 中设计滚动视图

Designing inside a scrollview in xcode 4.2 with storyboards

提问by John

I have a vertically scrolling uiscrollview - imagine an 'about this app' page of a tab bar app which goes on a bit and requires a scrollview. It only contains a few images, a video and some text (only the video has been coded in - the rest have been placed in the GUI). In storyboard (Interface Builder?) Xcode 4.2, everything is set up as it should be and works fine, but the view is only as large as what you see on the screen, is it not possible to manually arrange in storyboard the items that are initially offscreen - that you need to scroll up to? The only way I've found so far is to design them on the visible view then navigate them down with the arrow keys..

我有一个垂直滚动的 uiscrollview - 想象一个标签栏应用程序的“关于这个应用程序”页面，它会继续并需要滚动视图。它只包含一些图像、一个视频和一些文本（仅视频已被编码 - 其余已放置在 GUI 中）。在情节提要（界面生成器？）Xcode 4.2 中，一切都按应有的方式进行设置并且工作正常，但是视图仅与您在屏幕上看到的一样大，是否无法在情节提要中手动排列项目最初在屏幕外 - 您需要向上滚动到？到目前为止，我发现的唯一方法是在可见视图上设计它们，然后使用箭头键向下导航它们。

回答by agilityvision

In the storyboard select the viewController, then in Attributes inspector change 'size' to 'freeform'. Then change the 'height' of the view/scroll view to as big as you need. The default settings of struts and springs should take care of resizing the view back correctly when the app is run, but you should double check.

在故事板中选择 viewController，然后在属性检查器中将“大小”更改为“自由形式”。然后将视图/滚动视图的“高度”更改为您需要的大小。当应用程序运行时，struts 和 springs 的默认设置应该负责正确调整视图的大小，但你应该仔细检查。

回答by David

I feel your pain. The only way I found is to manually pan the scroll view in the size inspector to reveal the portion of the view that you wish to visually edit.

我感觉到你的痛苦。我发现的唯一方法是在大小检查器中手动平移滚动视图以显示您希望可视化编辑的视图部分。

Use a UIView to contain elements so they are positioned relatively to this view. Add the view as a subview to the scrollview at 0,0.

使用 UIView 来包含元素，以便它们相对于该视图定位。将视图作为子视图添加到 0,0 处的滚动视图。

1. pan: use the Y coordinate say to -200, then edit the contents.
2. to place more contents in the hidden part, pan again to reveal new real-estate
3. when finished, restore the values of the ScrollView's height and X,Y position.

1. pan：使用 Y 坐标说到 -200，然后编辑内容。
2. 要在隐藏部分放置更多内容，再次平移以显示新的不动产
3. 完成后，恢复 ScrollView 的高度和 X、Y 位置的值。

Make sure the scroll view frame rectangle is smaller than the contained view.

确保滚动视图框架矩形小于包含的视图。

回答by Dickey Singh

New: 3/26/2013

新：2013/3/26

I stumbled upon what I think is even simpler way of dealing with UIScrollView directly in storyboard.

我偶然发现了我认为直接在故事板中处理 UIScrollView 更简单的方法。

1. No code needed, just storyboard settings. This maybe new in iOS6.1 / Xcode 4.6
2. No need to disable constraints (i.e. uncheck "Use autolayout" in File Inspector for storyboard file)
3. No need to add UIScrollView* scrollView; in .h
4. No need to add self.scrollView.contentSize = ... in overrides of viewWillAppear or viewDidLoad

1. 无需代码，只需故事板设置。这可能是 iOS6.1 / Xcode 4.6 中的新功能
2. 无需禁用约束（即在故事板文件的文件检查器中取消选中“使用自动布局”）
3. 无需添加 UIScrollView* scrollView；在.h
4. 无需在 viewWillAppear 或 viewDidLoad 的覆盖中添加 self.scrollView.contentSize = ...

Here is what I did (important parts highlighted with **): (see code)

这是我所做的（重要部分用**突出显示）：（见代码）

1. Create a new project with storyboard enabled
2. Drop in a UIScrollView, set class in identity inspector for view controller
3. In attributes Inspector, change Size under simulated metrics to Freeform**
4. Select scroll View; In attributes inspector, turn on "scroll enabled" and "background" to "White" (you'll figure out why - if you don't)
5. Under Size Inspector (with scroll view selected) change the height to 900 for example**
6. Add buttons, one on top and one at the bottom
7. Add a default handler for buttonTouchUpInside for both buttons and simply Log sender.

1. 创建一个启用故事板的新项目
2. 放入 UIScrollView，在身份检查器中为视图控制器设置类
3. 在属性检查器中，将模拟指标下的大小更改为自由格式**
4. 选择滚动视图；在属性检查器中，打开“启用滚动”和“背景”到“白色”（你会知道为什么 - 如果你不这样做）
5. 在尺寸检查器（选择滚动视图）下将高度更改为 900，例如**
6. 添加按钮，一个在顶部，一个在底部
7. 为两个按钮添加一个 buttonTouchUpInside 的默认处理程序，并简单地记录发送者。

See CodeSelect the View Controller and scroll view and check inspectors.

请参阅代码选择视图控制器并滚动视图并检查检查器。

回答by TechSeeko

Just change the 'Simulated Size' of the view controller to freeform and set a height that is larger than the usual size, you will be able to see all the outlets you need to edit.

只需将视图控制器的“模拟大小”更改为自由形式并设置一个大于通常大小的高度，您将能够看到您需要编辑的所有出口。

回答by Eneko Alonso

On iOS 6.0 you can drag a Container View inside your Scroll View. This will automatically create a new View for your content, outside of the current scene. You can then resize this view as big as needed to fit your content.

在 iOS 6.0 上，您可以在滚动视图中拖动容器视图。这将在当前场景之外自动为您的内容创建一个新视图。然后，您可以根据需要调整此视图的大小以适合您的内容。

I believe you would still have to set the ScrollView content height at runtime, but at least you can design you content view at once without having to scroll up and down on IB.

我相信您仍然需要在运行时设置 ScrollView 内容高度，但至少您可以立即设计您的内容视图，而无需在 IB 上上下滚动。

回答by CDixon

Just uncheck the "Autoresize subviews" from any view that you're trying to resize and it should keep all your objects from resizing with it.

只需从您尝试调整大小的任何视图中取消选中“自动调整子视图大小”，它就会阻止所有对象使用它调整大小。

回答by Owen Godfrey

I've been struggling with this for a while now, and every single thing I've tried has failed.

我已经为此苦苦挣扎了一段时间，我尝试过的每件事都失败了。

Specifically, What I am trying to achieve is a freeform sized modal dialog with a scrollable view containing a container for another view. I have had a lot of varied results, including occasionally having it working correctly. Most often I get it looking exactly correct, but with no scrolling.

具体来说，我想要实现的是一个自由大小的模态对话框，其中包含一个包含另一个视图容器的可滚动视图。我得到了很多不同的结果，包括偶尔让它正常工作。大多数情况下，我认为它看起来完全正确，但没有滚动。

In finally downloaded Dickey Singh's code, which worked perfectly but had nothing special. (Excellent clean solution BTW). So, I added a container view to it, exactly as I had in my code, and it broke!

最后下载了 Dickey Singh 的代码，它运行良好，但没有什么特别之处。（优秀的清洁解决方案顺便说一句）。所以，我向它添加了一个容器视图，就像我在我的代码中一样，它坏了！

After some experimenting, I worked out what is going on. Just bear with me.

经过一些实验，我弄清楚了发生了什么。忍受我吧。

1) Using Auto Layout, the size of the scroll view seems to dictate what the scrolling bounds will be. Setting "contentSize" in "USer Defined Runtime Attributes" seems to have no effect on this, and neither does setting "contentSize" or "bounds" in "viewWillDisplay" or "viewDidLoad". Thus if the initial size of the scroll view is 800x800, that will be all the space that can be displayed. For this reason, when I want a scrollable region, I create a container view and then put the scrolling view inside the content.

1) 使用自动布局，滚动视图的大小似乎决定了滚动边界是什么。在“用户定义的运行时属性”中设置“contentSize”似乎对此没有影响，在“viewWillDisplay”或“viewDidLoad”中设置“contentSize”或“bounds”也没有影响。因此，如果滚动视图的初始大小为 800x800，这将是所有可以显示的空间。出于这个原因，当我想要一个可滚动区域时，我会创建一个容器视图，然后将滚动视图放在内容中。

2) Without Auto Layout, setting "contentSize" in "User Defined Runtime Attributes" works, as does by setting it programmatically in "viewDidLoad". I prefer to use "User Defined Runtime Attributes" because it keeps the size with the layout. This solution allows you to use scrolling view with more flexibility, since it can be any size at design time.

2) 如果没有自动布局，在“用户定义的运行时属性”中设置“contentSize”是有效的，就像在“viewDidLoad”中以编程方式设置一样。我更喜欢使用“用户定义的运行时属性”，因为它使大小与布局保持一致。此解决方案允许您更灵活地使用滚动视图，因为它在设计时可以是任何大小。

3) Regardless of Auto Layout, if any view within the scrolling region exactly matches EITHER the horizontal or vertical frame bounds, then the scroll view ceases to function as a scroll view. This applies to my own code and to Dickey Singh's code in every possible configuration that I have tried.

3) 不管自动布局，如果滚动区域内的任何视图与水平或垂直框架边界完全匹配，则滚动视图停止作为滚动视图。这适用于我自己的代码以及我尝试过的每种可能配置中的 Dickey Singh 代码。

I have no idea what is causing (3), but it is clearly a bug.

我不知道是什么导致了 (3)，但这显然是一个错误。

I hope this helps everybody out there who is struggling to use scroll view. I imagine that some people are using them without any problem, and some (like me) have had noting but problems with them.

我希望这可以帮助那些正在努力使用滚动视图的每个人。我想有些人在使用它们时没有任何问题，而有些人（像我一样）却注意到它们有问题。

回答by Ronny Webers

Here's my solution to design a ScrollView with a content larger than the screen entirely in Storyboard (well, except for 1 single line of code :-) :

这是我在 Storyboard 中设计内容大于屏幕的 ScrollView 的解决方案（好吧，除了 1 行代码 :-)：

https://stackoverflow.com/a/19476991/1869369

https://stackoverflow.com/a/19476991/1869369

回答by Kun Hu

I'm currently developing an app for iOS 7, and I did exactly as @Dickey Singh's answer, but it doesn't work in the beginning. After checking the storyboard, I found that we also need to add Auto Layout Constraints for the view controller who holds the scrollView. It seems that such auto layout constraints would be added automatically before Xcode 5, but now we need to do it ourselves. The way to add constraints: First select the view controller in the storyboard; Enter 'Editor' in the top menu; Select the 'Resolve Auto Layout Issues'; Select the 'Add Missing Constraints In Container'. Done :-)

我目前正在为 iOS 7 开发一个应用程序，我完全按照@Dickey Singh 的回答做了，但它在开始时不起作用。查看storyboard后发现我们还需要为持有scrollView的view controller添加Auto Layout Constraints。似乎在Xcode 5之前会自动添加这样的自动布局约束，但现在我们需要自己做。添加约束的方式：首先选择storyboard中的view controller；在顶部菜单中输入“编辑器”；选择“解决自动布局问题”；选择“在容器中添加缺少的约束”。完毕 ：-）