iOS实现点击微信头像(放大、缩放、保存)效果

2020-01-18 21:13:42于丽

先来看看实现效果(GIF):

ios,点击头像放大,图片缩放,ios图片等比例缩放

实现思路:

直接自定义 UIView(CYPhotoPreviewer),为了实现双击缩放,可以实现 UIScrollViewDelegate 对应的方法。如果需要模糊背景,可以在自定义的 UIView 中先添加模糊背景,再添加 UIScrollView,继而在 UIScrollView 中添加图片容器,这个容器就是要显示的图片的 superView,代码一目了然:


- (void)setup {
 
 self.frame = [UIScreenmainScreen].bounds;
 self.backgroundColor = [UIColorclearColor];
 
 UITapGestureRecognizer *singleTap = [[UITapGestureRecognizeralloc] initWithTarget:selfaction:@selector(singleTap:)];
 [self addGestureRecognizer:singleTap];
 
 UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizeralloc] initWithTarget:selfaction:@selector(doubleTap:)];
 doubleTap.numberOfTapsRequired = 2;
 [singleTaprequireGestureRecognizerToFail:doubleTap];
 [self addGestureRecognizer:doubleTap];
 
 UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizeralloc] initWithTarget:selfaction:@selector(longPress:)];
 [self addGestureRecognizer:longPress];
 
 // 设置模糊背景
 self.blurBackground = [[UIVisualEffectViewalloc] initWithEffect:[UIBlurEffecteffectWithStyle:UIBlurEffectStyleExtraLight]];
 self.blurBackground.frame = self.frame;
 [self addSubview:self.blurBackground];
 
 // 设置 UIScrollView 相关属性
 self.scrollView = [[UIScrollViewalloc] initWithFrame:[UIScreenmainScreen].bounds];
 self.scrollView.delegate = self;
 self.scrollView.bouncesZoom = YES;
 self.scrollView.maximumZoomScale = 3.0;
 self.scrollView.multipleTouchEnabled = YES;
 self.scrollView.alwaysBounceVertical = NO;
 self.scrollView.showsVerticalScrollIndicator = NO;
 self.scrollView.showsHorizontalScrollIndicator = NO;
 [self addSubview:self.scrollView];
 
 // containerView
 self.containerView = [[UIViewalloc] init];
 [self.scrollViewaddSubview:self.containerView];
 
 // imageView
 self.imageView = [[UIImageViewalloc] init];
 self.imageView.clipsToBounds = YES;
 self.imageView.backgroundColor = [UIColorcolorWithWhite:1.0 alpha:0.5];
 [self.containerViewaddSubview:self.imageView];
}

可以看到,我们给设置了模糊背景,给这个 CYPhotoPreviewer 添加了单击手势(关闭 PhotoPreviewer)、双击手势(缩放图片)、长按手势(使用 UIAlertController 菜单,比如保存图片等)。

好,确定了这个 CYPhotoPreviewer 中的显示内容,那么我们该如何显示这个 CYPhotoPreviewer 呢?

    直接将这个 CYPhotoPreviewer 添加到 keyWindow 上 将这个 CYPhotoPreviewer 添加到控制器的 self.view 上

这两种方式的实现都差不多,不过如果使用第一种方式的话,会导致将 CYPhotoPreviewer 添加到 keyWindow 上之后,再长按继续将 UIAlertController 显示就比较麻烦了,因此,这里打算采用将 CYPhotoPreviewer 添加到控制器的