前言
开发过程中，遇到了需要图片浏览的功能，可以进行简单的图片浏览和网络图片保存的功能，为了方便以后使用，就封装了一个简单的图片浏览器，需要SDWebImage支持，使用：
// 显示本地图片
[PhotoBrowser showLocalImages:images selectedIndex:3];
// 显示网络图片
[PhotoBrowser showURLImages:images placeholderImage:[UIImage imageNamed:@"placeholderImage"] selectedIndex:2];
运行效果：
运行效果
思路
自定义一个视图，添加到KeyWindow上；
使用UICollectionView来展示图片，这样可以复用减少内存的消耗
可以在cell中添加一个scrollView来实现缩放功能
添加拖动手势实现图片的渐变消失
实现
步骤一：自定义视图，添加到KeyWindow上
添加动画，实现优雅出现
UIWindow *keyWindow = [UIApplication sharedApplication].keyWindow;
[keyWindow addSubview:photoBrowser];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.duration = 0.25f; // 动画之行时间
animation.fromValue = @(0.0);
animation.toValue = @(1.0);
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
// 将动画添加到layer上
[photoBrowser.layer addAnimation:animation forKey:@"animation"];
步骤二 ：使用UICollectionView
-(UICollectionView *)collectionView{
if (_collectionView==nil) {
UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc]init];
// 视图的滚动方向设置为横向滚动
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
layout.minimumLineSpacing = 0;
_collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:layout];
_collectionView.delegate = self;
_collectionView.dataSource = self;
_collectionView.pagingEnabled = YES;
_collectionView.showsHorizontalScrollIndicator = NO;
_collectionView.showsVerticalScrollIndicator = NO;
_collectionView.backgroundColor = [UIColor clearColor];
[_collectionView registerClass:[PhotoBrowserCollectionViewCell class] forCellWithReuseIdentifier:@"LOLITA"];
}
return _collectionView;
}
每个item的尺寸需要设置为屏幕的大小
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake([UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
}
步骤三：给cell中添加scrollView，实现缩放视图
缩放视图需要实现下面的代理方法
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
缩放视图时，位置中心点的调整
//控制缩放时在中心
- (void)scrollViewDidZoom:(UIScrollView *)scrollView{
CGFloat offsetX = (scrollView.bounds.size.width > scrollView.contentSize.width)?
(scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5 : 0.0;
CGFloat offsetY = (scrollView.bounds.size.height > scrollView.contentSize.height)?
(scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5 : 0.0;
self.imageView.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX,scrollView.contentSize.height * 0.5 + offsetY);
}
步骤四：给UICollectionView添加拖拽手势，实现渐变消失
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];
pan.delegate = self;
[_collectionView addGestureRecognizer:pan];
重点是拖拽手势处理，因为会出现手势冲突点问题，我们需要兼容拖拽手势和CollectionView上的手势，我们需要实现手势代理
-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
return YES;
}
这样，当我们拖拽的时候，就都可以响应了
在拖拽手势代理中：
// !!!: 手势处理
- (void)handleSwipe:(UIPanGestureRecognizer *)swipe{
NSArray *cellArray = self.collectionView.visibleCells;
PhotoBrowserCollectionViewCell *cell = cellArray.firstObject;
if (cell.scrollView.zoomScale>1||self.collectionView.isDragging) { // 如果已经是放大操作了，或者正在拖拽，则不响应手势
return;
}
CGFloat hideHeight = 150.0; // 设置消失的最大滑动距离
if (swipe.state == UIGestureRecognizerStateChanged) {
CGPoint translation = [swipe translationInView:self.collectionView];
CGFloat absX = fabs(translation.x);
CGFloat absY = fabs(translation.y);
// 设置滑动有效距离
if (absX > absY ) { // 左右滑动
return;
} else if (absY > absX ) { // 上下滑动
// 此时需要禁掉collectionView的滚动能力
self.collectionView.scrollEnabled = NO;
self.bgView.alpha = (hideHeight*3 - absY)/ (hideHeight*3);
self.backBtn.alpha = self.bgView.alpha;
self.saveBtn.alpha = self.bgView.alpha;
CGRect newFrame = self.collectionView.frame;
newFrame.origin.y = translation.y;
self.collectionView.frame = newFrame;
}
}
else if (swipe.state == UIGestureRecognizerStateEnded){
// 当手势结束，重新开启collectionView的滚动能力
self.collectionView.scrollEnabled = YES;
// 如果超过了最大滑动距离
if (fabs(self.collectionView.frame.origin.y)>hideHeight) {
[UIView animateWithDuration:0.5 animations:^{
self.alpha = 0;
if (self.collectionView.frame.origin.y<0) {
CGRect newFrame = self.collectionView.frame;
newFrame.origin.y = self.collectionView.frame.origin.y - self.frame.size.height;
self.collectionView.frame = newFrame;
}else{
CGRect newFrame = self.collectionView.frame;
newFrame.origin.y = self.collectionView.frame.origin.y + self.frame.size.height;
self.collectionView.frame = newFrame;
}
} completion:^(BOOL finished) {
[self removeFromSuperview];
}];
}else{ // 重新回复到最初位置
[UIView animateWithDuration:0.25 animations:^{
CGRect newFrame = self.collectionView.frame;
newFrame.origin.y = 0;
self.collectionView.frame = newFrame;
self.bgView.alpha = 1;
self.backBtn.alpha = self.bgView.alpha;
self.saveBtn.alpha = self.bgView.alpha;
}];
}
}
}
使用
在需要显示图片的事件里，传入图片数据
// 显示本地图片
[PhotoBrowser showLocalImages:images selectedIndex:3];
// 显示网络图片
[PhotoBrowser showURLImages:images placeholderImage:[UIImage imageNamed:@"placeholderImage"] selectedIndex:2];
Demo地址
传送门：Demo地址
总结
- 封装工具的时候，最重要的就是使用简单，篇幅少；不太想用别人的东西最主要的就是功能复杂，很多对我来说都是冗余的，并且出现问题时也不好维护，所以如果能够自己实现就自己实现，这是对项目的负责
- 该工具可以继续优化，例如将点击视图传进来，返回时回到最初位置，类似系统浏览图片等功能
- 可以使用UICollectionView实现循环滚动（伪循环），思路是：利用UICollectionView的重用性，将图片数量*n次，例如1000次，并无动画滚动到中间位置，这样伪实现无限滚动视图
2018-1-30 补充
1、新增默认选择的图片
2、单击收起图片、双击放大或还原图片
2018-3-27 优化
优化展示形式：类似朋友圈
对视图进行平滑的展现和缩回
需要新增相关代理，传入对应视图，并回传结束时机
普通视图
列表视图
瀑布流视图
2018-10-22 优化
浏览器开放了手动隐藏，保存图片，识别二维码功能，新增了弹窗选择控件。
效果：
效果
使用：
实现长按代理
// !!!!: 长按手势
-(void)photoBrowser:(PhotoBrowser *)photoBrowser LongPress:(UILongPressGestureRecognizer *)longPress{
NSMutableArray* items = [NSMutableArray array];
PhotoPickItem* item1 = [PhotoPickItem itemWithTitle:@"保存图片" picked:^{
[photoBrowser saveImageFromCurrentPage];
}];
[items addObject:item1];
if ([photoBrowser existQRCodeFromCurrentPage]) {
PhotoPickItem* item2 = [PhotoPickItem itemWithTitle:@"识别二维码" picked:^{
[photoBrowser identifyQRCodeFromCurrentPage:^(NSString *result) {
[[[UIAlertView alloc] initWithTitle:@"二维码"
message:result
delegate:self
cancelButtonTitle:@"确定"
otherButtonTitles:nil] show];
[photoBrowser hidden];
NSURL* url = [NSURL URLWithString:result];
if ([[UIApplication sharedApplication] canOpenURL:url]) {
[[UIApplication sharedApplication] openURL:url];
}
}];
}];
[items addObject:item2];
}
[PhotoPickView showOnView:photoBrowser Options:items];
}
注：PhotoPickView 是一个弹出选择视图的类，可以加到其他视图上。
