文档章节

图片浏览效果(双击图片,弹出层)

jackyyang
 jackyyang
发布于 2012/07/16 18:31
字数 437
阅读 1413
收藏 5

  1. #import <UIKit/UIKit.h>  
  2. #import <QuartzCore/QuartzCore.h>  
  3.   
  4. @interface EnlargeImageDoubleTap : UIImageView  
  5. {  
  6.     UIView *parentview;         //父窗口,即用将UIImageEx所加到的UIView  
  7.     UIImageView *imageBackground;  //放大图片后的背景  
  8.     UIView* imageBackView;         //单独查看时的背景  
  9.       
  10.     UIView* maskView;              //遮罩层  
  11.     CGRect frameRect;  
  12. }  
  13.   
  14. @property (nonatomic,retain) UIView *parentview;  
  15. @property (nonatomic,retain) UIImageView *imageBackground;  
  16. @property (nonatomic,retain) UIView* imageBackView;  
  17. @property (nonatomic,retain) UIView* maskView;  
  18.   
  19.   
  20.   
  21. - (void)handleDoubleTap:(UITapGestureRecognizer *)recognizer;  
  22.   
  23. //必须设置的  
  24. - (void)setDoubleTap:(UIView*)imageView;  
  25. @end  
  1. #import "EnlargeImageDoubleTap.h"  
  2.   
  3. @implementation EnlargeImageDoubleTap  
  4.   
  5. @synthesize parentview;  
  6. @synthesize imageBackground,imageBackView,maskView;  
  7. @interface EnlargeImageDoubleTap (private)  
  8. - (void)fadeIn;  
  9. - (void)fadeOut;  
  10. - (void)closeImage:(id)sender;  
  11. @end  
  12.   
  13. /* 
  14.  * setDoubleTap 初始化图片 
  15.  * @parent UIView 父窗口 
  16.  */  
  17. - (void)setDoubleTap:(UIView*) parent  
  18. {  
  19.     parentview=parent;  
  20.     parentview.userInteractionEnabled=YES;  
  21.     self.userInteractionEnabled=YES;  
  22.       
  23.     UITapGestureRecognizer *doubleTapRecognize = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleDoubleTap:)];  
  24.     doubleTapRecognize.numberOfTapsRequired = 2;  
  25.     [doubleTapRecognize setEnabled :YES];  
  26.     [doubleTapRecognize delaysTouchesBegan];  
  27.     [doubleTapRecognize cancelsTouchesInView];  
  28.       
  29.     [self addGestureRecognizer:doubleTapRecognize];  
  30.       
  31. }  
  32.   
  33.   
  34. #pragma UIGestureRecognizer Handles  
  35. /* 
  36.  * handleDoubleTap 双击图片弹出单独浏览图片层 
  37.  * recognizer 双击手势 
  38.  */  
  39. -(void) handleDoubleTap:(UITapGestureRecognizer *)recognizer  
  40. {     
  41.                 if (imageBackView==nil) {  
  42.                     if( [[UIDevice currentDevice] orientation]==UIDeviceOrientationLandscapeLeft||[[UIDevice currentDevice] orientation]==UIDeviceOrientationLandscapeRight)  
  43.                     {  
  44.                           
  45.                         frameRect = CGRectMake(0, 0, parentview.frame.size.height+20, parentview.frame.size.width);  
  46.                     }else  
  47.                     {     
  48.                         frameRect = CGRectMake(0, 0, parentview.frame.size.width, parentview.frame.size.height+20);  
  49.                     }  
  50.                       
  51.                    imageBackView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.image.size.width+20, self.image.size.height+60)];  
  52.                     imageBackView.backgroundColor = [UIColor grayColor];  
  53.                     imageBackView.layer.cornerRadius = 10.0; //根据需要调整  
  54.                       
  55.                     [[imageBackView layer] setShadowOffset:CGSizeMake(10, 10)];  
  56.                     [[imageBackView layer] setShadowRadius:5];  
  57.                     [[imageBackView layer] setShadowOpacity:0.7];  
  58.                     [[imageBackView layer] setShadowColor:[UIColor blackColor].CGColor];  
  59.                       
  60.                     maskView = [[UIView alloc]initWithFrame:frameRect];  
  61.                     maskView.backgroundColor = [UIColor grayColor];  
  62.                     maskView.alpha=0.7;  
  63.                       
  64.                     UIImage *imagepic = self.image;  
  65.                     UIImageView *view = [[UIImageView alloc] initWithFrame:CGRectMake(10, 30, self.image.size.width, self.image.size.height)];  
  66.                     [view setImage:imagepic];  
  67.                     UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];  
  68.                       
  69.                     UIImage *closeimg = [UIImage imageNamed:@"closeImage.png"];  
  70.                     btn.frame = CGRectMake(self.image.size.width-30,0, closeimg.size.width,closeimg.size.height);  
  71.                     [btn setBackgroundImage:closeimg forState:UIControlStateNormal];  
  72.                     [btn addTarget:self action:@selector(closeImage:) forControlEvents:UIControlEventTouchUpInside];  
  73.                       
  74.                     [imageBackView addSubview:view];  
  75.                     [parentview addSubview:maskView];  
  76.                     imageBackView.center= CGPointMake((frameRect.origin.x+frameRect.size.width)/2  
  77.                                                       ,(frameRect.origin.y+frameRect.size.height)/2);  
  78.                     [parentview addSubview:imageBackView];  
  79.                     [imageBackView addSubview:btn];  
  80.                     [parentview bringSubviewToFront:imageBackView];  
  81.   
  82.                     [self fadeIn];  
  83.                      
  84.                       
  85.                 }  
  86. }  
  87.   
  88. /* 
  89.  * fadeIn 图片渐入动画 
  90.  */  
  91. -(void)fadeIn  
  92. {  
  93.     imageBackView.transform = CGAffineTransformMakeScale(1.3, 1.3);  
  94.     imageBackView.alpha = 0;  
  95.     [UIView animateWithDuration:.55 animations:^{  
  96.         imageBackView.alpha = 1;  
  97.         imageBackView.transform = CGAffineTransformMakeScale(1, 1);  
  98.     }];  
  99.       
  100. }  
  101.   
  102. /* 
  103.  * fadeOut 图片逐渐消失动画 
  104.  */  
  105. - (void)fadeOut  
  106. {  
  107.     [UIView animateWithDuration:.35 animations:^{  
  108.         imageBackView.transform = CGAffineTransformMakeScale(1.3, 1.3);  
  109.         imageBackView.alpha = 0.0;  
  110.     } completion:^(BOOL finished) {  
  111.         if (finished) {  
  112.             [imageBackView removeFromSuperview];  
  113.         }  
  114.     }];  
  115. }  
  116.   
  117. /* 
  118.  * closeImage 关闭弹出图片层 
  119.  */  
  120. -(void)closeImage:(id)sender  
  121. {  
  122.     [self fadeOut];  
  123.     imageBackView=nil;  
  124.     [maskView removeFromSuperview];  
  125.     maskView=nil;  
  126. }  
  127.   
  128. @end  
