标签:
如何实现"查看大图"功能。
** 点击"图片"按钮, 显示大图
需求分析:
问:&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]; } }
这样整个过程就完成了,
标签:
原文地址:http://www.cnblogs.com/anRanTimes/p/5094012.html