I have a view hierarchy that looks like this (based on other answers and Apple's advanced AutoLayout guide for working with UIScrollView):
我有一个视图层次结构,它看起来像这样(基于其他答案和苹果的UIScrollView的高级AutoLayout指南):
The 2 steps required for ScrollView are:
ScrollView所需的两个步骤是:
- Set up constraints for position and size (frame) of ScrollView: The same way you do it with any other view.
- 为ScrollView的位置和大小(框架)设置约束:与对任何其他视图进行约束的方式相同。
- Set up constraints for content size: By making sure that there are constraints from the ScrollView's subviews touching all edges (leading, trailing, top, bottom) of the ScrollView, if you're doing this in interface builder and not programmatically.
- 为内容大小设置约束:通过确保ScrollView的子视图中存在与ScrollView的所有边(前缘、后缘、顶部、底部)相关的约束,如果您是在interface builder中执行此操作,而不是以编程方式执行的话。
Step 1 worked fine at first and this was the result:
第一步工作得很好,结果就是:
No problems with position and size as expected. I just need to define the content size (content height and content width) now in Interface Builder with Step 2.
位置和尺寸没有问题。我只需要在第2步的Interface Builder中定义内容大小(内容高度和内容宽度)。
Now I add the constraints touching all 4 edges of the ScrollView like so:
现在,我添加了对ScrollView的所有4条边的约束:
Suddenly, the ScrollView doesn't know it's position and size (frame) anymore.
突然,ScrollView不再知道它的位置和大小(帧)。
I've looked at other answers and followed the various steps, but can't seem to resolve this issue. Sorry I'm not able to post Storyboard screenshots because of privacy issues
我已经看了其他的答案,并遵循了不同的步骤,但似乎无法解决这个问题。抱歉,由于隐私问题,我不能发布故事板截图
2 个解决方案
#1
4
Scroll views can be a little tricky at first. You really have 3 parts:
滚动视图一开始可能有点棘手。你真的有三个部分:
- Actual frame of the scroll view
- 滚动视图的实际框架。
- Actual frame of the subview(s) contained in the scroll view
- 包含在滚动视图中的子视图的实际框架
- The contentSize of the scroll view - that is, how far it should scroll in either direction
- 滚动视图的内容大小——也就是说,它在任意方向上滚动的距离
So, 1. is pretty straight-forward.
所以,1。很直接的。
The second part also seems straight-forward, except that we tend to "pin" subviews to the inside edges of their superviews. In the case of scroll view subviews, those constraints are what defines the contentSize. You also have to make sure the subviews have a "size".
第二部分似乎也很直接,除了我们倾向于把子视图固定在父视图的内部边缘。对于滚动视图子视图,这些约束定义了内容大小。您还必须确保子视图具有“size”。
Starting with just one subview, you would:
从一个子视图开始,您将:
- set the scroll view's constraints as "normal".
- 将滚动视图的约束设置为“normal”。
- set the size of the subview - just for demo purposes, set it to 100 x 100
- 设置子视图的大小——为了演示目的,将它设置为100 x 100
- pin all four edges of the subview to the four edges of the scroll view
- 将子视图的所有四条边固定到滚动视图的四条边
Run the app. Assuming you set background colors so you know what you're looking at, you should see the scroll view positioned and sized as you'd expect... you should see the subview of 100 x 100 sitting somewhere inside the scroll view... and you will likely not be able to do any actual scrolling.
假设你设置了背景色,所以你知道你在看什么,你应该看到你所期望的滚动视图的定位和大小。您应该会看到100 x 100的子视图位于滚动视图的某个位置……而且你可能无法进行任何实际的滚动。
If you go back and change the subview to, say, 100 x 800, and still have its bottom constraint pinned to the bottom of the scroll view (the subview's superview), and run the app again... You should be able to scroll up and down for the full 800 pt height of the subview.
如果您返回并将子视图更改为,比方说,100 x 800,并将其底部约束固定在滚动视图(子视图的超视图)的底部,然后再次运行该应用程序……您应该能够向上和向下滚动,以获得子视图的完整800 pt高度。
The way to think about it is: the scroll view's content - whether it's one or many subviews - has to define its own size, which will define the scrollable area (the scroll view's contentSize).
考虑它的方法是:滚动视图的内容——无论是一个还是多个子视图——必须定义自己的大小,它将定义可滚动区域(滚动视图的内容大小)。
Hope that makes sense!
希望是有意义的!
#2
1
-
Set the scroll view's top, bottom, leading, trailing constraints to its superview to 0.
将滚动视图的顶部、底部、引导、尾随约束设置为0。
-
Set the view that is inside the scroll view and set its top, bottom, leading, trailing constraints to its superview to 0.
设置滚动视图内部的视图,并将它的顶部、底部、前导和尾部约束设置为0。
-
Select the view that is inside the scroll view, go to the size inspector and set the "Intrinsic size" to "Placeholder".
选择滚动视图中的视图,转到size检查器并将“固有大小”设置为“占位符”。
#1
4
Scroll views can be a little tricky at first. You really have 3 parts:
滚动视图一开始可能有点棘手。你真的有三个部分:
- Actual frame of the scroll view
- 滚动视图的实际框架。
- Actual frame of the subview(s) contained in the scroll view
- 包含在滚动视图中的子视图的实际框架
- The contentSize of the scroll view - that is, how far it should scroll in either direction
- 滚动视图的内容大小——也就是说,它在任意方向上滚动的距离
So, 1. is pretty straight-forward.
所以,1。很直接的。
The second part also seems straight-forward, except that we tend to "pin" subviews to the inside edges of their superviews. In the case of scroll view subviews, those constraints are what defines the contentSize. You also have to make sure the subviews have a "size".
第二部分似乎也很直接,除了我们倾向于把子视图固定在父视图的内部边缘。对于滚动视图子视图,这些约束定义了内容大小。您还必须确保子视图具有“size”。
Starting with just one subview, you would:
从一个子视图开始,您将:
- set the scroll view's constraints as "normal".
- 将滚动视图的约束设置为“normal”。
- set the size of the subview - just for demo purposes, set it to 100 x 100
- 设置子视图的大小——为了演示目的,将它设置为100 x 100
- pin all four edges of the subview to the four edges of the scroll view
- 将子视图的所有四条边固定到滚动视图的四条边
Run the app. Assuming you set background colors so you know what you're looking at, you should see the scroll view positioned and sized as you'd expect... you should see the subview of 100 x 100 sitting somewhere inside the scroll view... and you will likely not be able to do any actual scrolling.
假设你设置了背景色,所以你知道你在看什么,你应该看到你所期望的滚动视图的定位和大小。您应该会看到100 x 100的子视图位于滚动视图的某个位置……而且你可能无法进行任何实际的滚动。
If you go back and change the subview to, say, 100 x 800, and still have its bottom constraint pinned to the bottom of the scroll view (the subview's superview), and run the app again... You should be able to scroll up and down for the full 800 pt height of the subview.
如果您返回并将子视图更改为,比方说,100 x 800,并将其底部约束固定在滚动视图(子视图的超视图)的底部,然后再次运行该应用程序……您应该能够向上和向下滚动,以获得子视图的完整800 pt高度。
The way to think about it is: the scroll view's content - whether it's one or many subviews - has to define its own size, which will define the scrollable area (the scroll view's contentSize).
考虑它的方法是:滚动视图的内容——无论是一个还是多个子视图——必须定义自己的大小,它将定义可滚动区域(滚动视图的内容大小)。
Hope that makes sense!
希望是有意义的!
#2
1
-
Set the scroll view's top, bottom, leading, trailing constraints to its superview to 0.
将滚动视图的顶部、底部、引导、尾随约束设置为0。
-
Set the view that is inside the scroll view and set its top, bottom, leading, trailing constraints to its superview to 0.
设置滚动视图内部的视图,并将它的顶部、底部、前导和尾部约束设置为0。
-
Select the view that is inside the scroll view, go to the size inspector and set the "Intrinsic size" to "Placeholder".
选择滚动视图中的视图,转到size检查器并将“固有大小”设置为“占位符”。