简介
虽然目前市面上有一些不错的加密相册App，但不是内置广告，就是对上传的张数有所限制。本文介绍了一个加密相册的制作过程，该加密相册将包括多密码（输入不同的密码即可访问不同的空间，可掩人耳目）、WiFi传图、照片文件加密等功能。目前项目和文章会同时前进，项目的源代码可以在github上下载。
点击前往GitHub
概述
上一篇文章主要介绍了照片的保存、删除批处理的实现。这篇文章将介绍图片浏览器原图浏览、缩放和滑动切换图片的实现细节。
图片缩放的实现
总体说明
可以利用UIScrollView的zoom相关属性和方法来处理视图的缩放，它支持捏和手势。在scrollView上有代理方法说明缩放作用于哪个视图，如下。
- (nullable UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
通过下面的属性可以设置缩放尺度以及当前缩放值。
@property(nonatomic) CGFloat minimumZoomScale; // default is 1.0
@property(nonatomic) CGFloat maximumZoomScale; // default is 1.0. must be > minimum zoom scale to enable zooming
@property(nonatomic) CGFloat zoomScale; // default is 1.0
可以将适应屏幕的图片尺寸的scale设置为1.0，最大缩放值取决于原图尺寸，如果原图尺寸对应的scale小于5.0则取5.0，否则取原图尺寸，这样可以保证小图也可以被缩放。
在改变图片尺寸的同时，将scrollView的contentSize进行同样的设置，这样可以保证通过滑动到达图片的不同部分，且左右滑动时先滚动到图片边缘再进行图片切换。
类结构
对于原图浏览，每张图片都是一个UIScrollView的子类，对图片单击会将事件向外传递，对应导航栏和工具栏的隐藏和显示状态翻转，双击会进行原图状态（SGImageViewStateOrigin）和适应屏幕状态的翻转（SGImageViewStateFit），采用捏合手势会使得图片进入中间状态（SGImageViewStateNone），具体实现如下。
typedef NS_OPTIONS(NSInteger, SGImageViewState) {
SGImageViewStateNone = 0,
SGImageViewStateFit,
SGImageViewStateOrigin
};
// 用于将单击事件向外传递的block定义
typedef void(^SGZoomingImageViewTapHandlerBlock)(void);
@interface SGZoomingImageView : UIScrollView
@property (nonatomic, assign) SGImageViewState state;
// 用于显示图片的ImageView
@property (nonatomic, strong) UIImageView *innerImageView;
// 用于判断当前显示的是缩略图还是原图，用于内存优化，下文讲解
@property (nonatomic, assign) BOOL isOrigin;
// 单击事件回调block的setter
- (void)setSingleTapHandler:(SGZoomingImageViewTapHandlerBlock)handler;
// 将图片缩放到适应屏幕（图片宽度等于屏幕宽度）
- (void)scaleToFitAnimated:(BOOL)animated;
// 将图片缩放到原始尺寸
- (void)scaleToOriginSize:(BOOL)animated;
// 翻转适应屏幕与原始尺寸，如果处于中间状态，则缩放到原图
- (void)toggleState:(BOOL)animated;
@end
单击和双击的处理
由于双击经过了单击，因此双击之前必定触发单击，这里为了保证双击和单击单独触发，有两种解决方案。
一是通过UIGestureRecognizer的requireGestureRecognizerToFail:方法设置手势触发的依赖，定义两个tap手势分别需要单击和双击触发，并且单击事件要求双击失败才能触发，当双击事件失败后，才触发单击事件。
二是在单击时不直接执行相关逻辑，而是使用performSelector:::的延时方法，将逻辑执行滞后，接下来如果触发了双击事件，则在双击事件里对之前的延时执行方法进行取消，取消方法为NSObject的类方法，具体实现如下。
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
NSInteger tapCount = touch.tapCount;
switch (tapCount) {
case 1:
// 单击逻辑延时执行
[self performSelector:@selector(handleSingleTap) withObject:nil afterDelay:0.2];
break;
case 2:
// 双击逻辑
[self handleDoubleTap];
break;
default:
break;
}
[[self nextResponder] touchesEnded:touches withEvent:event];
}
- (void)handleDoubleTap {
// 取消单击事件的逻辑
[NSObject cancelPreviousPerformRequestsWithTarget:self];
// 翻转图片的原图与适应屏幕状态
[self toggleState:YES];
}
缩放处理
每个SGZoomingImageView的image由外部负责传入，如果按照屏幕宽度来调整imageView，使得照片宽度正好等于屏幕宽度，则是适应屏幕显示模式，实现代码如下。
- (void)scaleToFitAnimated:(BOOL)animated {
self.state = SGImageViewStateFit;
_animationDuration = 0.3f;
UIImage *image = self.innerImageView.image;
CGFloat imageW = image.size.width;
CGFloat imageH = image.size.height;
CGSize visibleSize = [UIScreen mainScreen].bounds.size;
// 计算等比缩放到图片宽度等于屏幕宽度
CGFloat scale = visibleSize.width / imageW;
imageW = visibleSize.width;
imageH = imageH * scale;
// 调整contentSize，计算imageView在scrollView上的位置，对于是否使用动画有两次调用，因此使用block保存该代码块
void (^ModifyBlock)() = ^{
// 以适应屏幕的显示模式作为缩放基准
self.zoomScale = 1.0f;
self.contentSize = self.bounds.size;
CGRect frame = self.innerImageView.frame;
frame.size.width = imageW;
frame.size.height = imageH;
frame.origin.x = (self.contentSize.width - imageW) * 0.5f;
frame.origin.y = (self.contentSize.height - imageH) * 0.5f;
self.innerImageView.frame = frame;
};
if (animated) {
[UIView animateWithDuration:_animationDuration animations:^{
ModifyBlock();
}];
} else {
ModifyBlock();
}
}
根据image的尺寸去显示，则是原图模式，实现该模式的方法是先获取image尺寸，并将imageView的尺寸和contentSize设置为image尺寸，位置为scrollView的contentSize的中心，实现代码如下。
- (void)scaleToOriginSize:(BOOL)animated {
self.state = SGImageViewStateOrigin;
UIImage *image = self.innerImageView.image;
CGFloat imageW = image.size.width;
// 计算原图时的缩放比
CGFloat scale = imageW / self.bounds.size.width;
// 更新scrollView的最大缩放比例为原图时的缩放比
self.maximumZoomScale = scale;
void (^ModifyBlock)() = ^{
self.zoomScale = scale;
self.innerImageView.center = CGPointMake(self.contentSize.width * 0.5f, self.contentSize.height * 0.5f);
self.contentOffset = CGPointMake((self.contentSize.width - self.bounds.size.width) * 0.5f, (self.contentSize.height - self.bounds.size.height) * 0.5f);
};
if (animated) {
[UIView animateWithDuration:0.3 animations:^{
ModifyBlock();
}];
} else {
ModifyBlock();
}
}
图片切换的原理
上节介绍了显示每一张图片的类SGZoomingImageView，要切换图片，则需要一个分页的scrollView，来容纳每一个SGZoomingScrollView，结构如下图所示。
这样的问题在于两张图片间没有间距，为了解决这个问题，我们让scrollView的boundWidth大于屏幕一个d的间距，让每一个SGZoomingScrollView宽度增加2d，并且设置左右缩进各一d，则可以在每个图片之间留出d的间距，这时候图片并不能正对在屏幕上，而是向右偏离了d，因此需要将scrollView的x坐标设置为-d，从而对齐屏幕与图片边缘，示意图如下。
设照片之间的间距为PhotoGutt，则实现间隔的代码如下。
- 原图浏览时需要传入照片浏览器对象browser，根据browser的数据源来生成scrollView上的多个图片来实现滚动，下面代码中的方法为browser的setter，它属于原图浏览控制器视图SGPhotoView(继承了UIScrollView)，具体细节在后面的文章中介绍，这里只是为了说明带间距图片的计算过程。
- (void)setBrowser:(SGPhotoBrowser *)browser {
_browser = browser;
// 通过照片浏览器数据源的block回调获得照片模型数据个数，关于数据源的介绍可以在前面的文章中找到。
NSInteger count = browser.numberOfPhotosHandler();
// 获取屏幕尺寸作为照片显示的基准，这里暂时没有对横屏适配
CGSize visibleSize = [UIScreen mainScreen].bounds.size;
NSMutableArray *imageViews = @[].mutableCopy;
// 首先将照片加宽2d
CGFloat imageViewWidth = visibleSize.width + PhotoGutt * 2;
// 页面宽度等于加宽的照片宽度
_pageW = imageViewWidth;
// 计算scrollView总宽度
self.contentSize = CGSizeMake(count * imageViewWidth, 0);
for (NSUInteger i = 0; i < count; i++) {
SGZoomingImageView *imageView = [SGZoomingImageView new];
SGPhotoModel *model = self.browser.photoAtIndexHandler(i);
// 根据数据模型的缩略图URL设置图片，sg_setImageWithURL:方法可以处理不同的URL类型，对于文件URL直接加载，网络URL则是通过SDWebImage下载后异步加载
[imageView.innerImageView sg_setImageWithURL:model.thumbURL];
// 用于标识加载的是否是原图，为了优化内存，预加载缩略图，故为NO
imageView.isOrigin = NO;
// 计算每一个图片在scrollView中的位置，这时候图片的宽度比实际多2d
CGRect frame = (CGRect){imageViewWidth * i, 0, imageViewWidth, visibleSize.height};
// CGRectInset计算出左右各向内缩进d的Rect并设置到图片
imageView.frame = CGRectInset(frame, PhotoGutt, 0);
[imageViews addObject:imageView];
[self addSubview:imageView];
// 默认显示原图
[imageView scaleToFitAnimated:NO];
}
self.imageViews = imageViews;
}
经过这样的计算后，所有的图片左侧都出现了d的黑边，这就需要将scrollView向左偏移-d坐标来将黑边放到屏幕外，也就是将x设置为-d，同时调整scrollView的页面宽度为屏幕宽度+2d，代码如下。
- 这段代码位于原图控制器SGPhotoViewController中，用于添加原图控制器视图SGPhotoView，并且实现向左偏移-d，页面宽度为屏幕宽度+2d。
SGPhotoView *photoView = [SGPhotoView new];
self.photoView = photoView;
self.photoView.controller = self;
[self.view addSubview:photoView];
CGFloat x = -PhotoGutt;
CGFloat y = 0;
CGFloat w = self.view.bounds.size.width + 2 * PhotoGutt;
CGFloat h = self.view.bounds.size.height;
self.photoView.frame = CGRectMake(x, y, w, h);
总结
本文主要介绍了图片缩放的实现细节与带间距的滑动切换图片的实现原理，下一篇文章将重点介绍滑动切换图片的技术细节，项目的源码可以在文首的下载地址中找到，欢迎关注项目后续。
