如何使在Swift中使用UIScrollView进行滚动和缩放

Posted 2023-05-17

UIScrollView是ios中非常有用的一个组件。它是通用组件UITableView的基类也是放置尺寸大于一个屏幕的内容时很好的组织方式。本教程会介绍UIScrollView的下列用法:
如何使用UIScrollView浏览大尺寸图片。
如何在缩放时保持UIScrollView中的内容居中.
如何在UIScrollView中嵌入复杂的显示层次关系。
如何使用UIScrollView的分页（paging）特性, 联合使用UIPageControl在不同页面之间移动。
通过“偷窥”UIScrollView得到前一页，后一页还有当前页的缩略图。
其他内容!
本文假设你熟悉Swift语言和IOS开发。如果你完全是一名初学者, 你可能需要先学习一下本站的其他课程。
本文还假设你知道如何使用Interface Builder在view中添加对象和在你的代码和Storyboard连接outlets。 如果你刚刚接触Storyboards和Interface Builder, 你可以在开始本教程之前线学习一下本站的Storyboards教程。
开始
打开Xcode创建工程。选择File\New\Project…, 接下来选择iOS\Application\Single View Application模版。 在product name输入框中输入ScrollViews, language选择Swift, devices选择 iPhone.

单击Next选择工程文件的保存位置。
之后下载工程的资源压缩包, 然后将解加压后的文件拖拽到工程的根目录。并确保选中了“Copy items if needed”复选框。

本文会介绍Scroll view 的四种不同使用方式, 工程采用一个tableview来提供这四个选项。每个选项打开一个新的视图控制器（view controller）来展示scroll views的一种用法。
下图展示了完成时storyboard的状态：

通过下列步骤创建一个tableview:
打开Main.storyboard删除当前场景。 选择view controller (单击 storyboard) 然后删除它。
关闭Auto Layout功能。在Utilities面板中选择File Inspector, 取消Use Auto Layout复选框的选中状态。这会弹出一个警告窗口。在弹出窗口中确保“Keep size class data for:”选中了iPhone。然后选择Disable Size Classes。

接下来, 添加一个Table View Controller，从Object Library中拖拽一个Table View Controller到storyboard。
选中刚添加的table, 然后在菜单中选择Editor\Embed In\Navigation Controller。
同时选中table view和table view controller, 将Attributes Inspector中的content type修改为Static Cells。

在文档概要视图中Table View单击下面的按钮显示storyboard层次关系视图，然后选中Table View Section. 将行数设置为4。

依次编辑table view的每一行, 将style设置为Basic，编辑显示的标签:
Image Scroll
Custom View Scroll
Paged
Paged with Peeking
注释: 由于你将每一行的style设置成了“Basic”, 表单的每一行会出现额外的标签子组件。你要再次展开每行的子项目来进行编辑。
保存storyboard, 之后构建并运行 参考技术A 　　UIScrollView是IOS中非常有用的一个组件。它是通用组件UITableView的基类也是放置尺寸大于一个屏幕的内容时很好的组织方式。本教程会介绍UIScrollView的下列用法:
　　如何使用UIScrollView浏览大尺寸图片。
　　如何在缩放时保持UIScrollView中的内容居中.
　　如何在UIScrollView中嵌入复杂的显示层次关系。
　　如何使用UIScrollView的分页（paging）特性, 联合使用UIPageControl在不同页面之间移动。
　　通过“偷窥”UIScrollView得到前一页，后一页还有当前页的缩略图。
　　其他内容!
　　本文假设你熟悉Swift语言和IOS开发。如果你完全是一名初学者, 你可能需要先学习一下本站的其他课程。
　　本文还假设你知道如何使用Interface Builder在view中添加对象和在你的代码和Storyboard连接outlets。 如果你刚刚接触Storyboards和Interface Builder, 你可以在开始本教程之前线学习一下本站的Storyboards教程。
　　开始
　　打开Xcode创建工程。选择File\New\Project…, 接下来选择iOS\Application\Single View Application模版。 在product name输入框中输入ScrollViews, language选择Swift, devices选择 iPhone.

