前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS实现点击图片放大&长按保存图片

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

作者头像
网罗开发
发布2021-01-29 17:31:00
5.9K0
发布2021-01-29 17:31:00
举报
文章被收录于专栏:网罗开发

一:简介

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

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

二:实现思路分析

  1. 给UIImageView添加手势
  2. 封装一个继承NSObject的FBYImageZoom类
  3. 写一个函数用来接收出入的UIImageView
  4. 根据传入的UIImageView重新绘制在Window中
  5. 添加放大后背景视图的颜色和透明度
  6. 使用动画放大展示ImageView
  7. 添加恢复ImageView原始尺寸的tap点击事件
  8. 完成之后将背景视图删掉

三:实现源码分析

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

1. 给UIImageView添加手势
代码语言:javascript
复制
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类
代码语言:javascript
复制
#import <Foundation/Foundation.h>#import <UIKit/UIKit.h>@interface FBYImageZoom : NSObject@end
3. 写一个函数用来接收出入的UIImageView
代码语言:javascript
复制
/**
*  @param contentImageview 图片所在的imageView
*/+(void)ImageZoomWithImageView:(UIImageView *)contentImageview;
4. 根据传入的UIImageView重新绘制在Window中
代码语言:javascript
复制
+(void)ImageZoomWithImageView:(UIImageView *)contentImageview{    
   UIWindow *window = [UIApplication sharedApplication].keyWindow;
   [self scanBigImageWithImage:contentImageview.image frame:[contentImageview convertRect:contentImageview.bounds toView:window]];
}
5. 添加放大后背景视图的颜色和透明度
代码语言:javascript
复制
//当前视图
   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
代码语言:javascript
复制
    //动画放大所展示的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点击事件
代码语言:javascript
复制
//添加点击事件同样是类方法 -> 作用是再次点击回到初始大小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. 完成之后将背景视图删掉
代码语言:javascript
复制
//完成后操作->将背景视图删掉[backgroundView removeFromSuperview];

四:项目实际使用

1. 引入封装类FBYImageZoom
代码语言:javascript
复制
#import "FBYImageZoom.h"
2. 给UIImageView添加手势
代码语言:javascript
复制
//添加点击事件UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick:)];
3. 调用封装类函数
代码语言:javascript
复制
//浏览大图点击事件-(void)scanBigImageClick:(UITapGestureRecognizer *)tap{    NSLog(@"点击图片");    UIImageView *clickedImageView = (UIImageView *)tap.view;
   [FBYImageZoom ImageZoomWithImageView:clickedImageView];
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-03-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 网罗开发 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一:简介
  • 二:实现思路分析
  • 三:实现源码分析
    • 1. 给UIImageView添加手势
      • 2. 封装一个继承NSObject的FBYImageZoom类
        • 3. 写一个函数用来接收出入的UIImageView
          • 4. 根据传入的UIImageView重新绘制在Window中
            • 5. 添加放大后背景视图的颜色和透明度
              • 6. 使用动画放大展示ImageView
                • 7. 添加恢复ImageView原始尺寸的tap点击事件
                  • 8. 完成之后将背景视图删掉
                  • 四:项目实际使用
                    • 1. 引入封装类FBYImageZoom
                      • 2. 给UIImageView添加手势
                        • 3. 调用封装类函数
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档