一：简介
在项目中免不了会遇到，实名认证上传身份证、绑定银行卡等功能。在实际操作中呢，会涉及到上传图片，在页面布局时，可能图片不是一张，考虑到布局的美观等因素，显示图片的位置变得很小，如果想查看上传的图片是否清晰，内容是否完整，可能就需要放大才能实现，下面就和大家分享一下我封装的一类，完美的实现了图片的缩放功能。
另外，这些博文都是来源于我日常开发中的技术总结，在时间允许的情况下，我会针对技术点分别分享ios、android两个版本，尽量附上demo以供大家参考，如果有其他技术点需要，可在文章后留言，我会尽全力帮助大家。
二：实现思路分析
- 给uiimageview添加手势
- 封装一个继承nsobject的fbyimagezoom类
- 写一个函数用来接收出入的uiimageview
- 根据传入的uiimageview重新绘制在window中
- 添加放大后背景视图的颜色和透明度
- 使用动画放大展示imageview
- 添加恢复imageview原始尺寸的tap点击事件
- 完成之后将背景视图删掉
三：实现源码分析
根据实现思路分析，一步步进行编码实现：
1. 给uiimageview添加手势
|
1
2
3
4
5
6
7
|
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类
|
1
2
3
4
|
#import <foundation/foundation.h>#import <uikit/uikit.h>@interface fbyimagezoom : nsobject@end |
3. 写一个函数用来接收出入的uiimageview
|
1
2
3
4
|
/** * @param contentimageview 图片所在的imageview */+(void)imagezoomwithimageview:(uiimageview *)contentimageview; |
4. 根据传入的uiimageview重新绘制在window中
|
1
2
3
4
|
+(void)imagezoomwithimageview:(uiimageview *)contentimageview{ uiwindow *window = [uiapplication sharedapplication].keywindow; [self scanbigimagewithimage:contentimageview.image frame:[contentimageview convertrect:contentimageview.bounds toview:window]];} |
5. 添加放大后背景视图的颜色和透明度
|
1
2
3
4
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//动画放大所展示的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点击事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//添加点击事件同样是类方法 -> 作用是再次点击回到初始大小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. 完成之后将背景视图删掉
|
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
3
4
5
6
|
//浏览大图点击事件-(void)scanbigimageclick:(uitapgesturerecognizer *)tap{ nslog(@"点击图片"); uiimageview *clickedimageview = (uiimageview *)tap.view; [fbyimagezoom imagezoomwithimageview:clickedimageview];} |
好了，到这里点击图片放大到全屏就完成了
4. 长按保存图片
另外就是实现长按保存图片的功能，这个功能很简单
首先增加长按手势
|
1
2
3
4
|
//创建长按手势uilongpressgesturerecognizer *longtap = [[uilongpressgesturerecognizer alloc] initwithtarget:self action:@selector(imglongtapclick:)];//添加手势[_myimageview addgesturerecognizer:longtap]; |
然后长按手势弹出警告视图确认
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
-(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]; } } |
最后保存图片后的回调
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
- (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上。
五：项目展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://juejin.im/post/5a9df1bdf265da23783fc632
