iOS 实现点击图片放大&长按保存图片

版权声明:转载本文请注明作者QQ2205357007 https://blog.csdn.net/weixin_41734043/article/details/86132757

一:简介

在项目中免不了会遇到,实名认证上传身份证、绑定银行卡等功能。在实际操作中呢,会涉及到上传图片,在页面布局时,可能图片不是一张,考虑到布局的美观等因素,显示图片的位置变得很小,如果想查看上传的图片是否清晰,内容是否完整,可能就需要放大才能实现,下面就和大家分享一下我封装的一类,完美的实现了图片的缩放功能。

另外,这些博文都是来源于我日常开发中的技术总结,在时间允许的情况下,我会针对技术点分别分享iOS、Android两个版本,尽量附上demo以供大家参考,如果有其他技术点需要,可在文章后留言,我会尽全力帮助大家。

二:实现思路分析

  1. 给UIImageView添加手势

  2. 封装一个继承NSObject的FBYImageZoom类

  3. 写一个函数用来接收出入的UIImageView

  4. 根据传入的UIImageView重新绘制在Window中

  5. 添加放大后背景视图的颜色和透明度

  6. 使用动画放大展示ImageView

  7. 添加恢复ImageView原始尺寸的tap点击事件

  8. 完成之后将背景视图删掉

三:实现源码分析

根据实现思路分析,一步步进行编码实现:

1. 给UIImageView添加手势

self.myImageView = [[UIImageView alloc]initWithFrame:CGRectMake(50, 150, SCREEN_WIDTH-100, SCREEN_WIDTH-100)];
self.myImageView.image = [UIImage imageNamed:@"bankcard"];
//添加点击事件
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick:)];
[_myImageView addGestureRecognizer:tapGestureRecognizer];
[_myImageView setUserInteractionEnabled:YES];
[self.view addSubview:_myImageView];

2. 封装一个继承NSObject的FBYImageZoom类

#import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>

@interface FBYImageZoom : NSObject

@end
  • 3. 写一个函数用来接收出入的UIImageView

  • /**
     *  @param contentImageview 图片所在的imageView
     */
    +(void)ImageZoomWithImageView:(UIImageView *)contentImageview;

    4. 根据传入的UIImageView重新绘制在Window中

    +(void)ImageZoomWithImageView:(UIImageView *)contentImageview{
    
        UIWindow *window = [UIApplication sharedApplication].keyWindow;
        [self scanBigImageWithImage:contentImageview.image frame:[contentImageview convertRect:contentImageview.bounds toView:window]];
    }

    5. 添加放大后背景视图的颜色和透明度

    //当前视图
        UIWindow *window = [UIApplication sharedApplication].keyWindow;
        //背景
        UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
        [backgroundView setBackgroundColor:[UIColor colorWithRed:107/255.0 green:107/255.0 blue:99/255.0 alpha:0.6]];

    6. 使用动画放大展示ImageView

  •     //动画放大所展示的ImageView
        [UIView animateWithDuration:0.4 animations:^{
            CGFloat y,width,height;
            y = ([UIScreen mainScreen].bounds.size.height - image.size.height * [UIScreen mainScreen].bounds.size.width / image.size.width) * 0.5;
            //宽度为屏幕宽度
            width = [UIScreen mainScreen].bounds.size.width;
            //高度 根据图片宽高比设置
            height = image.size.height * [UIScreen mainScreen].bounds.size.width / image.size.width;
            [imageView setFrame:CGRectMake(0, y, width, height)];
            //重要! 将视图显示出来
            [backgroundView setAlpha:1];
        } completion:^(BOOL finished) {
    
        }];

    7. 添加恢复ImageView原始尺寸的tap点击事件

  • //添加点击事件同样是类方法 -> 作用是再次点击回到初始大小
    UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideImageView:)];
    [backgroundView addGestureRecognizer:tapGestureRecognizer];
    
    /**
     *  恢复imageView原始尺寸
     */
    +(void)hideImageView:(UITapGestureRecognizer *)tap{
        UIView *backgroundView = tap.view;
        //原始imageview
        UIImageView *imageView = [tap.view viewWithTag:1024];
        //恢复
        [UIView animateWithDuration:0.4 animations:^{
            [imageView setFrame:oldframe];
            [backgroundView setAlpha:0];
        } completion:^(BOOL finished) {
            [backgroundView removeFromSuperview];
        }];
    }

    8. 完成之后将背景视图删掉

  • //完成后操作->将背景视图删掉
    [backgroundView removeFromSuperview];

    四:项目实际使用

    1. 引入封装类FBYImageZoom

  • #import "FBYImageZoom.h"
    

    2. 给UIImageView添加手势

    //添加点击事件
    UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick:)];

    3. 调用封装类函数

    //浏览大图点击事件
    -(void)scanBigImageClick:(UITapGestureRecognizer *)tap{
        NSLog(@"点击图片");
        UIImageView *clickedImageView = (UIImageView *)tap.view;
        [FBYImageZoom ImageZoomWithImageView:clickedImageView];
    }

    好了,到这里点击图片放大到全屏就完成了

    4. 长按保存图片

    另外就是实现长按保存图片的功能,这个功能很简单

  • 首先增加长按手势
  •  
        //创建长按手势
        UILongPressGestureRecognizer *longTap = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(imglongTapClick:)];
        //添加手势
        [_myImageView addGestureRecognizer:longTap];
    然后长按手势弹出警告视图确认
    -(void)imglongTapClick:(UILongPressGestureRecognizer*)gesture
    
    {
    
        if(gesture.state==UIGestureRecognizerStateBegan)
    
        {
    
            UIAlertController *alertControl = [UIAlertController alertControllerWithTitle:@"保存图片" message:nil preferredStyle:UIAlertControllerStyleAlert];
    
            UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
    
                NSLog(@"取消保存图片");
            }];
    
            UIAlertAction *confirm = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDestructive handler:^(UIAlertAction * _Nonnull action) {
    
                NSLog(@"确认保存图片");
    
                // 保存图片到相册
                UIImageWriteToSavedPhotosAlbum(self.myImageView.image,self,@selector(imageSavedToPhotosAlbum:didFinishSavingWithError:contextInfo:),nil);
    
            }];
    
            [alertControl addAction:cancel];
            [alertControl addAction:confirm];
    
            [self presentViewController:alertControl animated:YES completion:nil];
    
        }
    
    }
  • 最后保存图片后的回调
- (void)imageSavedToPhotosAlbum:(UIImage*)image didFinishSavingWithError:  (NSError*)error contextInfo:(id)contextInfo

{

    NSString *message;

    if(!error) {

        message =@"成功保存到相册";

        UIAlertController *alertControl = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];

        UIAlertAction *action = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDestructive handler:^(UIAlertAction * _Nonnull action) {

        }];

        [alertControl addAction:action];

        [self presentViewController:alertControl animated:YES completion:nil];

    }else

    {

        message = [error description];


        UIAlertController *alertControl = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];

        UIAlertAction *action = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {

        }];

        [alertControl addAction:action];

        [self presentViewController:alertControl animated:YES completion:nil];

    }

}
  • 到这里实现点击图片放大和长按保存图片功能就都是实现了,demo源码已经放在github上。

    五:项目展示

  •  

猜你喜欢

转载自blog.csdn.net/weixin_41734043/article/details/86132757