笔者前段时间有一次面试，面试过程中无意中说到做过一个自定义的图片预览组件，其实那时候那个组件一直没有优化，全屏放大都没有做，简直惨不忍睹。结果可想而知，笔者被打击了。笔者向来不服输，不信邪，从不相信有什么事是智力解决不了的，如果有，就智力再加钱！
哈哈，好了，又开始逗比了……
说正事，笔者做的组件效果图如下：
一、功能演示
-
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(iScreenWidth, 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。
- 喜欢的，支持点赞就是给我最大的安慰。
网友评论