在项目中免不了会遇到,实名认证上传身份证、绑定银行卡等功能。在实际操作中呢,会涉及到上传图片,在页面布局时,可能图片不是一张,考虑到布局的美观等因素,显示图片的位置变得很小,如果想查看上传的图片是否清晰,内容是否完整,可能就需要放大才能实现,下面就和大家分享一下我封装的一类,完美的实现了图片的缩放功能。
另外,这些博文都是来源于我日常开发中的技术总结,在时间允许的情况下,我会针对技术点分别分享iOS、Android两个版本,尽量附上demo以供大家参考,如果有其他技术点需要,可在文章后留言,我会尽全力帮助大家。
给UIImageView添加手势
封装一个继承NSObject的FBYImageZoom类
写一个函数用来接收出入的UIImageView
根据传入的UIImageView重新绘制在Window中
添加放大后背景视图的颜色和透明度
使用动画放大展示ImageView
添加恢复ImageView原始尺寸的tap点击事件
完成之后将背景视图删掉
根据实现思路分析,一步步进行编码实现:
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];
#import
#import
@interface FBYImageZoom : NSObject
@end
/**
* @param contentImageview 图片所在的imageView
*/
+(void)ImageZoomWithImageView:(UIImageView *)contentImageview;
+(void)ImageZoomWithImageView:(UIImageView *)contentImageview{
UIWindow *window = [UIApplication sharedApplication].keyWindow;
[self scanBigImageWithImage:contentImageview.image frame:[contentImageview convertRect:contentImageview.bounds toView:window]];
}
//当前视图
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]];
//动画放大所展示的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) {
}];
//添加点击事件同样是类方法 -> 作用是再次点击回到初始大小
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];
}];
}
//完成后操作->将背景视图删掉
[backgroundView removeFromSuperview];
#import "FBYImageZoom.h"
//添加点击事件
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick:)];
//浏览大图点击事件
-(void)scanBigImageClick:(UITapGestureRecognizer *)tap{
NSLog(@"点击图片");
UIImageView *clickedImageView = (UIImageView *)tap.view;
[FBYImageZoom ImageZoomWithImageView:clickedImageView];
}
好了,到这里点击图片放大到全屏就完成了
希望可以帮助大家,如有问题可加QQ技术交流群: 668562416,如果哪里有什么不对或者不足的地方,还望读者多多提意见或建议
如需转载请联系我,经过授权方可转载,谢谢