iOS 滚动视图允许滚动过去的内容 [英] iOS Scroll View Allows Scrolling Past Content

问题描述

我正在努力针对横向和较小屏幕优化我的应用.我主要使用滚动视图来实现这一点.在我的一个视图中，我有一个容器视图.当我在故事板中的设备之间切换时，这个容器视图看起来很完美.容器视图被映射到一个视图控制器，该视图控制器有一个滚动视图，其顶部、底部、前导和尾随空间设置为 superview 0.因此它应该填充容器.实际的视图控制器设置为 Freeform Simulated Size，宽度为 263，高度为 190(滚动视图内部内容的确切大小).

I'm trying to work on optimizing my app for landscape and smaller screens. I'm mostly using scroll views to achieve this. In one of my views I have a container view. This container view looks perfect when I toggle between devices in the storyboard. The container view is mapped to a view controller that has a scroll view that has top, bottom, leading, and trailing space set to superview 0. So it should fill the container. The actual view controller is set to Freeform Simulated Size with a width of 263 and a height of 190 (the exact size of the content inside of the scroll view).

在滚动视图内部，我只有显示信息的标签.

Inside of the scroll view I just have labels displaying information.

这似乎一切正常.在较小的设备或横向设备上，您可以滚动查看内容和所有标签.

This all seems to work fine. On smaller devices or in landscape you can scroll to view the content and view all the labels.

唯一的问题是您可以滚动浏览内容的所有设备和屏幕尺寸.在 X 轴和 Y 轴上.奇怪的是，在水平轴上，容器视图的宽度专门设置为 263.我使用滚动视图的唯一原因是高度.即使在较小的屏幕上，宽度也没有问题.但它仍然允许用户水平滚动.

Only problem is on all devices and screen sizes you can scroll past the content. In both the X and Y axis. What's strange is on the horizontal axis the width of the container view is specifically set to 263. The only reason I'm using a scroll view is for height. There are no problems with width, even on smaller screens. But it still allows the user to scroll horizontally.

对于 iPhone 4s 横向的更具体示例，容器视图的宽度为 263，高度为 90.但它本身的内容是 263 宽和 190 高.所以我希望用户能够向下滚动以查看 100 条内容的其余部分.但目前它也允许用户横向滚动并在向下滚动时滚动到内容的末尾.

For a more specific example on a iPhone 4s in landscape the container view is 263 width and 90 height. But the content it self is 263 width and 190 height. So I want the user to be able to scroll down to view the rest of that 100 worth of content. But currently it allows the user to scroll sideways as well and scroll past the end of the content when scrolling down.

如何解决这个问题，让用户无法滚动浏览内容?

How can I fix this so the user can't scroll past the content?

如果您需要任何其他详细信息或信息，请告诉我.解释故事板细节有时可能有点棘手，因此我很乐意提供任何其他细节以使其更加清晰.

Please let me know if you need any additional details or information. Explaining storyboard details can sometimes be a bit tricky so I would be happy to provide any additional details to make it more clear.

推荐答案

很像你其他问题的答案，关键是要了解 Scroll View 的内容确定可滚动区域.

Much like the answer to your other question, the key is to understand that the Scroll View's content determines the scrollable area.

假设您将TopLabel"约束设置为 Lead: 0 和 Top: 0.标签将位于内容的左上角，并将定义内容的左上角滚动视图的内容框架.

Suppose you have "TopLabel" constraints set to Leading: 0 and Top: 0. The label will be at the upper-left corner of the content and will define the upper-left corner of the scroll view's content frame.

现在将BottomLabel"放在右下方，并将约束设置为 Trailing: 0 和 Bottom: 0.

Now put "BottomLabel" below and to the right, and set constraints to Trailing: 0 and Bottom: 0.

此时，自动布局不知道将BottomLabel"的Top和Left部分放在哪里，因为可滚动区域未完全定义.

At this point, auto-layout doesn't know where to put the Top and Left part of "BottomLabel" because the scrollable area is not fully defined.

所以，如果你给BottomLabel"的Leading: 60 和Top: 400 添加约束，BottomLabel"的左上角将被放置在60,400 并且可滚动区域 - 滚动视图的 contentSize - 将是 60 +​​ BottomLabel 的宽度 x 400 + BottomLabel 的高度

So, if you add constraints to "BottomLabel" of Leading: 60 and Top: 400, the Top-Left corner of "BottomLabel" will be placed at 60,400 and the scrollable area - the scroll view's contentSize - will be 60 + width of BottomLabel x 400 + height of BottomLabel

为了避免滚动超过您想要查看的最后一个视图/图像/标签，您需要确保 元素的约束控制了滚动视图内容的宽度和高度.

To avoid scrolling past the last view / image / label that you want to see, you need to make sure that element's constraints are controlling the width and height of the scrollview's content.

这篇关于iOS 滚动视图允许滚动过去的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！