查看: 1447|回复: 0

[IOS开发教程] iOS实现点击图片放大和长按保存图片的示例

发表于 2018-4-13 08:00:05

一:简介

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

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

二:实现思路分析

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

三:实现源码分析

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

1. 给UIImageView添加手势

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

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

  1. #import <Foundation/Foundation.h>
  2. #import <UIKit/UIKit.h>
  3. @interface FBYImageZoom : NSObject
  4. @end
复制代码

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

  1. /**
  2. * @param contentImageview 图片所在的imageView
  3. */
  4. +(void)ImageZoomWithImageView:(UIImageView *)contentImageview;
复制代码

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

  1. +(void)ImageZoomWithImageView:(UIImageView *)contentImageview{
  2. UIWindow *window = [UIApplication sharedApplication].keyWindow;
  3. [self scanBigImageWithImage:contentImageview.image frame:[contentImageview convertRect:contentImageview.bounds toView:window]];
  4. }
复制代码

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

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

6. 使用动画放大展示ImageView

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

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

  1. //添加点击事件同样是类方法 -> 作用是再次点击回到初始大小
  2. UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideImageView:)];
  3. [backgroundView addGestureRecognizer:tapGestureRecognizer];
  4. /**
  5. * 恢复imageView原始尺寸
  6. */
  7. +(void)hideImageView:(UITapGestureRecognizer *)tap{
  8. UIView *backgroundView = tap.view;
  9. //原始imageview
  10. UIImageView *imageView = [tap.view viewWithTag:1024];
  11. //恢复
  12. [UIView animateWithDuration:0.4 animations:^{
  13. [imageView setFrame:oldframe];
  14. [backgroundView setAlpha:0];
  15. } completion:^(BOOL finished) {
  16. [backgroundView removeFromSuperview];
  17. }];
  18. }
复制代码

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

  1. //完成后操作->将背景视图删掉
  2. [backgroundView removeFromSuperview];
复制代码

四:项目实际使用

1. 引入封装类FBYImageZoom

  1. #import "FBYImageZoom.h"
复制代码

2. 给UIImageView添加手势

  1. //添加点击事件
  2. UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick:)];
复制代码

3. 调用封装类函数

  1. //浏览大图点击事件
  2. -(void)scanBigImageClick:(UITapGestureRecognizer *)tap{
  3. NSLog(@"点击图片");
  4. UIImageView *clickedImageView = (UIImageView *)tap.view;
  5. [FBYImageZoom ImageZoomWithImageView:clickedImageView];
  6. }
复制代码

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

4. 长按保存图片

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

首先增加长按手势

  1. //创建长按手势
  2. UILongPressGestureRecognizer *longTap = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(imglongTapClick:)];
  3. //添加手势
  4. [_myImageView addGestureRecognizer:longTap];
复制代码

然后长按手势弹出警告视图确认

  1. -(void)imglongTapClick:(UILongPressGestureRecognizer*)gesture
  2. {
  3. if(gesture.state==UIGestureRecognizerStateBegan)
  4. {
  5. UIAlertController *alertControl = [UIAlertController alertControllerWithTitle:@"保存图片" message:nil preferredStyle:UIAlertControllerStyleAlert];
  6. UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
  7. NSLog(@"取消保存图片");
  8. }];
  9. UIAlertAction *confirm = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDestructive handler:^(UIAlertAction * _Nonnull action) {
  10. NSLog(@"确认保存图片");
  11. // 保存图片到相册
  12. UIImageWriteToSavedPhotosAlbum(self.myImageView.image,self,@selector(imageSavedToPhotosAlbum:didFinishSavingWithError:contextInfo:),nil);
  13. }];
  14. [alertControl addAction:cancel];
  15. [alertControl addAction:confirm];
  16. [self presentViewController:alertControl animated:YES completion:nil];
  17. }
  18. }
复制代码

最后保存图片后的回调

  1. - (void)imageSavedToPhotosAlbum:(UIImage*)image didFinishSavingWithError: (NSError*)error contextInfo:(id)contextInfo
  2. {
  3. NSString *message;
  4. if(!error) {
  5. message =@"成功保存到相册";
  6. UIAlertController *alertControl = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];
  7. UIAlertAction *action = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDestructive handler:^(UIAlertAction * _Nonnull action) {
  8. }];
  9. [alertControl addAction:action];
  10. [self presentViewController:alertControl animated:YES completion:nil];
  11. }else
  12. {
  13. message = [error description];
  14. UIAlertController *alertControl = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];
  15. UIAlertAction *action = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
  16. }];
  17. [alertControl addAction:action];
  18. [self presentViewController:alertControl animated:YES completion:nil];
  19. }
  20. }
复制代码

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

五:项目展示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



回复

使用道具 举报