老铁们,大家好,相信还有很多朋友对于深入解析:功能全面的图片浏览器实现,支持GIF格式(第一部分)和的相关问题不太懂,没关系,今天就由我来为大家分享分享深入解析:功能全面的图片浏览器实现,支持GIF格式(第一部分)以及的问题,文章篇幅可能偏长,希望可以帮助到大家,下面一起来看看吧!
我们可以直接处理ImageView在双击时的变换来实现缩放,并且我们还可以添加一点动画来使这个过程更加自然。看来这是一个操作简单的方法。我们知道UIScrollView 本身会为我们处理缩放。函数,用它来响应双击手势也许是可行的,但是我还没有完全确定,那就是用UIScrollView,因为还有其他的函数没有分析如何实现。 2.支持图片的捏合来实现缩放,要实现这个功能,当我们看到捏合这个词时,我们的第一反应一定是给ImageVIew添加一个UIPinchGestureRecognizer手势来处理。是的,确实可以考虑添加捏合手势。
将UIPinchGestureRecognizer 添加到ImageVIew 中,然后在手势响应中相应处理ImageView 的变换以实现捏合。然而,这个过程中如何处理变换,确实很麻烦。我们知道UIScrollView本身就为我们处理了缩放功能。只需要非常简单的配置就可以实现捏合功能
清楚了上面两点,选择UIScrollView来实现图片的各种手势效果无疑是简单的, 所以就选择了UIScrollView, 所以这样很自然的就想到了每一张图片的View层次, 最底层是一个UIView做容器,同时用来成为UIScrollView的代理, 然后在上面添加UIScrollView来响应手势和缩放, 最后在上面添加ImageView来添加图片
实现部分
新建一个继承自UIView的PhotoView类,在PhotoView中依次添加UIScrollView和UIImageView
延迟加载sub-control.png 设置UIScrollView和UIImageView的frame 这里需要注意的是,在设置UIImageView的frame时,如果将它的frame设置到UIScrollView的bounds,会发生的情况是当图片放大的时候,因为是ImageView 是整体放大的,所以除了图像以外的区域也被放大了。浏览效果是这样的。我不得不抱怨一些应用程序处理它如此简单。
空白区域被放大.gif
并且我们希望imageView的宽度和高度与设置的图像的宽度和高度相同或成比例,这意味着图像将完全填充imageView。效果是这样的
空白区域未放大。 GIF处理UIScrollView来实现缩放。要实现缩放,只需要设置三个地方即可。
1、设置scrollView的最大和最小缩放倍数。注意,最大倍数必须大于最小倍数(注意不能大于等于)。
滚动视图.maximumZoomScale=2.0
滚动视图.minimumZoomScale=1.0
2. 设置代理
滚动视图.delegate=self
3.实现缩放的代理方法。在此代理方法中,返回要缩放的对象。当然,在我们的例子中它是imageView。完成这三个步骤后,就可以实现双指缩放了。
func viewForZoomingInScrollView(scrollView: UIScrollView) -UIView? {
返回图像视图
}
恩好完成上面几步后, 我们就已经完成了图片的捏合缩放功能, 不过这里有个问题, 在缩小的时候, 我发现图片没有居中, 我们肯定希望图片居中缩放
无法放大center.gif
所以UIScrollView中的这个代理方法可以让我们监听缩放过程,这样我们就可以处理imageView的位置
func scrollViewDidZoom(scrollView: UIScrollView) {
//在中心显示图像。可以用if语句来理解。但是使用if(####)后发现效果不对。我没有找到原因。
让offsetX=(scrollView.zj_widthscrollView.contentSize.width)? (scrollView.zj_width -scrollView.contentSize.width)*0.5 : 0.0
让offsetY=(scrollView.zj_heightscrollView.contentSize.height)? (scrollView.zj_height-scrollView.contentSize.height)*0.5 : 0.0
imageView.center=CGPoint(x:scrollView.contentSize.width * 0.5 + offsetX, y:scrollView.contentSize.height * 0.5 + offsetY)
}加上这一小段代码后,效果是这样的,我还是很满意的。
居中Zoom.gif 添加单击和双击手势。注意,需要解决单击和双击手势之间的冲突let singleTap=UITapGestureRecognizer(target: self, action: #selector(self.handleSingleTap(_:)))
singleTap.numberOfTapsRequired=1
singleTap.numberOfTouchesRequired=1
让doubleTap=UITapGestureRecognizer(target: self, action: #selector(self.handleDoubleTap(_:)))
doubleTap.numberOfTapsRequired=2
doubleTap.numberOfTouchesRequired=1
//允许先执行doubleTap,当doubleTap执行失败时执行singleTap。
//如果不设置,则只执行singleTap,不会执行doubleTap。
singleTap.requireGestureRecognizerToFail(doubleTap)
添加手势识别器(singleTap)
addGestureRecognizer(doubleTap) 对单击手势的响应。每张图片本身都不处理点击手势。我们希望后续的PhotoBrowser能够处理,所以这里使用了Closure。
//点击手势由外界处理
func handleSingleTap(ges: UITapGestureRecognizer) {
singleTapAction?(手势: ges)
}双击手势处理,放大或缩小
ifscrollView.zoomScale=scrollView.minimumZoomScale { //放大
scrollView.setZoomScale(scrollView.maximumZoomScale,animated: true)
} else {//缩小很简单,直接设置缩放系数即可。这里我想缩放到最小
scrollView.setZoomScale(scrollView.minimumZoomScale,animated: true)
}
这样就处理好了双击的放大和缩小, 但是目前的放大到最大区域的时候, 并不是我们想要的放大点击区域的效果, 所以放大肯定还需要单独的处理
固定放大.gif 经过一番研究,下面的处理效果还是比较满意的
ifscrollView.zoomScale=scrollView.minimumZoomScale { //放大
让位置=ges.locationInView(scrollView)
//放大scrollView.maximumZoomScale倍并减少其宽度和高度这么多倍
让宽度=scrollView.zj_width/scrollView.maximumZoomScale
让高度=scrollView.zj_height/scrollView.maximumZoomScale
//这需要一些数学转换。
让矩形=CGRect(x: 位置.x * (1 - 1/scrollView.maximumZoomScale), y: 位置.y * (1 - 1/scrollView.maximumZoomScale), width: 宽度, height: 高度)
//此方法将根据提供的矩形进行缩放。如果给定的宽度和高度小于scrollView的宽度和高度,则会执行相应的放大操作。如果更大,则操作将减少到最少。
滚动视图.zoomToRect(矩形,animated: true)
} else {//减少
scrollView.setZoomScale(scrollView.minimumZoomScale,animated: true)
}至此,单图的处理基本完成,运行效果与原来的单图类似。如果你只需要显示单个图像,那么这个图像浏览器已经非常完善了。当然,我相信,您肯定希望能够处理多张图片。具体实现将在下一篇文章中介绍。欢迎关注。
详情请移步源码,源码中有详细的demo使用示例。如果您觉得有帮助,不妨给个star,欢迎关注。
【深入解析:功能全面的图片浏览器实现,支持GIF格式(第一部分)】相关文章:
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
现在市场上好多照片浏览器都只支持静态图片,看到有个能用GIF真是太开心了!
有14位网友表示赞同!
感觉这应该是对很多网友的需求吧,因为很多人日常都会用手机看动态图片或者小gif。
有10位网友表示赞同!
这个功能完善的PhotoBrowser,到底有多完善呢?期待详细介绍啊!
有5位网友表示赞同!
支持GIF是挺好的,希望还能支持其他类型的多媒体文件,比如短视频什么的。
有10位网友表示赞同!
界面简洁易用很重要!如果这个PhotoBrowser能做到像微信那样的设计,我一定会试试看。
有17位网友表示赞同!
能不能优化一下图片加载速度啊?尤其是网络波动的时候,有时候加载GIF都加载半天了很卡。
有15位网友表示赞同!
我喜欢批量下载图片的功能,希望这个PhotoBrowser也能支持下载GIF文件。
有9位网友表示赞同!
除了浏览功能,会不会还有其他一些特效或者滤镜效果可以玩吗?
有20位网友表示赞同!
分享给朋友的功能也很重要啊,方便在不同平台快速分享看到的精彩图片和GIF。
有18位网友表示赞同!
对于拍照比较多的我来说,一个能轻松管理照片的PhotoBrowser就超级实用。
有19位网友表示赞同!
希望能支持多屏浏览,比如两个屏幕同时展示不同的图片或者GIF会很棒!
有14位网友表示赞同!
还有夜间模式吗?用手机看图的时候用夜间模式护眼真舒服!
有10位网友表示赞同!
希望这个PhotoBrowser以后能持续更新,添加更多丰富的功能,变得越来越强大。
有6位网友表示赞同!
我最喜欢的就是可以自定义图片排列方式的功能,这样能让我的照片库井然有序。
有13位网友表示赞同!
如果支持多种语言版本就好了,这样全世界的人都能够使用它!
有13位网友表示赞同!
能不能提供一些在线协作功能呢?比如和朋友一起分享图片或者GIF进行编辑什么的。
有20位网友表示赞同!
我觉得这个PhotoBrowser如果能与其他APP联动,比如社交平台或者云存储,会更方便!
有17位网友表示赞同!
对于喜欢拍照的朋友来说,一个好用的PhotoBrowser真的是必须的!
有12位网友表示赞同!
希望这款PhotoBrowser能够成为大家日常生活的一部分!
有18位网友表示赞同!