注册

iOS-网络图片预览器(缩放,拖拽等手势)

预览效果(原位置启动,放大缩小,拖拽关闭,支持长图,跳转其他界面):

6275057eabb0c5a8a75e7a8c4be3a144.gif

dbf024d57092297e6a54f2a683b41079.gif

1b0a1abef06ee16db2470c5bd6ed2c1e.gif

97126eb0208d7ae60e0b1b93f419ed86.gif

视图结构:present跳转一个UINavigationController,UINavigationController的根跟控制是UIViewController,在viewcontroller上添加预览器。

功能实现:
1.使用UICollectionView,在UICollectionViewCell上有个一UIScrollView的容器,在上面使用UIImageView展示图片,使用UIScrollView是为了方便实现长图预览,图片放大缩小的功能。

2.网络图片大小的处理:
第一种情况,一般来说在网络较好的情况下都会在列表页(如图列表)时已经加载完图片,在cell中直接拿到图片对象获得大小,根据显示区域的比例计算宽高。

第二种情况,在显示预览时,图片还没有加载完成(图片较大,网络较卡),我会给一个默认的宽高,在网络图片加载完成时,重新刷新他的宽高。(Data形式获取宽高有性能问题,放弃了)

3.拖拽动画和手势的处理:
在UIScrollView上添加了一个UIPanGestureRecognizer拖动手势,开启手势共享。然后根据触摸屏幕时水平方向和垂直方向的速度来判断是进行UICollectionView的左右滑动还是拖拽。在拖拽手势中,根据移动的Y轴距离的和整个区的的高度比例来缩放UIScrollView(使用transform来缩放)

总结:基本能满足一些普通要求的项目,如果想添加更多功能,可以在viewcontroller上添加,改变预览器的显示区域等。

Demo地址

作者:约德尔人郭敬明
链接:https://www.jianshu.com/p/7dda7add67e6
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

0 个评论

要回复文章请先登录注册