UIImageView实现点击小图时显示对应大图的功能

        在帖子类的app中经常遇到这样一个需求，在帖子中显示一个小图，用户在点击的的时候展示大图（即原图）。

        类似这种功能，在实现的时候可以同时创建两个UIImageView，即smallImgView和origImgView，设置origImgView的hidden属性为YES，smallImgView的hidden属性为NO，通过SDWebImage分别为两个imageView加载对应的网络图片，并为smallImgView添加点击手势。实现UIImageView的一个分类，如下所示

头文件声明

#import <UIKit/UIKit.h>

@interface UIImageView (Clicked)

// YES时，点击图片有放大到全屏的动画效果，再次点击缩小到原始坐标动画效果

@property (nonatomic ,assign, setter = canClickIt:) BOOL canClick;

+ (void)showImage:(UIImageView *)defaultImageView;

@end

**********************************************************************************************

.m文件实现

#import "UIImageView+Clicked.h"

@implementation UIImageView (Clicked)

@dynamic canClick;

CGRect defaultFrame;

id dImageView;

- (void)canClickIt:(BOOL)click {

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapIt:)];

    [tap setNumberOfTapsRequired:1];

    self.userInteractionEnabled = YES;

    [self addGestureRecognizer:tap];

}

- (void)tapIt:(UIGestureRecognizer*)sender {

    [UIImageView showImage:(UIImageView*)sender.view];

}

+ (void)showImage:(UIImageView *)defaultImageView{

    UIImage *image = defaultImageView.image;

    UIWindow *window = [UIApplication sharedApplication].keyWindow;

    UIView *backgroundView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];

    defaultFrame = [defaultImageView convertRect:defaultImageView.bounds toView:window];//关键代码，坐标系转换

    backgroundView.backgroundColor=[UIColor colorWithRed:0 green:0 blue:0 alpha:1];

    backgroundView.alpha = 0;

    dImageView = defaultImageView;

    UIImageView *imageView = [[UIImageView alloc]initWithFrame:defaultFrame];

    imageView.image = image;

    imageView.tag = 1;

    [backgroundView addSubview:imageView];

    [window addSubview:backgroundView];

    

    UITapGestureRecognizer *tap=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(hideImage:)];

    [backgroundView addGestureRecognizer:tap];

    

    [UIView animateWithDuration:0.5 animations:^{

        defaultImageView.alpha = 0;

        if (image.size.height < [UIScreen mainScreen].bounds.size.height && image.size.width < [UIScreen mainScreen].bounds.size.width) {

            imageView.frame=CGRectMake(([UIScreen mainScreen].bounds.size.width-image.size.width)/2,([UIScreen mainScreen].bounds.size.height-image.size.height)/2, image.size.width, image.size.height);

        } else {

            imageView.frame=CGRectMake(0,([UIScreen mainScreen].bounds.size.height-image.size.height*[UIScreen mainScreen].bounds.size.width/image.size.width)/2, [UIScreen mainScreen].bounds.size.width, image.size.height*[UIScreen mainScreen].bounds.size.width/image.size.width);

        }

        backgroundView.alpha=1;

    } completion:^(BOOL finished) {

    }];

}

+ (void)hideImage:(UITapGestureRecognizer*)tap{

    UIView *backgroundView = tap.view;

    UIImageView *imageView = (UIImageView*)[tap.view viewWithTag:1];

    [UIView animateWithDuration:0.3 animations:^{

        imageView.frame = defaultFrame;

        backgroundView.alpha = 0;

    } completion:^(BOOL finished) {

        ((UIImageView*)dImageView).alpha = 1;

        [backgroundView removeFromSuperview];

        imageView.hidden = YES;

    }];

}

@end

******************************************************************************************************

使用方法如下：

首先：创建两个UIImageView，并添加手势

UIImageView *imgView = [[UIImageView alloc] init];

[imgView setClipsToBounds:YES];

[imgView setContentMode:UIViewContentModeScaleAspectFill];

imgView.tag = 100;

imgView.userInteractionEnabled = YES;

[self.view addSubview:imgView];

UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(showOrigImage:)];

tapGesture.numberOfTapsRequired = 1;

tapGesture.numberOfTouchesRequired = 1;

[imgView addGestureRecognizer:tapGesture];

UIImageView *origImageView = [[UIImageView alloc] init];

origImageView.tag = 900 + imgView.tag;

[origImageView setImageWithUrlString:origImgUrl];

origImageView.hidden = YES;

[self.view addSubview:origImageView];

imgView.frame = CGRectMake(15, 10, 80, 80);

origImageView.frame = CGRectMake(15, 10, 80, 80);

[imgView setImageWithUrlString:smallImgUrl];

*********************************************************

然后实现showOrigImage:方法

- (void)showOrigImage:(UITapGestureRecognizer *)tapGuesture

{

    UIImageView *origImageView = (UIImageView *)[self viewWithTag:tapGuesture.view.tag + 900];

    origImageView.canClick = YES;

    [UIImageView showImage:origImageView];

}

********************************************************

    如果一个帖子有多张图片显示，则在展示大图的时候可能需要左右滑动，展示其他大图，这样的话可能就得把原图数组传过来，并在scrollView中展示了。应该不难实现！