iOS图片浏览

使用uicollectionview＋scrollview的方式实现一个简易相册浏览功能

代码参见* https://github.com/gyf1993/owenImageBrowser.git

cell初始化方法

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
        self.scrollView.minimumZoomScale = MINZOOMSCALE;
        self.scrollView.maximumZoomScale = MAXZOOMSCALE;
        self.scrollView.delegate = self;
        self.scrollView.showsVerticalScrollIndicator = NO;
        self.scrollView.showsHorizontalScrollIndicator = NO;
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction)];
        [self.scrollView addGestureRecognizer:tap];
        [self.contentView addSubview:self.scrollView];
        self.imageView = [[UIImageView alloc]initWithFrame:frame];
        self.imageView.userInteractionEnabled = YES;
        UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(doubleClickAction:)];
        doubleTap.numberOfTouchesRequired = 1;
        doubleTap.numberOfTapsRequired = 2;
        [self.imageView addGestureRecognizer:doubleTap];
        [tap requireGestureRecognizerToFail:doubleTap];
        [self.scrollView addSubview:self.imageView];
    }
    return self;
}

scrollview代理方法

返回scrollview中进行缩放的view

- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.imageView;
}

缩放监听代理，更新imageview的center值

- (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;
    scrollView.subviews[0].center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX,
                                                scrollView.contentSize.height * 0.5 + offsetY);
}

cell复用调用设置image方法

- (void)setImage:(NSString *)imageName
{
    //重置zoomscale为1
    self.scrollView.zoomScale = 1;
    UIImage *image = [UIImage imageNamed:imageName];
    self.imageView.image = image;
    CGFloat x = SCREEN_HEIGHT/SCREEN_WIDTH;
    CGFloat y = image.size.height/image.size.width;
    //x为屏幕尺寸，y为图片尺寸，通过两个尺寸的比较，重置imageview的frame
    if (y>x) {
        self.imageView.frame = CGRectMake(0, 0, SCREEN_HEIGHT/y, SCREEN_HEIGHT);
    }else
    {
        self.imageView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_WIDTH*y);
    }
    self.imageView.center = CGPointMake(SCREEN_WIDTH/2, SCREEN_HEIGHT/2);
}

双击放大图片方法

双击放大需要我们通过设置scrollview的zoomscale以及contentoffset来实现，处理起来稍微复杂一点，contentoffset的设置需要根据双击坐标在图片中的位置分为4种情况（左上、左下、右上、右下）进行处理。

- (void)doubleClickAction:(UIGestureRecognizer *)gesture
{
    CGFloat k = MAXZOOMSCALE;
    UIScrollView *scrollView = (UIScrollView *)gesture.view.superview;
    CGFloat width = gesture.view.frame.size.width;
    CGFloat height = gesture.view.frame.size.height;
    CGPoint point = [gesture locationInView:gesture.view];
    //获取双击坐标，分4种情况计算scrollview的contentoffset
    if (point.x<=width/2 && point.y<=height/2) {
        point = CGPointMake(point.x*k, point.y*k);
        point = CGPointMake(point.x-SCREEN_WIDTH/2>0?point.x-SCREEN_WIDTH/2:0,point.y-SCREEN_HEIGHT/2>0?point.y-SCREEN_HEIGHT/2:0);
    }else if (point.x<=width/2 && point.y>height/2)
    {
        point = CGPointMake(point.x*k, (height-point.y)*k);
        point = CGPointMake(point.x-SCREEN_WIDTH/2>0?point.x-SCREEN_WIDTH/2:0,point.y>SCREEN_HEIGHT/2?height*k-point.y-SCREEN_HEIGHT/2:height*k>SCREEN_HEIGHT?height*k-SCREEN_HEIGHT:0);
    }else if (point.x>width/2 && point.y<=height/2)
    {
        point = CGPointMake((width-point.x)*k, point.y*k);
        point = CGPointMake(point.x>SCREEN_WIDTH/2?width*k-point.x-SCREEN_WIDTH/2:width*k>SCREEN_WIDTH?width*k-SCREEN_WIDTH:0, point.y-SCREEN_HEIGHT/2>0?point.y-SCREEN_HEIGHT/2:0);
    }else
    {
        point = CGPointMake((width-point.x)*k, (height-point.y)*k);
        point = CGPointMake(point.x>SCREEN_WIDTH/2?width*k-point.x-SCREEN_WIDTH/2:width*k>SCREEN_WIDTH?width*k-SCREEN_WIDTH:0, point.y>SCREEN_HEIGHT/2?height*k-point.y-SCREEN_HEIGHT/2:height*k>SCREEN_HEIGHT?height*k-SCREEN_HEIGHT:0);
    }
    
    
    if (scrollView.zoomScale == 1) {
        [UIView animateWithDuration:0.3 animations:^{
            scrollView.zoomScale = k;
            scrollView.contentOffset = point;
        } completion:^(BOOL finished) {
            
        }];
    }else
    {
        [UIView animateWithDuration:0.3 animations:^{
            scrollView.zoomScale = 1;
        }];
    }
}