　　单击Next选择工程文件的保存位置。
　　之后下载工程的资源压缩包, 然后将解加压后的文件拖拽到工程的根目录。并确保选中了“Copy items if needed”复选框。

　　本文会介绍Scroll view 的四种不同使用方式, 工程采用一个tableview来提供这四个选项。每个选项打开一个新的视图控制器（view controller）来展示scroll views的一种用法。
　　下图展示了完成时storyboard的状态：

　　通过下列步骤创建一个tableview:
　　打开Main.storyboard删除当前场景。 选择view controller (单击 storyboard) 然后删除它。
　　关闭Auto Layout功能。在Utilities面板中选择File Inspector, 取消Use Auto Layout复选框的选中状态。这会弹出一个警告窗口。在弹出窗口中确保“Keep size class data for:”选中了iPhone。然后选择Disable Size Classes。

　　接下来, 添加一个Table View Controller，从Object Library中拖拽一个Table View Controller到storyboard。
　　选中刚添加的table, 然后在菜单中选择Editor\Embed In\Navigation Controller。
　　同时选中table view和table view controller, 将Attributes Inspector中的content type修改为Static Cells。

　　在文档概要视图中Table View单击下面的按钮显示storyboard层次关系视图，然后选中Table View Section. 将行数设置为4。

　　依次编辑table view的每一行, 将style设置为Basic，编辑显示的标签:
　　Image Scroll
　　Custom View Scroll
　　Paged
　　Paged with Peeking
　　注释: 由于你将每一行的style设置成了“Basic”, 表单的每一行会出现额外的标签子组件。你要再次展开每行的子项目来进行编辑。
　　保存storyboard, 之后构建并运行。你会看到你编辑的table view如下图所示.不过现在table view中还没有任何东西 – 但你可以改好它！

在 UIScrollView (Swift) 中使用动态内容调整 UiView 高度

【中文标题】在 UIScrollView (Swift) 中使用动态内容调整 UiView 高度

【英文标题】：Resizing UiView Height With Dynamic Content in UIScrollView (Swift)

【发布时间】：2015-05-22 14:44:20

【问题描述】：

我在 UIScrollView 中有 UIView 并已从 Interface Builder 连接它们：

@IBOutlet weak var articleScroll: UIScrollView!
@IBOutlet weak var articleSubview: UIView!

我有动态内容进入 UIView，我希望将其高度绘制为与内容一样大（以便滚动）。我认为使用 .last 结合内容的高度来查找 origin.y 就可以了：

var scroll = self.articleSubview
var lastItem = scroll.subviews.last as! UIView
var lastOriginY = lastItem.frame.origin.y
var lastHeight = lastItem.frame.size.height
var finalHeight = lastOriginY+lastHeight

    scroll.frame = CGRectMake(0 , 0, lastItem.frame.size.width, finalHeight)

构建成功，但没有滚动。我尝试添加：

articleScroll.userInteractionEnabled = true

但这并没有什么不同。我做错了什么？

更新：

已经解决了。实际的滚动视图必须调整大小，而不是子视图。不要使用 scroll.frame，而是 UIScrollView 上的“contentSize”是要走的路。：

self.articleScroll.contentSize = CGSizeMake(lastItem.frame.size.width, finalHeight)

【问题讨论】：

你了解滚动视图的contentSize吗？

@matt，你告诉我我犯错的地方。我应该调整滚动视图的大小而不是内容。呃...请给出答案，我会接受。谢谢！

当然，很高兴我能够引导您朝着正确的方向前进。添加它作为答案。

【参考方案1】：

UIScrollView 的可滚动性（是一个词吗？）取决于其contentSize 与其边界大小的关系。这个想法是让contentSize 接受内容；如果它大于滚动视图的边界大小，则用户可以滚动。

您的代码没有在任何地方设置contentSize。它需要！

【参考方案2】：

调整滚动大小，滚动视图有一个名为scroll.scrollRectToVisible(<rect: CGRect>, animated: <Bool>) 的方法 滚动到框架。