码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-01-02 01:06:09      阅读:1000      评论:0      收藏:0      [点我收藏+]

标签:

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

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

需求分析:

      问:&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]; } }

 

这样整个过程就完成了,

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

标签:

原文地址:http://www.cnblogs.com/anRanTimes/p/5094012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!