iOS 自定义工具类 ---- 图片浏览器

前言

开发过程中，遇到了需要图片浏览的功能，可以进行简单的图片浏览和网络图片保存的功能，为了方便以后使用，就封装了一个简单的图片浏览器，需要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 是一个弹出选择视图的类，可以加到其他视图上。