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

iOS 242 2017-11-07 22:54

前言

开发过程中,遇到了需要图片浏览的功能,可以进行简单的图片浏览和网络图片保存的功能,为了方便以后使用,就封装了一个简单的图片浏览器,需要SDWebImage支持,使用:

// 显示本地图片
[PhotoBrowser showLocalImages:images];
// 显示网络图片
[PhotoBrowser showURLImages:images placeholderImage:[UIImage imageNamed:@"placeholderImage"]];

运行效果:

iOS 自定义工具类 ---- 图片浏览器-JEESNS
运行效果

思路

自定义一个视图,添加到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];
// 显示网络图片
[PhotoBrowser showURLImages:images placeholderImage:[UIImage imageNamed:@"placeholderImage"]];

Demo地址

传送门:Demo地址


总结

  • 封装工具的时候,最重要的就是使用简单,篇幅少;不太想用别人的东西最主要的就是功能复杂,很多对我来说都是冗余的,并且出现问题时也不好维护,所以如果能够自己实现就自己实现,这是对项目的负责
  • 该工具可以继续优化,例如将点击视图传进来,返回时回到最初位置,类似系统浏览图片等功能
  • 可以使用UICollectionView实现循环滚动(伪循环),思路是:利用UICollectionView的重用性,将图片数量*n次,例如1000次,并无动画滚动到中间位置,这样伪实现无限滚动视图
文章评论

2 关注 / 24 粉丝

我无话可说