刚好最近在做个商城项目，甲方爸爸说咱们要求不高，你就照着淘宝来就好，额~~~~
好吧，咱就不吐槽了，直接开撸吧，惯例先上一下效果图
需求以及思路
我们要实现的功能有如下几个：
- 图片的全屏查看以及保存
- 图片放大缩小、平移
- 图片在任何位置的放大查看，最终都能恢复到原位置，并附带动效
图片的放大缩小以及平移功能可以直接通过 UIScrollView 来实现，考虑到复用以及使用场景，所以就直接把功能都封装在 UIImageView 里，方便以后直接使用。
代码
- 首先创建 LWShowImageView 继承于UIImageView，在 .m 中创建手势、新的 UIImageView 以及 UIScrollView ，同时还有几个重要的参数
@interface LWShowImageView()<UIActionSheetDelegate,UIScrollViewDelegate>
/** 展示手势*/
@property (nonatomic, strong) UITapGestureRecognizer *showTap;
/** 收起手势*/
@property (nonatomic, strong) UITapGestureRecognizer *hideTap;
/** 长按手势*/
@property (nonatomic, strong) UILongPressGestureRecognizer *longTap;
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UIImageView *newImageView;
@implementation LWShowImageView
{
CGRect _oldframe;//原始尺寸
CGRect _newframe;//新尺寸
CGFloat _scale;// 缩放比例
}
-(instancetype)init
{
if (self = [super init]) {
self.userInteractionEnabled = YES;
[self createGesture];
}
return self;
}
/** 创建手势*/
-(void)createGesture
{
self.showTap= [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(showImageView)];
[self addGestureRecognizer:self.showTap];
self.hideTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideImageView:)];
self.longTap = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(viewLongPress:)];
self.longTap.minimumPressDuration = 1;
}
#pragma mark -- 懒加载
-(UIScrollView *)scrollView
{
if (!_scrollView) {
_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
[_scrollView setBackgroundColor:[UIColor colorWithRed:0/255.0 green:0/255.0 blue:0/255.0 alpha:1]];
[_scrollView setAlpha:0];
// 缩放级别
_scrollView.minimumZoomScale = 1;
_scrollView.maximumZoomScale = 8;
_scrollView.delegate = self;
// 添加回收手势
[_scrollView addGestureRecognizer:self.hideTap];
// 添加长按手势
[_scrollView addGestureRecognizer:self.longTap];
[_scrollView addSubview:self.newImageView];
}
return _scrollView;
}
-(UIImageView *)newImageView
{
if (!_newImageView) {
_newImageView = [[UIImageView alloc] initWithFrame:_oldframe];
[_newImageView setImage:self.image];
_newImageView.contentMode =UIViewContentModeScaleAspectFit;
}
return _newImageView;
}
- 实现UIScrollViewDelegate ，调整放大后视图的位置
#pragma MARK-- UIScrollViewDelegate
// 缩放后的视图
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return self.newImageView;
}
// 调整视图位置
- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
CGRect frame = self.newImageView.frame;
frame.origin.y = (self.scrollView.frame.size.height - self.newImageView.frame.size.height) > 0 ? (self.scrollView.frame.size.height - self.newImageView.frame.size.height) * 0.5 : 0;
frame.origin.x = (self.scrollView.frame.size.width - self.newImageView.frame.size.width) > 0 ? (self.scrollView.frame.size.width - self.newImageView.frame.size.width) * 0.5 : 0;
self.newImageView.frame = frame;
self.scrollView.contentSize = CGSizeMake(self.newImageView.frame.size.width + 30, self.newImageView.frame.size.height + 30);
}
// 缩放比例
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
_scale = scale;
}
- 手势处理，在这里说明一下，_oldframe 主要是记录图片点击放大前的 frame ,在点击图片后移除原有放大手势，添加缩小以及长按手势
/**
* 全屏浏览
*/
-(void)showImageView
{
if (!self.image) {
// 图片还没有加载完毕
return;
}
// 保存放大前的frame
_oldframe = [self convertRect:self.bounds toView:[UIApplication sharedApplication].keyWindow];
[[UIApplication sharedApplication].keyWindow addSubview:self.scrollView];
// 移除
[self removeGestureRecognizer:self.showTap];
// 动画放大所展示的ImageView
[UIView animateWithDuration:0.4 animations:^{
CGFloat y,width,height;
y = ([UIScreen mainScreen].bounds.size.height - self.image.size.height * [UIScreen mainScreen].bounds.size.width / self.image.size.width) * 0.5;
width = [UIScreen mainScreen].bounds.size.width;
height = self.image.size.height * [UIScreen mainScreen].bounds.size.width / self.image.size.width;
_newframe = CGRectMake(0, y, width, height);
[self.newImageView setFrame:_newframe];
[self.scrollView setAlpha:1];
} completion:^(BOOL finished) {
}];
}
/**
* 恢复imageView原始尺寸
*/
- (void)hideImageView:(UITapGestureRecognizer *)tap{
if (_scale > 2.5) {
[self.newImageView setFrame:_newframe];
self.scrollView.contentSize = CGSizeMake(_newframe.size.width + 30, _newframe.size.height + 30);
}
// 恢复
[UIView animateWithDuration:0.4 animations:^{
[self.newImageView setFrame:_oldframe];
[self.scrollView setAlpha:0];
} completion:^(BOOL finished) {
[self addGestureRecognizer:self.showTap];
[self.newImageView removeFromSuperview];
self.newImageView = nil;
[self.scrollView removeFromSuperview];
self.scrollView = nil;
}];
}
/** 长按手势*/
-(void)viewLongPress:(UILongPressGestureRecognizer *)sender
{
if (sender.state == UIGestureRecognizerStateBegan) {
UIActionSheet *actionSheet = [[UIActionSheet alloc]initWithTitle:@"保存图片" delegate:self cancelButtonTitle:@"取消"destructiveButtonTitle:@"确定" otherButtonTitles:nil];
[actionSheet showInView:self.scrollView];
}
}
- 图片保存
-(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
{
if (buttonIndex == 0) {
// 保存到相册
UIImageWriteToSavedPhotosAlbum(self.image, self, @selector(image:didFinishSavingWithError:contextInfo:), (__bridge void *)self);
}
}
- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
NSLog(@"image = %@, error = %@, contextInfo = %@", image, error, contextInfo);
}
至此，封装工作全部完成。
