iOS 仿淘宝实现商品规格图片的放大缩小功能

刚好最近在做个商城项目，甲方爸爸说咱们要求不高，你就照着淘宝来就好，额~~~~

好吧，咱就不吐槽了，直接开撸吧，惯例先上一下效果图

需求以及思路

我们要实现的功能有如下几个：

• 图片的全屏查看以及保存
• 图片放大缩小、平移
• 图片在任何位置的放大查看，最终都能恢复到原位置，并附带动效

图片的放大缩小以及平移功能可以直接通过 UIScrollView 来实现，考虑到复用以及使用场景，所以就直接把功能都封装在 UIImageView 里，方便以后直接使用。

代码

• 首先创建 LWShowImageView 继承于UIImageView，在 .m 中创建手势、新的 UIImageView 以及 UIScrollView ，同时还有几个重要的参数

@interface LWShowImageView()<UIActionSheetDelegate,UIScrollViewDelegate>
/** 展示手势*/
@property (nonatomic, strong) UITapGestureRecognizer *showTap;
/** 收起手势*/
@property (nonatomic, strong) UITapGestureRecognizer *hideTap;
/** 长按手势*/
@property (nonatomic, strong) UILongPressGestureRecognizer *longTap;

@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UIImageView *newImageView;

@implementation LWShowImageView
{
    CGRect _oldframe;//原始尺寸
    CGRect _newframe;//新尺寸
    CGFloat _scale;// 缩放比例
}

-(instancetype)init
{
    if (self = [super init]) {
        self.userInteractionEnabled = YES;
        [self createGesture];
    }
    return self;
}

/** 创建手势*/
-(void)createGesture
{
    self.showTap= [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(showImageView)];
    [self addGestureRecognizer:self.showTap];
    self.hideTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideImageView:)];
    self.longTap = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(viewLongPress:)];
    self.longTap.minimumPressDuration = 1;
}

#pragma mark -- 懒加载
-(UIScrollView *)scrollView
{
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
        [_scrollView setBackgroundColor:[UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:1]];
        [_scrollView setAlpha:0];
        //        缩放级别
        _scrollView.minimumZoomScale = 1;
        _scrollView.maximumZoomScale = 8;
        _scrollView.delegate = self;
        //  添加回收手势
        [_scrollView addGestureRecognizer:self.hideTap];
        //    添加长按手势
        [_scrollView addGestureRecognizer:self.longTap];
        [_scrollView addSubview:self.newImageView];
    }
    return _scrollView;
}

-(UIImageView *)newImageView
{
    if (!_newImageView) {
        _newImageView = [[UIImageView alloc] initWithFrame:_oldframe];
        [_newImageView setImage:self.image];
        _newImageView.contentMode =UIViewContentModeScaleAspectFit;
    }
    return _newImageView;
}
复制代码

• 实现UIScrollViewDelegate ，调整放大后视图的位置

#pragma MARK-- UIScrollViewDelegate
// 缩放后的视图
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return self.newImageView;
}

// 调整视图位置
- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
    
    CGRect frame = self.newImageView.frame;
    
    frame.origin.y = (self.scrollView.frame.size.height - self.newImageView.frame.size.height) > 0 ? (self.scrollView.frame.size.height - self.newImageView.frame.size.height) * 0.5 : 0;
    frame.origin.x = (self.scrollView.frame.size.width - self.newImageView.frame.size.width) > 0 ? (self.scrollView.frame.size.width - self.newImageView.frame.size.width) * 0.5 : 0;
    self.newImageView.frame = frame;
    
    self.scrollView.contentSize = CGSizeMake(self.newImageView.frame.size.width + 30, self.newImageView.frame.size.height + 30);
}

// 缩放比例
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
    _scale = scale;
}

复制代码

• 手势处理，在这里说明一下，_oldframe 主要是记录图片点击放大前的 frame ,在点击图片后移除原有放大手势，添加缩小以及长按手势

/**
 *  全屏浏览
 */
-(void)showImageView
{
    if (!self.image) {
        //        图片还没有加载完毕
        return;
    }
    //    保存放大前的frame
    _oldframe = [self convertRect:self.bounds toView:[UIApplication sharedApplication].keyWindow];
    [[UIApplication sharedApplication].keyWindow addSubview:self.scrollView];
    //    移除
    [self removeGestureRecognizer:self.showTap];
    //  动画放大所展示的ImageView
    [UIView animateWithDuration:0.4 animations:^{
        CGFloat y,width,height;
        y = ([UIScreen mainScreen].bounds.size.height - self.image.size.height * [UIScreen mainScreen].bounds.size.width / self.image.size.width) * 0.5;
        width = [UIScreen mainScreen].bounds.size.width;
        height = self.image.size.height * [UIScreen mainScreen].bounds.size.width / self.image.size.width;
        _newframe = CGRectMake(0, y, width, height);
        [self.newImageView setFrame:_newframe];
        [self.scrollView setAlpha:1];
    } completion:^(BOOL finished) {
        
    }];
}

/**
 *  恢复imageView原始尺寸
 */
- (void)hideImageView:(UITapGestureRecognizer *)tap{
    
    if (_scale > 2.5) {
        [self.newImageView setFrame:_newframe];
        self.scrollView.contentSize = CGSizeMake(_newframe.size.width + 30, _newframe.size.height + 30);
    }
    //  恢复
    [UIView animateWithDuration:0.4 animations:^{
        [self.newImageView setFrame:_oldframe];
        [self.scrollView setAlpha:0];
    } completion:^(BOOL finished) {
        [self addGestureRecognizer:self.showTap];
        [self.newImageView removeFromSuperview];
        self.newImageView = nil;
        [self.scrollView removeFromSuperview];
        self.scrollView = nil;
    }];
}


/** 长按手势*/
-(void)viewLongPress:(UILongPressGestureRecognizer *)sender
{
    if (sender.state == UIGestureRecognizerStateBegan) {
        UIActionSheet *actionSheet = [[UIActionSheet alloc]initWithTitle:@"保存图片" delegate:self cancelButtonTitle:@"取消"destructiveButtonTitle:@"确定" otherButtonTitles:nil];
        [actionSheet showInView:self.scrollView];
    }
}

复制代码

• 图片保存

-(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
{
    if (buttonIndex == 0) {
        //        保存到相册
        UIImageWriteToSavedPhotosAlbum(self.image, self, @selector(image:didFinishSavingWithError:contextInfo:), (__bridge void *)self);
    }
}

- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
    NSLog(@"image = %@, error = %@, contextInfo = %@", image, error, contextInfo);
}

复制代码

至此，封装工作全部完成。