Swift版照片叠放视图:PhotoStackView

jopen 9年前

前言

之前流行过一种图片展示视图——photo stack,即照片叠放视图。大致上是这个样子的:
示例
(图片出自code4app)
现在我们已经能够使用UICollectionViewLayout来实现这种视图了。Apple给的示例代码中就有这样一个layout,并且示例代码中不仅仅是展示这样的视图,还有非常棒的layout过度动画(结合手势)。在这之前,也有非常多的开源代码能实现这样的效果。本文正是借鉴了开源的源代码“PhotoStackView”,使用Objective-C实现,并且带手势移动图片的功能。由于这是上一学期课设的时候拿来用的库,结果现在找不到了,无法给出链接,还望见谅。

最后的效果图如下

  • 移动、添加与删除
    stackView1

  • 下一张
    stackView2

这样重复造轮子的目的是什么呢?一方面,不使用UICollectionViewLayout而是纯粹的用UIView来实现,提高灵活性,方便 “私人订制”。另一方面,学习大神的源代码,从中学习一下自定义库的书写方式等。最后,swift。。天杀的swift,是谁说swift对新手友好来着表情
当然,这里也不是简单的对源代码的搬运、抄袭与翻译,我还根据自己的需要给他改了一个bug,添加了一些功能,比如全屏展示与返回等。示例图如下:

  • 全屏展示
    stackView3

(图片有些卡,测试运行时还是非常流畅的)

思路

  • 使用若干和自己一样大的view来装载图片,每次添加新图片到视图上时为其随机旋转一定角度,把最前面的这张旋转角度设为0。
  • “view装载图片”的意思是,view里面放一个imageView,为什么不直接用imageVIew呢?因为我们要放边框,边框可以是图片,另外在highlighted状态下也可以用图片或自定义颜色铺在图片上,因此使用一个view统一管理
  • 添加pan手势,当手指移动时让view跟着做相应平移,手指松开时根据velocity决定返回还是移到最后
  • 综上,我们还需要不少辅助方法,例如获取顶部图片和其下标、使用动画移动view、让view旋转到某一度数等
https://github.com/YiZhuoChen/PhotoStackView-Swift