前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >在Swift中创建可缩放的图像视图

在Swift中创建可缩放的图像视图

作者头像
玖柒的小窝
修改2021-11-05 14:49:17
修改2021-11-05 14:49:17
5.7K0
举报
文章被收录于专栏:各类技术文章~各类技术文章~
在你的iOS应用中添加捏合变焦功能的分步指南

照片:Markus WinkleronUnsplash

没有什么比完美的图片更能让你的应用程序熠熠生辉,但如果你想让你的应用程序用户真正参与并与图片互动呢?也许他们想放大、平移、掌握这些图像?

在本教程中,我们将建立一个可缩放、可平移的图像视图来实现这一功能。

计划

他们说,一张图片胜过千言万语--但它不一定要花上一千行代码!对于我们的可缩放图像视图,我们要做的是让它成为一个可缩放的视图。对于我们的可缩放图像视图,我们将利用UIScrollView的缩放和平移功能。基本上,我们将在UIScrollView中嵌套一个包含图片的UIImageView,它将处理所有我们扔给它的缩放、平移(和点击!)手势。

创建一个PanZoomImageView

让我们先创建一个PanZoomImageView类,它子类于UIScrollView。我们将用一个UIImageView来初始化这个类,它将被添加为一个子视图。我们希望能够以编程方式和通过Interface Builder使用PanZoomImageView,所以让我们处理不同的初始化器,并创建一个通用的init。

medium.com/media/afad3…

在commonInit()中,我们将图像视图居中,并设置它的高度和宽度,而不是把它固定在父视图上。这样一来,滚动视图就会从图像视图中获得其内容大小。

设置滚动视图

我们需要实际设置我们的滚动视图,使其可缩放和可平移。这包括设置最小和最大的缩放级别,以及指定用户放大时使用的UIView(在我们的例子中,它将是图像视图)。让我们来设置滚动视图(为清晰起见,添加一些注释)。

medium.com/media/46304…

在这里,我们设置最小和最大的缩放级别,确保滚动指示器被隐藏(我们不希望它们破坏我们美丽的图像!),然后我们设置PanZoomImageView类作为滚动视图的委托。Xcode可能会开始抱怨,因为PanZoomImageView还不符合UIScrollViewDelegate--让我们接下来做这个。

medium.com/media/56e86…

这很简单--我们想让我们的图像成为缩放和平移时显示的视图,所以我们只是返回我们的imageView。

设置我们的图像

很好!我们有了一个UIIm我们已经有了一个嵌套在UIScrollView中的UIImageView,一切都应该是可滚动和可平移的。但是我们如何设置我们的图像呢?我们将通过在我们的类中添加imageName字符串,并在字符串改变时更新UIImageView来实现。我们还将把imageName标记为@IBInspectable,这样就可以通过Interface Builder来设置它。

medium.com/media/706de…

好了,我想我们已经准备好使用我们的新类了!打开Main.storyboard,添加一个视图,以你喜欢的方式把它固定在父视图上。接下来,选择该视图,导航到身份检查器,并将该类设置为PanZoomImageView。

导航到属性检查器,你应该看到 "图像名称 "属性(这代表我们设置为@IBInspectable的imageName字符串!)。在这里输入你想嵌套在视图中的图片名称。

是时候建立和运行了!一切顺利的话,你应该看到类似下面的东西。试试平移和缩放(如果你使用的是模拟器,按住 "option "键)--你会对你的图像有一个全新的视角

以编程方式初始化视图

在使用界面生成器时,这很好--但如果你想以编程方式初始化视图呢?让我们给我们的类添加另一个初始化器,这样我们就可以在代码中设置图像名称。

medium.com/media/074d4…

就这样了!现在我们可以像这样通过图片名称以编程方式初始化我们的视图了。

medium.com/media/46fac…

让我们来看看我们的类的整体情况。

medium.com/media/825ab…

双击手势(可选

可缩放视图的一个常见功能是双击放大和缩小的能力。这对我们的类来说是一个相对简单的补充,所以接下来让我们来添加这个功能。我们将创建一个UITapGestureRecognizer,当用户双击时,用它来改变滚动视图的缩放比例。

medium.com/media/8d884…

就是这样!我们现在可以通过双击来缩放。我们现在可以通过双击来放大/缩小我们的图片了。

最后的思考

这是一个伟大的可重复使用的类,只要你想让图片变大,你就可以把它拿出来。添加这种额外的功能可以真正帮助人们参与到你的应用程序中显示的图片中,而且通常是用户所期望和要求的功能。

这也不仅仅适用于图片视图--如果你想让UIView可缩放,你可以采取同样的方法,用UIView而不是图片名称初始化你的类。可以尝试一下!

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 在你的iOS应用中添加捏合变焦功能的分步指南
  • 计划
  • 创建一个PanZoomImageView
  • 设置滚动视图
  • 设置我们的图像
  • 以编程方式初始化视图
  • 双击手势(可选
  • 最后的思考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档