iOS實現點擊圖片放大&長按保存圖片

時間  2019-11-16
標籤 ios 實現 點擊 圖片 放大 保存 欄目 iOS 简体版
原文   原文鏈接

一：簡介

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

另外，這些博文都是來源於我平常開發中的技術總結，在時間容許的狀況下，我會針對技術點分別分享iOS、Android兩個版本，儘可能附上demo以供你們參考，若是有其餘技術點須要，可在文章後留言，我會盡全力幫助你們。github

二：實現思路分析

  1. 給UIImageView添加手勢bash

  2. 封裝一個繼承NSObject的FBYImageZoom類微信

  3. 寫一個函數用來接收出入的UIImageViewide

  4. 根據傳入的UIImageView從新繪製在Window中函數

  5. 添加放大後背景視圖的顏色和透明度源碼分析

  6. 使用動畫放大展現ImageView佈局

  7. 添加恢復ImageView原始尺寸的tap點擊事件動畫

  8. 完成以後將背景視圖刪掉ui

三：實現源碼分析

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

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獲取方法

關注 【網羅開發】微信公衆號，回覆【93】即可領取。 網羅天下方法，方便你我開發，更多iOS技術乾貨等待領取，全部文檔會持續更新，歡迎關注一塊兒成長！

五：項目展現

但願能夠幫助你們，若有問題可加QQ技術交流羣: 668562416，若是哪裏有什麼不對或者不足的地方，還望讀者多多提意見或建議

如需轉載請聯繫我，通過受權方可轉載，謝謝

本篇已同步到我的博客：FBY展菲

歡迎關注個人公衆號：網羅開發

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程