如何在Storyboard中使用UIScrollView

Question

我有一个滚动视图,内容高达1000像素,并且希望能够在故事板上进行简单的设计.
我知道它可以通过编程方式完成,但我真的希望能够直观地看到它.每次我在视图控制器上放置滚动视图时,它都不会滚动.有可能让它像我想要的那样工作,或者我必须在代码中执行它吗？

Answer 1

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

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

1:转到您查看控制器并单击Attribute Inspector.

2:将Size更改Freeform为Inferred而不是Inferred.

3:转到该故事板上的主视图,而不是滚动视图,而是顶层视图.

4:单击Size Inspector并将此视图设置为所需大小.我将身高改为1000.

现在您将看到故事板具有您的视图设置,因此您可以看到滚动的整个高度以便于设计.

5:放在滚动视图上并拉伸它以便占据整个视图.您现在应该在视图控制器中的视图上有一个大小为320,1000的scrollview.

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

6:单击您的滚动视图,然后单击Identity Inspector.

7:添加一个User Defined runtime attributeKeyPath,contentSize然后输入SIZE类型并输入您的内容大小.对我来说是(320,1000).

由于我们希望在故事板上看到我们的整个滚动视图,我们将其拉伸并且它具有320,1000的框架,但为了使其在我们的应用程序中工作,我们需要将框架更改为可见的scrollview将是什么.

8:使用类型为RECT和0,0,320,416的runtime attributeKeyPath 添加frame.

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

Answer 2

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

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

查看层次结构

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

查看控制器场景(高度:1000):

在iPhone7上运行(高度:1334/2):

Answer 3

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

1. 拖动一个ViewController(它带有UIView"View").

   1.1选择"View Controller"并选择"File Inspector"并取消选中"Auto layout".

2. 拖动ScrollView(作为ViewController的UIView"View"的子代)
3. 选择ScrollView并打开"Identity Inspector".

4. 为keyPath输入"contentSize".为Type选择"Size".并输入{320,1000}作为值.

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

5. 选择View Controller,选择"Attributes Inspector",然后从Size中选择Freeform.

   注意:步骤5将允许我们更改视图控制器附带的"视图"的大小.

6. 选择"查看",然后选择"尺寸检查器".

7. 将"宽度"设置为320,将高度设置为1000.

注意:5,6和7纯粹是为了让我们在StoryBoard中看到拉伸或整个展开的视图.注意:确保取消选择View Controller上的"自动布局".

您的View层次结构应如下所示:

Answer 4

经过数小时的反复试验,我发现了一种将内容放入"屏幕外"滚动视图的简单方法.使用XCode 5和iOS 7进行测试.您可以使用2个小技巧/解决方法几乎完全在Storyboard中完成此操作:

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

到目前为止,对于storyboard工作,现在你需要在viewController的'viewDidLoad'方法中添加一行代码来设置scrollViews内容,使其包含整个'封闭视图'.我没有在Storyboard中找到这样做的方法:

- (void)viewDidLoad
{
    [super viewDidLoad];

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

您可以尝试通过将IdentityPath 添加contentSize为sizeIdentity Inspector中的scrollView并将其设置为(320,1000)来执行此操作.

我认为Apple应该在故事板中使这更容易,在TableViewController中你只需在Storyboard中滚动屏幕(只需添加20个单元格,你就会看到你可以简单地滚动),这也应该可以使用ScrollViewController.

Answer 5

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

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

显然,我们需要做的就是:

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

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

注意:步骤2将告诉故事板最后一段内容位于滚动视图中.

Answer 6

以下是如何使用 Xcode 11 设置滚动视图

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

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

3 - 从内容视图拖动到框架布局指南并选择等宽度

4 - 设置内容视图的高度约束常量

Answer 7

对于此示例,我取消选中"接口"构建器的Autolayout功能.并且,我仍然使用(完全没有任何理由)相对较旧的4.6.1版本的Xcode.

从具有滚动视图的视图控制器(主视图)开始.

1:从对象库添加容器视图到滚动视图.请注意,新的视图控制器已添加到故事板,并通过滚动视图链接到视图控制器.

2:选择容器视图,然后在"大小"检查器上,将其锚定到顶部和左侧,而不自动调整大小.

3:将其高度更改为1000.(此示例使用1000.您应该应用所需的值.)

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

5:选择新视图控制器的视图,并在大小检查器上将高度更改为1000(等于容器视图的高度).

6:为了稍后进行测试,仍然在新视图控制器的视图上,在视图的顶部和底部添加标签.

7:从原始视图控制器中选择滚动视图.在Identity检查器上,添加一个属性,其keyPath设置为contentSize,类型设置为Size,值设置为{320,1000}(或容器视图的大小).

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

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

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

Answer 8

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

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

Answer 9

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

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

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