仿微信中查看图片，部分功能
先跟各位说声抱歉，在此功能中集成了分享功能，但是录屏时使用的是模拟器运行的，分享功能暂不可用；我们先看下运行的效果：
效果图.gif
在这个demo中，单击放大图片，长按调起系统弹窗，分别有分享图片和保存图片的功能，下面我们来看怎么去一步一步实现？！
大致的设计思路是这样的：
- 初始化一个UIImageView，这个是放置图片的，在当前的视图上添加一个单击的手势，目的是要把将要放大的图片放置在另一个窗口中；
- 这一步我们将要把盛放图片的View视图以及图片传递给我们新的窗口去做下一步的设置；
- 在新的窗口中，拿到imageView和image之后，在新建一个Window，将拿到的UIImageView覆盖到window上去，然后我们在window中新建一个UIImageView，将其添加到当前的View中，并向当前View添加点击手势，用于切回原图去，随后向当前View添加长按手势，用于调起分享和保存图片，放大图片用到了动画效果；
下面我们一起来看代码的实现：
首先，我们创建一个FFTImageZoomVC的类，来实现放大和保存图片的功能，先看.h文件的声明
@class FFTImageZoomVC;
@protocol FFTImageZoomDelegate <NSObject>
- (void)imageZoomVC:(FFTImageZoomVC *)imageZoomVC
hiddenVC:(NSDictionary *)userIndo;
@end
@interface FFTImageZoomVC : UIViewController
@property (nonatomic, weak) id<FFTImageZoomDelegate> delegate;
@property (nonatomic, weak) UIImageView *imageView;
@property (nonatomic, copy) NSString *imageName;
@end
这里面声明了一个隐藏当前VC的代理，还有传进来的imageView和imageName图片名，继续看.m对其的实现：
#import "FFTImageZoomVC.h"
#import "ShareSDKManager.h"
@interface FFTImageZoomVC ()
@property (nonatomic, assign) CGRect oldFrame;
@end
@implementation FFTImageZoomVC
- (void)scanBigImageWithImage:(UIImage * _Nullable)image
frame:(CGRect)imageOldframe
{
self.oldFrame = imageOldframe;
[self.view setBackgroundColor:[UIColor blackColor]];
//将所展示的imageView重新绘制在当前view中
UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.oldFrame];
[imageView setImage:image];
[imageView setTag:1000];
[self.view addSubview:imageView];
//添加点击事件同样是类方法 -> 作用是再次点击回到初始大小
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideImageView:)];
[self.view addGestureRecognizer:tapGestureRecognizer];
UILongPressGestureRecognizer *longTap = [[UILongPressGestureRecognizer alloc]initWithTarget:self
action:@selector(saveImageClicked:)];
[self.view addGestureRecognizer:longTap];
//动画放大所展示的ImageView
[UIView animateWithDuration:0.4 animations:^{
CGFloat y,width,height;
y = (KDeviceHeight - image.size.height * KDeviceWidth / image.size.width) * 0.5;
//宽度为屏幕宽度
width = KDeviceWidth;
//高度 根据图片宽高比设置
height = image.size.height * KDeviceWidth / image.size.width;
[imageView setFrame:CGRectMake(0, y, width, height)];
// 将视图显示出来
[self.view setAlpha:1];
} completion:^(BOOL finished)
{
}];
}
/**
* @param contentImageview 图片所在的imageView
*/
- (void)imageZoomWithImageView:(UIImageView * _Nullable)contentImageview
{
UIWindow *window = [UIApplication sharedApplication].keyWindow;
[self scanBigImageWithImage:contentImageview.image
frame:[contentImageview convertRect:contentImageview.bounds toView:window]];
}
/**
* 恢复imageView原始尺寸
*
* @param tap 点击事件
*/
- (void)hideImageView:(UITapGestureRecognizer *)tap
{
UIView *backgroundView = tap.view;
//原始imageview
UIImageView *imageView = [tap.view viewWithTag:1000];
//恢复
[UIView animateWithDuration:0.4 animations:^{
[imageView setFrame:self.oldFrame];
[backgroundView setAlpha:0];
}
completion:^(BOOL finished)
{
//完成后操作->将背景视图删掉
[backgroundView removeFromSuperview];
}];
if (self.delegate)
{
[self.delegate imageZoomVC:self hiddenVC:nil];
}
}
- (void)saveImageClicked:(UILongPressGestureRecognizer *)tap
{
if(tap.state == UIGestureRecognizerStateBegan)
{
UIAlertController *sheetControl = [UIAlertController alertControllerWithTitle:nil
message:nil preferredStyle:UIAlertControllerStyleActionSheet];
UIAlertAction *shareAction = [UIAlertAction actionWithTitle:@"分享图片"
style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action)
{
[ShareSDKManager showShareIconContent:self withImageName:self.imageName];
}];
[sheetControl addAction:shareAction];
UIAlertAction *saveAction = [UIAlertAction actionWithTitle:@"保存图片"
style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action)
{
// 保存图片到相册
UIImageWriteToSavedPhotosAlbum(self.imageView.image,self,@selector(imageSavedToPhotosAlbum:didFinishSavingWithError:contextInfo:),nil);
}];
[sheetControl addAction:saveAction];
UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消"
style:UIAlertActionStyleCancel
handler:nil];
[cancelAction setTextColor:[UIColor redColor]];
[sheetControl addAction:cancelAction];
[self presentViewController:sheetControl animated:YES completion:nil];
}
}
#pragma mark 保存图片后的回调
- (void)imageSavedToPhotosAlbum:(UIImage* _Nullable)image
didFinishSavingWithError:(NSError*)error
contextInfo:(id _Nullable)contextInfo
{
NSString *message;
if(!error)
{
message = @"成功保存到系统相册";
[self progressHUDShowSuccess:message];
}
else
{
message = [error description];
[self showAlertControlWithTitle:@"提示"
message:message
preferredStyle:UIAlertControllerStyleAlert
cancelTitle:@"取消"
cancelStyle:UIAlertActionStyleCancel
cancelHander:nil
confirmTitle:@"重试"
confirmStyle:UIAlertActionStyleDefault
confirmHander:nil];
}
}
- (void)viewDidLoad
{
[super viewDidLoad];
self.navigationController.navigationBar.hidden = YES;
[self imageZoomWithImageView:self.imageView];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}
@end
声明一下，这里的分享功能集成的微信的，我对其进行了二次的封装使用，还有一点最需要注意的是，使用保存图片，需要调用系统的相册权限，这个我们要到项目的info.plist去添加一下，
key:Privacy - Photo Library Additions Usage Description
value:应用内需访问相册（用于保存图片）这个说明是要添加的，至于内容视业务而定，这里不多赘述；
以上，我们把主要的功能都实现了，现在我们来怎么去使用这个类？！新建一个VC类，引入FFTImageZommVC.h头文件，并把当前VC作为其代理，通过代码来看实例吧~
#import "FFTImageTestVC.h"
#import "FFTImageZoomVC.h"
@interface FFTImageTestVC ()<FFTImageZoomDelegate>
@property (nonatomic, strong) UIImageView *myImageView;
@property (nonatomic, strong) NSString *imageName;
@end
@implementation FFTImageTestVC
- (void)viewDidLoad
{
[super viewDidLoad];
self.title = @"图片缩放";
self.myImageView = [UIImageView new];
// self.myImageView = [[UIImageView alloc]initWithFrame:CGRectMake(50, 150, KDeviceWidth-100, KDeviceHeight-100)];
self.imageName = @"bk_nobill_bgImg";
self.myImageView.image = [UIImage imageNamed:self.imageName];
self.myImageView.frame = CGRectMake(0,0, self.myImageView.image.size.width, self.myImageView.image.size.height);
self.myImageView.center = self.view.center;
//添加点击事件
UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick:)];
[self.myImageView addGestureRecognizer:tapGestureRecognizer];
[self.myImageView setUserInteractionEnabled:YES];
[self.view addSubview:self.myImageView];
}
#pragma mark - 浏览大图点击事件
-(void)scanBigImageClick:(UITapGestureRecognizer *)tap
{
NSLog(@"点击图片");
UIImageView *clickedImageView = (UIImageView *)tap.view;
FFTImageZoomVC *vc = [FFTImageZoomVC new];
vc.delegate = self;
vc.imageView = clickedImageView;
vc.imageName = self.imageName;
vc.view.frame = CGRectMake(0, 0, KDeviceWidth, KDeviceHeight);
[self.navigationController addChildViewController:vc];
[self.navigationController.view addSubview:vc.view];
}
- (void)imageZoomVC:(FFTImageZoomVC *)imageZoomVC
hiddenVC:(NSDictionary *)userIndo
{
[imageZoomVC.view removeFromSuperview];
[imageZoomVC removeFromParentViewController];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
以上就是这次的全部功能的展示，如有不足之处还望各位指正，大家有好的想法和建议也希望各位留言交流~
网友评论