iOS實現點擊圖片放大和長按保存圖片的示例

2020-07-26 02:29:35

字體：大中小

來源：轉載

供稿：網友

一：簡介

在項目中免不了會遇到，實名認證上傳身份證、綁定銀行卡等功能。在實際操作中呢，會涉及到上傳圖片，在頁面布局時，可能圖片不是一張，考慮到布局的美觀等因素，顯示圖片的位置變得很小，如果想查看上傳的圖片是否清晰，內容是否完整，可能就需要放大才能實現，下面就和大家分享一下我封裝的一類，完美的實現了圖片的縮放功能。

另外，這些博文都是來源于我日常開發中的技術總結，在時間允許的情況下，我會針對技術點分別分享iOS、Android兩個版本，盡量附上demo以供大家參考，如果有其他技術點需要，可在文章后留言，我會盡全力幫助大家。

二：實現思路分析

給UIImageView添加手勢
封裝一個繼承NSObject的FBYImageZoom類
寫一個函數用來接收出入的UIImageView
根據傳入的UIImageView重新繪制在Window中
添加放大后背景視圖的顏色和透明度
使用動畫放大展示ImageView
添加恢復ImageView原始尺寸的tap點擊事件
完成之后將背景視圖刪掉

三：實現源碼分析

根據實現思路分析，一步步進行編碼實現：

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上。

五：項目展示