一：簡介
在專案中免不了會遇到，實名認證上傳身份證、繫結銀行卡等功能。在實際操作中呢，會涉及到上傳圖片，在頁面佈局時，可能圖片不是一張，考慮到佈局的美觀等因素，顯示圖片的位置變得很小，如果想檢視上傳的圖片是否清晰，內容是否完整，可能就需要放大才能實現，下面就和大家分享一下我封裝的一類，完美的實現了圖片的縮放功能。
另外，這些博文都是來源於我日常開發中的技術總結，在時間允許的情況下，我會針對技術點分別分享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獲取方法
關注 【網羅開發】微信公眾號，回覆【93】便可領取。 網羅天下方法，方便你我開發，更多iOS技術乾貨等待領取，所有文件會持續更新，歡迎關注一起成長！
五：專案展示
希望可以幫助大家，如有問題可加QQ技術交流群: 668562416，如果哪裡有什麼不對或者不足的地方，還望讀者多多提意見或建議
如需轉載請聯絡我，經過授權方可轉載，謝謝
本篇已同步到個人部落格：FBY展菲
歡迎關注我的公眾號：網羅開發
