极好用的轻量级图片查看器CRPreview

笔者前段时间有一次面试，面试过程中无意中说到做过一个自定义的图片预览组件，其实那时候那个组件一直没有优化，全屏放大都没有做，简直惨不忍睹。结果可想而知，笔者被打击了。笔者向来不服输，不信邪，从不相信有什么事是智力解决不了的，如果有，就智力再加钱！
哈哈，好了，又开始逗比了……
说正事，笔者做的组件效果图如下：

一、功能演示

pageControl格式及基础演示

Markdown

Markdown
页码“n/m”格式

Markdown

Markdown

二、笔者的解决方案思路

笔者一开始其实是有思路的，也认为这个功能是可以轻易解决的，不过过程肯定还是要走的，笔者首先深刻研究了微信朋友圈和QQ空间的图片预览方法，然后分析其原理，大致如下：

动画显示隐藏
图片不变形缩放
设计最大和最小缩放比例
单击、双击和长按手势及相应处理
双击不同位置放大的地方不同
图片直接滑动空隙
QQ空间的图片滑动过程中即可随时改变页码，并且页码栏延迟2秒左右隐藏。
预览时隐藏系统状态栏，结束预览时又重新显示状态栏。
保存图片
……还有评论点赞之类的乱七八糟的的功能这就先不说了，笔者CRPreview1.0版本先不做，包括网络图片加载。

三、相应功能及实现原理

获取当前控制器的View，用于显示组件CRPreview

 - (UIView *)currentControllerView {
 return [[[[UIApplication sharedApplication] keyWindow] subviews] lastObject];
 }
 - (void)show {
 [[self currentControllerView] addSubview:self];
 }

一组图片全屏预览

 for (int i = 0; i < [_images count]; i ++) {
 CRImageZoom *zoom = [[CRImageZoom alloc] initWithImage:_images[i]];
 zoom.frame = CGRectMake(i*ScreenWidth, 0, ScreenWidth, ScreenHeight);
 [zoom setDismissBlock:^(BOOL result) {
     [self dismiss];
 }];
 [_scrollView addSubview:zoom];
 }

单击空白处，设置需要隐藏当前预览框的block。

缩放
需要调用UIScrollViewDelegate方法，缩放View设置为_imageView

 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
   return _imageView;
 }

双击相应位置放大到设置的最大比例，再次双击回到原比例，单击则隐藏。

 // 双击
 UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(doubleTapHandle:)];
 doubleTap.numberOfTapsRequired = 2;
 doubleTap.numberOfTouchesRequired = 1;
 [self addGestureRecognizer:doubleTap];

设置双击事件，笔者根据触摸点和中心点的相对位置来设置scrollView的偏移量。

 [_scrollView setZoomScale:MaximumZoomScale];
 CGPoint tapPoint = [sender locationInView:_scrollView];
 CGPoint centerPoint = _scrollView.center;
 CGPoint point = CGPointMake(tapPoint.x-centerPoint.x, tapPoint.y-centerPoint.y);
 [_scrollView setContentOffset:point];

翻页页码PageNumberType显示分两种状态，pageControl格式和页码“n/m”格式，需要调用的时候自己设置PageNumberTypeControl或者PageNumberTypeCode。

 typedef NS_ENUM(NSInteger, PageNumberType) {
 PageNumberTypeControl = 0,   // 页下中间部分用UIPageControl显示
 PageNumberTypeCode           // 页上中间部分用页码格式 “n/m” 显示
 };

页码标签延迟消失

 dispatch_time_t time_t = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(PaginationShowSeconds * NSEC_PER_SEC));
 dispatch_after(time_t, dispatch_get_main_queue(), ^{
 _paginationLabel.hidden = YES;
 });

设置滑动到一半以上的偏移量自动更新
这是笔者做这个组件遇到最难的地方，注意，笔者没有参考其他任何预览组件的三方源码，全靠自己思考。大家注意到没有：QQ空间的图片预览在翻页的时候翻到一半就动态更新页码了，笔者也认为很简单，不过做起来不知道从何下手，因为一不小心你就会用到过多的代码来实现一个简单的东西，因为你没想到点子上。可能有些人会觉得，在- (void)scrollViewDidScroll:(UIScrollView *)scrollView 方法里面做个判断不就行了？但是，从什么地方判断，判断左右滑动的方向？偏移量和半个屏幕的宽度对比？还是？我都想过，并用代码来尝试，发现，过于复杂。
好了，笔者发现史上最简单的方法，那就是在该代理方法中获得实时的当前页，只要是页码符合index-0.5<=index<=index+0.5，标签就显示当前页，否则显示前一页或者后一页。
```
 - (NSInteger)updatedPageNumberByOffsetX:(CGFloat)offsetX {
 CGFloat currentPage = _currentIndex;
 CGFloat minOffset = (currentPage-0.5)*ScreenWidth;
 CGFloat maxOffset = (currentPage+0.5)*ScreenWidth;
 NSInteger index = 0;
 if (offsetX < minOffset) { // 显示前一页
 index = (_currentIndex-1)>=0?(_currentIndex-1):0;
 }
 else if (offsetX > maxOffset) { // 显示后一页
 index = (_currentIndex+1)<=([_images count]-1)?(_currentIndex+1):([_images count]-1);
 }
 else {
 index = _currentIndex; // 显示当前页
 }
 return index;
 }
```
全屏时隐藏系统状态栏，需要注意的是需要在info.plist文件里添加属性View controller-based status bar appearance，并设置为NO，否则代码不生效。
```
 [[UIApplication sharedApplication] setStatusBarHidden:YES];
```
保存到本地等

三、如何使用？

#import "CRPreview.h"

// 预览单个图片方法 (需要图片image)
CRPreview *preview = [[CRPreview alloc] initWithImage:image];
[preview show];

// 预览一组图片方法（需要图片数组_images）
CRPreview *preview = [[CRPreview alloc] initWithImages:_images atIndex:0];
preview.pageNumberType = PageNumberTypeCode; // 默认是PageNumberTypeControl样式
[preview show];

四、注意事项

由于时间有限，笔者还未添加加载网络图片的方法，不过后期会添加上去。
暂未添加显示及隐藏的动画效果，以及双击放大时位置可能有微小的bug，待修复，欢迎提供更好的思路帮助解决。
多多交流，共同提高，接受指正，有好的功能添加建议请告诉笔者，笔者一定感激不尽，GitHub地址:CRPreview，QQ号：1262078574。
喜欢的，支持点赞就是给我最大的安慰。