iOS 仿微信图片浏览器

效果如下:

图片浏览器调用代码:

[FullScreenShowImageView showFromeView:imageView WithImageArray:images CurrentIndex:index];

一图片浏览器实现核心思想:

1. 图片缩放

将图片添加到ScrollerView中, 再通过实现ScrollerView的代理方法及添加双击手势.实现图片缩放功能,代码如下

- (void)scaleAction:(UITapGestureRecognizer *)tapGestureRecognizer{
    UIScrollView *gestureView = (UIScrollView *)tapGestureRecognizer.view;
    if (gestureView.zoomScale > 1) {
        [gestureView setZoomScale:1 animated:YES];
    }else{
        [gestureView setZoomScale:2 animated:YES];
    }
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    if (scrollView != _backScrollView) {
        return scrollView.subviews.firstObject;
    }
    return nil;
}

2. 图片下拉缩小逐渐透明

(1) 给图片添加平移手势

UIPanGestureRecognizer *panGestureRecognizer = [UIPanGestureRecognizer.alloc initWithTarget:self action:@selector(panAction:)];
            panGestureRecognizer.delegate = self;
            [imageView addGestureRecognizer:panGestureRecognizer];

(2)为了防止图片平移手势与scrollView左右滑动冲突,实现平移手势的代理方法

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(nonnull UIGestureRecognizer *)otherGestureRecognizer{
 //返回 YES所有手势将会触发   
 return YES;
}

(3)通过判断平移坐标,在平移事件中处理平移手势触发效果

- (void)panAction:(UIPanGestureRecognizer *)panGestureRecognizer{
    if (!_isPan) return; //用于判断当前是否处于可以触发平移的状态(如:图片正处于放大状态则不允许触发平移事件)
    UIView *panView = panGestureRecognizer.view;
    CGPoint panPoint = [panGestureRecognizer translationInView:panView.superview];
    if (panGestureRecognizer.state == UIGestureRecognizerStateEnded) {
       //平移手势状态结束后 通过判断纵向平移距离决定让浏览器消失还是让图片回弹到原来状态 
       __weak typeof(self)weakSelf = self;
        if (panPoint.y > 150) {
            [self dissmissAction];
        }else{
            [UIView animateWithDuration:0.3 animations:^{
                panView.width = ScreenWidth;
                panView.height = ScreenHeight;
                panView.center = self.center;
                weakSelf.backgroundColor = RGBA(0, 0, 0, 1);
            } completion:^(BOOL finished) {
                weakSelf.backScrollView.scrollEnabled = YES;
                weakSelf.isVPan = NO;
            }];
        }
    }else{
        if (panGestureRecognizer.numberOfTouches !=1) return;// (防止缩放时的两根手指与平移时的一根手指发生冲突)
        if (!_isVPan) { //用于判断 只有平移的纵向坐标改变时才能触发第一次平移 否则将会与左右滑动同时触发
            if (panPoint.y > 0) { //向下平移才能触发第一次平移
                self.backScrollView.scrollEnabled = NO; //触发平移后 不能左右滑动切换图片
                _isVPan = YES;
            }
        }else{
            if (panPoint.y > 0) {
              //通过纵向平移距离缩放图片宽高
                panView.width = ScreenWidth - panPoint.y*0.5;
                panView.height = panView.width*(ScreenHeight/ScreenWidth);
            }else{
                panView.width = ScreenWidth;
                panView.height = ScreenHeight;
            }
//平移同时改变图片位置
            panView.center = CGPointMake(self.center.x+panPoint.x, self.center.y+panPoint.y);
////通过纵向平移距离改变背景透明度
            self.backgroundColor = RGBA(0, 0, 0, 1-panPoint.y/ScreenHeight);
        }
    }
}

3 浏览器弹出动画

[view.superview convertRect:view.frame toView:self]
//将view.superview上的view.frame转化为self上的frame

通过这句代码可以获取其他父视图的子视图在当前父视图上的坐标

4 结构

外1层:View.
外2层:横向ScrollView.
外3层:用于缩放图片的ScrollView,每个里面放一张图片,有多少个图片就有多少个ScrollView容器
最里层:图片imageVIew

iOS 仿微信图片浏览器

效果如下:

一 图片浏览器实现核心思想:

1. 图片缩放

2. 图片下拉缩小逐渐透明

3 浏览器弹出动画

4 结构

推荐阅读更多精彩内容

一图片浏览器实现核心思想: