UI_如何实现点击图片之后放大,或缩放功能

如何实现"查看大图"功能。

** 点击"图片"按钮, 显示大图

需求分析:

问：&1.点击图片之后就放大图片的功能的步骤是什么？

1>创建一个和屏幕一样大小的半透明UIView, 用来遮盖整个界面

2>需要把“图片按钮”, 放置在coverView的前面

3>将图片按钮放大

4>将这些操作放在block动画当中。

问：&2.黑色半透明的背景图片是一个什么控件？点击灰色背景后需要做哪些操作？

解析：是一个按钮，因为需要监听点击事件做事情。

1. 让"图片按钮"通过动画的方式回到原来的位置

2. 让"半透明背景"通过动画的方式透明度变成0, 然后从父容器中移除

* 实现思路（步骤）:

1> 添加一个"阴影"按钮, 因为该"阴影"要实现点击, 所以用"按钮”。设置半透明来作为蒙版

2> 然后再把"头像按钮"显示在"阴影”上面。这个属性可以让这张图片任何时候都是显示在最上面:

3> 通过动画的方式改变"头像按钮"的frame(位置和尺寸)变成大图效果。

** 注意: 如果图片没有变大, 检查是否没有取消"自动布局(Auto Layout)"

选中图片—>点击文件属性—>Interface Buider Document—>去到"Use Auto Layout”的勾

**再来实现点击"遮罩阴影", 回到小图的功能

# -—>这里是因为后面也要给蒙版创建点击事件,然而蒙版是临时创建的,外部方法还不能直接访问,所以这里可以先在外部定义一个全局属性,然后在蒙版创建后赋值给这个属性,这样就可以在方法中操作调用了

//定义临时蒙版的属性,最后把创建的临时蒙版赋值给这个属性

@property(nonatomic,weak)UIButton *tempMengBanView;

###注意:这里使用的是weak弱引用, 这样用的原因是,在下面把这个按钮添加到了根视图,已经间接的强引用了(addSubview就表示强引用),所以这里不需要再用强引用,

需求分析:

蒙版的点击事件之后,我们需要做什么:

1> 通过动画慢慢将"遮罩阴影"的透明度变为0

2> 通过动画慢慢将"头像图片"的frame修改为原来的位置

3> 在动画执行完毕后, 移除"遮罩阴影”

//  ViewController.m
//  01_猜图游戏
#import "ViewController.h"
#import "DXQuestion.h"
@interface ViewController ()
@property (nonatomic, strong) NSArray *questions;// 记录icon button的原始的frame
@property (nonatomic, assign) CGRect iconFrame;

@property (nonatomic, weak) UIButton *coverView;

@end

@implementation ViewController

// 点击了大图按钮
- (IBAction)didClickShowBigImageButton:(UIButton *)sender {
    
    
    // 0. 记录 btnIcon 的frame
    self.iconFrame = self.btnIcon.frame;
    
    // 1. 创建一个和屏幕一样大小的半透明UIView, 用来遮盖整个界面
    UIButton *coverView = [[UIButton alloc] init];
    coverView.backgroundColor = [UIColor blackColor];
    coverView.alpha = 0.0;
    coverView.frame = self.view.bounds;
    // 为半透明背景添加一个单击事件
    [coverView addTarget:self action:@selector(didClickCoverView:) forControlEvents:UIControlEventTouchUpInside];
    
    [self.view addSubview:coverView];
    self.coverView = coverView;
    
    // 需要把"头像按钮", 放置在coverView的前面
    [self.view bringSubviewToFront:self.btnIcon];

    // 2. 讲头像按钮（图片按钮）放大
    CGFloat iconW = self.view.bounds.size.width;
    CGFloat iconH =iconW;
    CGFloat iconX = 0;
    CGFloat iconY = (self.view.bounds.size.height - iconH) * 0.5;
    
    [UIView animateWithDuration:0.5 animations:^{
        coverView.alpha = 0.6;
        self.btnIcon.frame = CGRectMake(iconX, iconY, iconW, iconH);
    }];
    
}

// 点击了"半透明背景"按钮
- (void)didClickCoverView:(UIButton *)sender {
    
    // 1. 让"头像按钮"通过动画的方式回到原来的位置
    [UIView animateWithDuration:0.5 animations:^{
        
        self.btnIcon.frame = self.iconFrame;
        // 2. 让"半透明背景"通过动画的方式透明度变成0, 然后从父容器中移除
        self.coverView.alpha = 0.0;
    } completion:^(BOOL finished) {
        [self.coverView removeFromSuperview];
    }];
}

// 点击了下一题按钮
- (IBAction)didClickNextQuestionButton:(UIButton *)sender {
    
    // 1. 切换题目的显示
    [self nextQuestion];
    
}


// 点击了中间的图片按钮
- (IBAction)didClickIconButton:(UIButton *)sender {
    
    // 根据是否已经创建了coverView, 来决定是应该放大还是缩小
    if (self.coverView == nil) {
        // 放大
        [self didClickShowBigImageButton:nil];
    } else {
        // 缩小
        [self didClickCoverView:self.coverView];
    }
    
}

这样整个过程就完成了,