iOS-UIImageView点击图片放大,再次点击恢复原始尺寸

需求分析:公司的新项目是集成了社交分享的功能,可以分享所见的奇闻异事,其中包括用户可以选择想要分享的图片状态,一张或多张,这种设计会产生用户想点击看大图的需求,再次点击返回原始的图片尺寸。还有用户的个人信息栏有用户头像的照片,用户头像一般是小图,所以用户会有点击查看大图的需要,结合这种需求,设计了一个封装类。
github开源地址:https://github.com/qxuewei/XWSacnBigImage

封装类.h文件:

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface XWScanImage : NSObject
/**
*  浏览大图
*
*  @param scanImageView 图片所在的imageView
*/
+(void)scanBigImageWithImageView:(UIImageView *)currentImageview;
@end

.m文件

#import "XWScanImage.h"

@implementation XWScanImage

//原始尺寸
static CGRect oldframe;

/**
 *  浏览大图
 *
 *  @param scanImageView 图片所在的imageView
 */
+(void)scanBigImageWithImageView:(UIImageView *)currentImageview{
    //当前imageview的图片
    UIImage *image = currentImageview.image;
    //当前视图
    UIWindow *window = [UIApplication sharedApplication].keyWindow;
    //背景
    UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    //当前imageview的原始尺寸->将像素currentImageview.bounds由currentImageview.bounds所在视图转换到目标视图window中,返回在目标视图window中的像素值
    oldframe = [currentImageview convertRect:currentImageview.bounds toView:window];
    [backgroundView setBackgroundColor:colorWithRGBA(107, 107, 99, 0.6)];
    //此时视图不会显示
    [backgroundView setAlpha:0];
    //将所展示的imageView重新绘制在Window中
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:oldframe];
    [imageView setImage:image];
    [imageView setTag:0];
    [backgroundView addSubview:imageView];
    //将原始视图添加到背景视图中
    [window addSubview:backgroundView];


    //添加点击事件同样是类方法 -> 作用是再次点击回到初始大小
    UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideImageView:)];
    [backgroundView addGestureRecognizer:tapGestureRecognizer];

    //动画放大所展示的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) {

    }];

}

/**
 *  恢复imageView原始尺寸
 *
 *  @param tap 点击事件
 */
+(void)hideImageView:(UITapGestureRecognizer *)tap{
    UIView *backgroundView = tap.view;
    //原始imageview
    UIImageView *imageView = [tap.view viewWithTag:0];
    //恢复
    [UIView animateWithDuration:0.4 animations:^{
        [imageView setFrame:oldframe];
        [backgroundView setAlpha:0];
    } completion:^(BOOL finished) {
       //完成后操作->将背景视图删掉
        [backgroundView removeFromSuperview];
    }];
}

@end

使用方法:
1.导入XWScanImageClass
2.为UIImageView增加点击事件,并且开始用户交互属性

//为UIImageView1添加点击事件
UITapGestureRecognizer *tapGestureRecognizer1 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scanBigImageClick1:)];
[_ImageView1 addGestureRecognizer:tapGestureRecognizer1];
//让UIImageView和它的父类开启用户交互属性
[_ImageView1 setUserInteractionEnabled:YES];

3.浏览大图点击事件

-(void)scanBigImageClick1:(UITapGestureRecognizer *)tap{
NSLog(@"点击图片");
UIImageView *clickedImageView = (UIImageView *)tap.view;
[XWScanImage scanBigImageWithImageView:clickedImageView];
}

运行结果截图:
这里写图片描述

点击第一张图片之后:
服务器维护。。。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值