将 UIScrollview 放入视图控制器(故事板) [英] Putting a UIScrollview in a viewcontroller (storyboard)

问题描述

嘿，我想向我的视图控制器添加一个滚动视图，我已将一个 UIScrollView 拖到画布上，它是所需的大小 (228*128).我希望此滚动视图滚动大小 (576*128) 的视图，即双倍宽度.我不知道该怎么做.我是否首先在单独的 xib 文件上绘制 (576*128) 视图?之后我将如何将所有这些联系起来?下图是我的设置.我是否必须为包含内容的 UIView 创建自定义类并初始化这是我的视图控制器?只是不知道如何去做.谢谢！

Hey I want to add a scroll view to my view controller, I have dragged a UIScrollView onto the canvas, it is the required size (228*128). I want this scrollview to scroll a view of size (576*128), i.e. double width. I'm not sure how to go about doing this. Do I first draw the (576*128) view on a separate xib file? How would I link all this up after? The image below is my setup. Do I have to create a custom class for the UIView that contains the content and init this is my view controller? Just not sure how to go about it. Thanks!

更新如下图........

updated image below.........

推荐答案

您可以完全在 Interface Builder 中进行布局.

You can lay this out entirely in Interface Builder.

1. 从一个新的 ViewController 开始.在右侧的 Size Inspector 中，将 Simulated Size 设置为 Freeform.将宽度设置为 640，将高度设置为 600.这将为您提供足够宽的 ViewController 以查看滚动视图的全宽(仅用于布局).

1. Start with a fresh ViewController. In the Size Inspector on the right, set the Simulated Size to Freeform. Set width to 640 and height to 600. This will give you a sufficiently wide ViewController to see the full width of your scroll view (for layout purposes only).

拖出一个滚动视图.添加约束以使其在视图中居中，并将其约束到 ViewController 的底部.将其宽度限制为 576，将其高度限制为 128.我们将在稍后的步骤中修正宽度.

Drag out a scrollView. Add constraints to center it in the view, and constrain it to the bottom of your ViewController. Constrain its width to 576 and its height to 128. We'll fix up the width in a later step.

通过拖出一个 UIView 并将其放入 scrollView 中，将一个 contentView 添加到 scrollView.将其固定在滚动视图的左侧、顶部、右侧和底部，并将其宽度限制为 576，高度限制为 128.为此，请单击屏幕底部的图钉图标 |-[]-|，取消选中 Constrain to margins，打开所有四个橙色工字梁(struts)，将它们的常量设置为零，选中宽度和高度旁边的框，并将它们的值分别设置为 576 和 128.最后，点击添加 6 个约束.

Add a contentView to the scrollView by dragging out a UIView and dropping it into the scrollView. Pin it to the left, top, right, and bottom of the scroll view and constrain its width to 576 and height to 128. To do this, click on the pin icon at the bottom of the screen |-[]-|, uncheck Constrain to margins, turn on all four orange I-beams (struts), set their constants to zero, check the boxes next to width and height and set their values to 576 and 128 respectively. Finally, click on Add 6 constraints.

将 contentView 的背景设为黄色，以便您可以看到.

Make the background of the contentView yellow so you can see it.

将内容添加到您的 contentView.我添加了三个标签左侧"、中间"和右侧".

Add content to your contentView. I added three labels "Left Side", "Middle", and "Right Side".

现在让我们将 scrollView 设置为合适的大小.点击 scrollView 的宽度约束，并通过点击在构建时移除复选框使其成为Placeholder.

Now let's make the scrollView the right size. Click on the scrollView's width constraint and make it a Placeholder by clicking on the Remove at build time checkbox.

向滚动视图添加另一个宽度约束.将其设置为228，并将其优先级设置为750.使用这个较低的优先级，您不会在 Interface Builder 中发生冲突，但是当您构建另一个时，另一个将被排除在外，这会将您的 scrollView 限制为 228 的宽度.

Add another width constraint to the scrollView. Set it equal to 228, and set its priority to 750. With this lower priority, you won't have conflicts in Interface Builder, but when you build the other one will be left out and this will constrain your scrollView to a width of 228.

此时，您的文档大纲将如下所示，显示所有约束:

At this point, your Document Outline will look like this showing all of the constraints:

现在构建，您的 scrollView 将滚动！

Now build, and your scrollView will scroll!

这篇关于将 UIScrollview 放入视图控制器(故事板)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！