UI 滚动视图未按预期滚动

Posted 2023-03-10

【中文标题】UI 滚动视图未按预期滚动

【英文标题】：UI Scroll View doesn't scroll as intended

【发布时间】：2015-12-04 01:18:06

【问题描述】：

使用故事板和自动布局，我将滚动视图拖到视图控制器中并适当地满足自动布局约束。我在屏幕中心添加了一个带有适当自动布局约束的标签。

在viewDidLoad、viewWillAppear和viewDidLayoutSubviews中实现了如下代码（当然在不同的运行时间）

scrollView.contentSize.height = 1000

在模拟器中运行时，视图仅水平滚动而不是垂直滚动。起初看到它在没有应用特定条件的情况下水平滚动时没有意义，直到我仔细研究了约束。

当最初在 UIScrollView 中拖动并选择 Pin 选项以添加约束时，它显示前导和尾随空格的默认值为 -20 而不是 0。这似乎解释了自动水平滚动，但仍然没有解释为什么我无法实现垂直滚动。

我也尝试过使用 CGSize 指定内容大小：

scrollView.contentSize = CGSize(400, 1000)

或

scrollView.contentSize = CGSize(view.frame.width, 1000)

似乎都不起作用。我还使用初始化程序 CGSizeMake(width, height) 实现了具有相同参数的上述方法，但也不起作用。

在选择滚动视图时，默认情况下会检查滚动和其他选项是否已启用。

【问题讨论】：

您应该向我们展示您的标签的限制条件。

在第一次阅读您的评论时，我认为标签约束的相关性并不重要，但让我思考，我只是删除了标签，只留下滚动视图，它现在按预期滚动。不敢相信这是阻碍视线的标签。抱歉这样的菜鸟错误，感谢大开眼界@beyowulf

@beyowulf 我的约束是超级视图（滚动视图）的前导、尾随、底部和顶部间距。关于删除其阻止视图垂直滚动的控制的约束应该是什么的建议？

【参考方案1】：

您可以在容器视图中将约束设置为水平和垂直居中。这具有引发错误“滚动视图的内容大小不明确”的不幸影响。如果您知道要在代码中设置内容大小，则可以忽略它。

但最好的做法是拖出一个空的 UIView，将其称为 containerView，将其顶部/底部/左侧/右侧固定到滚动视图中心，如上面的标签。为 containerView 的高度设置一个约束。然后为 containerView 的高度约束创建一个 IBOutlet，称为 containerViewHeightConstraint。然后在代码中说：

self.containerViewHeightConstraint.constant = 1000 //or whatever height you want for scrolling 

【讨论】：

我在其他地方看到过你的建议。你能为我澄清一下步骤吗？ - 将滚动视图拖到视图控制器中。固定到顶部、底部、左侧、右侧。 - 将 uiview 拖入滚动视图并将其固定到滚动视图 - 然后将任何想要的视图拖入 uiview(2) 并适当地应用约束 - 将 uiview(containerView) 高度的约束设置为我想要工作的可滚动高度与 - 你建议的代码行我不明白它的目的，然后我会将滚动视图的内容 size.height 设置为 containerViews 高度

哦，是的。您可以在 IB 中设置或在代码中设置。由你决定。如果您事先知道，“我希望滚动视图内容大小正好为 1000”，请在 IB 中设置它。但是如果你想在运行时计算它。比如，“我希望它滚动这个标签高度+一些填充+这个其他标签高度+一些填充”，您可以使用上面的代码行动态设置它，在 viewDidLayoutSubviews 中或之后用一些计算替换 1000从服务器等获取一些数据。

太好了，谢谢。只是另一个小，而你的活动。我想要一个滚动视图，显示从视图顶部到彼此下方的三个标签到一半。然后在这些下面有一个表格视图，由于单元格的数量，其内容将超过内容大小。然后能够垂直滚动屏幕以显示隐藏的单元格（但滚动滚动视图而不是表格视图滚动视图）。我应该怎么做（如果你能回答）

我不确定我理解你想要什么。但是将表格视图添加到滚动视图通常很痛苦。如果您希望所有内容一起滚动，最好创建一个 tableview 整个视图控制器的视图高度。然后按照您想要的方式在表格视图的顶部布置一个带有标签的视图。然后在 viewDidLoad 中说 self.labelView.removeFromSuperView。然后在 viewDidLayoutSubviews 中说 self.tabelView.tableHeaderView = self.labelView 这样一切都会一起滚动。

如果您单击此链接，它将显示我试图解释的内容。 Link to image