iOS_“图片浏览选择”功能的编写思路

最近重新开始练习iOS开发，找感觉。

先做个简单的图片浏览选择功能。不用管是难还是简单，先实现一下。

一、步骤概述

包含三个步骤：

创建页面：图片选择页(collectionView)，图片预览页
处理数据：在页面间传递图片数据集或者单张图片，用系统的Photo库API获取图片
实现动画：各个手势（GestureRecognizer）结合数值的计算

练习重点：

各种手势（GestureRecognizer）的运用

二、具体实现

创建页面

首先是创建相应的页面。这个作为最基础的部分还是在此略过。总共有三个页面：

入口页

选择页

预览页

选择图片后的入口页

处理数据

然后是处理图片数据，在页面间传递图片数据。

给图片加上点击事件，由于UIImageView默认不能交互，所以需要把交互打开：

在入口页导入系统的<Photos/Photos.h>库，在图片的点击事件响应方法里，调用Photo库“查看是否有权限”的API：

if (status == PHAuthorizationStatusNotDetermined) {[PHPhotoLibrary requestAuthorization:^(PHAuthorizationStatus status) {if (status == PHAuthorizationStatusAuthorized) {     // 有权限读取照片[self performLoadPhotoAssets]; // 自定义方法}}];
} else if (status == PHAuthorizationStatusAuthorized) {// 有权限读取照片[self performLoadPhotoAssets]; // 自定义方法
}
复制代码

当判断到有权限查看相册时，则执行获取图片的方法[self performLoadPhotoAssets]：

先从系统相册获取图片assetsArray

NSMutableArray *assetsArray = [NSMutableArray array];PHFetchOptions *options = [[PHFetchOptions alloc] init];
options.sortDescriptors = @[[NSSortDescriptor sortDescriptorWithKey:@"creationDate" ascending:NO]];PHFetchResult *fetchResult = [PHAsset fetchAssetsWithOptions:options];[fetchResult enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {[assetsArray addObject:obj];
}];
复制代码

然后传递到下一个UICollectionView界面

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];layout.itemSize = CGSizeMake(100, 100);CGFloat space = (self.view.bounds.size.width - (4 * 100)) / 5;
if (space < 5) space = 5;
layout.minimumInteritemSpacing = space;layout.minimumLineSpacing = 15;layout.sectionInset = UIEdgeInsetsMake(15, space, 15, space);YLPhotoSelectionViewController *photoVC = [[YLPhotoSelectionViewController alloc] initWithCollectionViewLayout:layout];
photoVC.assetsArray = [assetsArray copy];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:photoVC];
[self presentViewController:nav animated:YES completion:nil];
复制代码

在这个UICollectionView界面，也就是图片选择页，在接口处自然是定义好属性：

@interface YLPhotoSelectionViewController : UICollectionViewController@property(nonatomic, copy)  NSArray * _Nullable assetsArray;@end
复制代码

这个collectionView没什么好多说的，实现collectionView的dataSource和delegate即可，唯一要注意的是在CollectionViewCell里继续引入并调用Photo库解码PHAseet：

cell里接受数据的属性

@interface YLPhotoCollectionViewCell : UICollectionViewCell@property(nonatomic, strong) PHAsset *asset;@end
复制代码

在asset属性的set里解码PHAsset

- (void)setAsset:(PHAsset *)asset {__weak __typeof(self) weakSelf = self;[[PHImageManager defaultManager] requestImageForAsset:asset targetSize:self.photoImageView.bounds.size contentMode:PHImageContentModeAspectFill options:NULL resultHandler:^(UIImage * _Nullable result, NSDictionary * _Nullable info) {if (result) {// 给cell里的图片视图ImageView赋值weakSelf.photoImageView.image = result;}}];}
复制代码

然后接着在collectionView的点击代理里，把整个图片数组和被选择图片的索引值传递给图片预览页：

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {NSInteger row = indexPath.row;// 图片预览页YLPhotoPreviewViewController *previewVC = [[YLPhotoPreviewViewController alloc] init];// 传递图片和图片的索引值previewVC.photoAssetsArray = self.assetsArray;previewVC.photoIndex = row;[self.navigationController pushViewController:previewVC animated:YES];
}
复制代码

传递整个图片数组和被选择图片的索引值，而不是只传递被选择的图片，这样做目的是给轻扫手势切换图片提供相应的数据，通过对索引值的加和减来实现。

同样地，在图片预览页面的接口定义接收数据的属性：

@interface YLPhotoPreviewViewController : UIViewController@property(nonatomic, copy) NSArray  * _Nullable photoAssetsArray;
@property(nonatomic, assign) NSInteger photoIndex;@end
复制代码

图片的呈现很简单，一张铺满屏幕的UIImageView，同样用在cell里的Photo库的解码方法，把数据赋值给UIImageView，注意这里的图片是通过传递过来的两个属性组合取出：

PHAsset *asset = self.photoAssetsArray[self.photoIndex];
复制代码

实现动画

最后是这次的重点，实现各种手势操作：

长按，UILongPressGestureRecognizer
轻扫，UISwipeGestureRecognizer
缩放，UIPinchGestureRecognizer
旋转，UIRotationGestureRecognizer
滑动，UIPanGestureRecognizer
屏幕边缘滑动，UIScreenEdgePanGestureRecognizer

这里重点记录一下缩放、旋转和平移这三个手势实现时，都需要有处理的数据，全部代码在GitHub里。

首先它们都需要记录一个最终数值：

// 最终照片的比例
@property (assign, nonatomic) CGFloat finalPinchScale;
// 最终旋转角度
@property (assign, nonatomic) CGFloat finalRotaionAngle;
// 最终平移的位置
@property (assign, nonatomic) CGPoint finalPanTranslastion;
复制代码

其次都需要记录上次缩放、旋转或平移的值：

// 上次缩放的比例
static CGFloat _lastPinchScale = 1; // 上一次旋转的角度
static CGFloat _lastRotaionAngle = 0; // 上次平移的位置
static CGPoint _lastTranslation = {.x = 0, .y = 0};
复制代码

然后是根据操作的状态state来计算数值，以缩放的代码为例：

if (sender.state == UIGestureRecognizerStateChanged) {// 改变照片的缩放比例self.finalPinchScale = _lastPinchScale * currentPinchScale;// 将finalPinchScaley应用在照片上[self transformForImage]; // 自定义方法} else if (sender.state == UIGestureRecognizerStateEnded) {// 更新lastPinchScale的数值到本次缩放的比例_lastPinchScale = _lastPinchScale *currentPinchScale;}
复制代码

然后就是执行关键的自定义方法[self transformForImage]：

- (void)transformForImage {// 把最终值传入相应的transform类型CGAffineTransform scaleTransform = CGAffineTransformMakeScale(self.finalPinchScale, self.finalPinchScale);CGAffineTransform rotationTransform = CGAffineTransformRotate(scaleTransform, self.finalRotaionAngle);CGAffineTransform translationTransform = CGAffineTransformTranslate(rotationTransform, _finalPanTranslastion.x, _finalPanTranslastion.y);self.previewImageView.transform = translationTransform;
}
复制代码

这里是最终的自定义方法，可以看到不同类型的transform是需要叠加在一起，然后最后一个transform类型赋值给视图的transform属性。

最后要主要，当有多个容易冲突的手势操作时，这些手势需要实现相应的代理方法：

// 缩放、旋转、平移手势各自签署协议
pinchGesture.delegate = self;
rotationGesture.delegate = self;
panGesture.delegate = self;// “同时生效”的代理方法
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {return YES;
}
复制代码

然后就可以操作手势来实现缩放、旋转等功能了：

三、总结

iOS开发很大一部分工作是熟悉使用系统提供的强大API，然后做适度的封装。

至于编程的另一部分——算法，数据结构，编程范式等，不分后端还是前端，都是编程者需要结合理论和实践不断提高的东西。