仿微信中查看图片,部分功能
先跟各位说声抱歉,在此功能中集成了分享功能,但是录屏时使用的是模拟器运行的,分享功能暂不可用;我们先看下运行的效果:
效果图.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
以上就是这次的全部功能的展示,如有不足之处还望各位指正,大家有好的想法和建议也希望各位留言交流~