运行后的效果图:

例子的下载连接:http://download.csdn.net/detail/toss156/4160496

© 著作权归作者所有

共有 人打赏支持
jackyyang
粉丝 22
博文 42
码字总数 18506
作品 0
珠海
私信 提问
加载中

评论(2)

QETHAN
QETHAN
不好意思,我的问题。完美运行,效果很棒!
QETHAN
QETHAN
在ios5模拟器上运行的时候,没有遮罩效果啊,不知道怎么回事。谢谢!
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一

在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而...

未来十年
2012/01/07
0
0
AngularJs应用的修改

手上有一个AngularJs做的单页面应用程序,需要懂angular的前端人员对页面进行一些修改。 1.里面已经有一个图片滑动列表,需修改点击图片的效果,点击后弹出一个覆盖全屏的遮罩层显示所点击的...

zb1480746865888
2016/12/10
2
0
ArcGIS Online Web制图之要素编辑

能编辑要素的图层,只能是“当前可编辑要素图层”,最多只能有一个图层。原则是从上到下,第一个显示可编辑的图层。换句话说,必须满足四个条件,第一个,图层为显示的,非隐藏的。第二个,图...

长平狐
2012/11/28
620
0
Photoshop脚本 > 打开一个存在的文档

源自:http://coolketang.com/tutorials/menu2lesson3.php 本节将演示如何使用脚本,打开一个图片。首先创建一个空白的脚本文档,并保存在硬盘上某个位置。 首先创建一个空白的脚本文档,并保...

fzhlee
2017/05/26
0
0
如何发布系统

ASP.NET --mvc4.0---vs2015发布系统、部署常见问题! 1、在项目的web层上右击-->重新生成,右击发布! 如图: 接下来就是发布了,按照图片一步一步来就行! 以上就是vs2015的发布,下面就是该...

myy629464
2018/01/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

cxf框架的介绍

小小小施爷
9分钟前
1
0
35K成功入职:蚂蚁金服面试Java后端经历!

上个月4号通过阿里工作的学长进行内推,7天简历评估,11号接到电话面试,尽管猝不及防回答仓促,但好在前期准备充分,通过。3天后进行现场面试,通知时间为早上10点。当日设了七点闹钟,结果...

别打我会飞
10分钟前
0
0
【HAVENT原创】让 IE6 ~ IE8 浏览器也支持 map 和 filter 方法

Array.prototype 扩展可以让 IE6 ~ IE8 浏览器也支持 map 的方法: if (typeof Array.prototype.map != "function") { Array.prototype.map = function (fn, context) { var arr = [......

HAVENT
11分钟前
0
0
SMSSDK的Unity3D的两种集成方式

SMSSDK的Unity3D插件主要为用户提供了两种集成的方式,一种是通过桥接文件直接调用SMSSDK的原生API,另外一种是集成SMSSDK_Demo中的UI,这两种方式的集成,方便用户根据自己的需要进行不同的...

佳妮
19分钟前
0
0
云计算、大数据、编程语言学习指南下载,100+技术课程免费学!这份诚意满满的新年技术大礼包,你Get了吗?

开发者认证、云学院、技术社群,更多精彩,尽在开发者会场 近年来,新技术发展迅速。互联网行业持续高速增长,平均薪资水平持续提升,互联网技术学习已俨然成为学生、在职人员都感兴趣的“业...

zhaowei121
22分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部