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

原创 2012年03月21日 17:36:29
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface EnlargeImageDoubleTap : UIImageView
{
    UIView *parentview;         //父窗口,即用将UIImageEx所加到的UIView
    UIImageView *imageBackground;  //放大图片后的背景
    UIView* imageBackView;         //单独查看时的背景
    
    UIView* maskView;              //遮罩层
    CGRect frameRect;
}

@property (nonatomic,retain) UIView *parentview;
@property (nonatomic,retain) UIImageView *imageBackground;
@property (nonatomic,retain) UIView* imageBackView;
@property (nonatomic,retain) UIView* maskView;



- (void)handleDoubleTap:(UITapGestureRecognizer *)recognizer;

//必须设置的
- (void)setDoubleTap:(UIView*)imageView;
@end

#import "EnlargeImageDoubleTap.h"

@implementation EnlargeImageDoubleTap

@synthesize parentview;
@synthesize imageBackground,imageBackView,maskView;
@interface EnlargeImageDoubleTap (private)
- (void)fadeIn;
- (void)fadeOut;
- (void)closeImage:(id)sender;
@end

/*
 * setDoubleTap 初始化图片
 * @parent UIView 父窗口
 */
- (void)setDoubleTap:(UIView*) parent
{
    parentview=parent;
    parentview.userInteractionEnabled=YES;
    self.userInteractionEnabled=YES;
    
    UITapGestureRecognizer *doubleTapRecognize = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleDoubleTap:)];
    doubleTapRecognize.numberOfTapsRequired = 2;
    [doubleTapRecognize setEnabled :YES];
    [doubleTapRecognize delaysTouchesBegan];
    [doubleTapRecognize cancelsTouchesInView];
    
    [self addGestureRecognizer:doubleTapRecognize];
    
}


#pragma UIGestureRecognizer Handles
/*
 * handleDoubleTap 双击图片弹出单独浏览图片层
 * recognizer 双击手势
 */
-(void) handleDoubleTap:(UITapGestureRecognizer *)recognizer
{   
                if (imageBackView==nil) {
                    if( [[UIDevice currentDevice] orientation]==UIDeviceOrientationLandscapeLeft||[[UIDevice currentDevice] orientation]==UIDeviceOrientationLandscapeRight)
                    {
                        
                        frameRect = CGRectMake(0, 0, parentview.frame.size.height+20, parentview.frame.size.width);
                    }else
                    {   
                        frameRect = CGRectMake(0, 0, parentview.frame.size.width, parentview.frame.size.height+20);
                    }
                    
                   imageBackView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.image.size.width+20, self.image.size.height+60)];
                    imageBackView.backgroundColor = [UIColor grayColor];
                    imageBackView.layer.cornerRadius = 10.0; //根据需要调整
                    
                    [[imageBackView layer] setShadowOffset:CGSizeMake(10, 10)];
                    [[imageBackView layer] setShadowRadius:5];
                    [[imageBackView layer] setShadowOpacity:0.7];
                    [[imageBackView layer] setShadowColor:[UIColor blackColor].CGColor];
                    
                    maskView = [[UIView alloc]initWithFrame:frameRect];
                    maskView.backgroundColor = [UIColor grayColor];
                    maskView.alpha=0.7;
                    
                    UIImage *imagepic = self.image;
                    UIImageView *view = [[UIImageView alloc] initWithFrame:CGRectMake(10, 30, self.image.size.width, self.image.size.height)];
                    [view setImage:imagepic];
                    UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
                    
                    UIImage *closeimg = [UIImage imageNamed:@"closeImage.png"];
                    btn.frame = CGRectMake(self.image.size.width-30,0, closeimg.size.width,closeimg.size.height);
                    [btn setBackgroundImage:closeimg forState:UIControlStateNormal];
                    [btn addTarget:self action:@selector(closeImage:) forControlEvents:UIControlEventTouchUpInside];
                    
                    [imageBackView addSubview:view];
                    [parentview addSubview:maskView];
                    imageBackView.center= CGPointMake((frameRect.origin.x+frameRect.size.width)/2
                                                      ,(frameRect.origin.y+frameRect.size.height)/2);
                    [parentview addSubview:imageBackView];
                    [imageBackView addSubview:btn];
                    [parentview bringSubviewToFront:imageBackView];

                    [self fadeIn];
                   
                    
                }
}

/*
 * fadeIn 图片渐入动画
 */
-(void)fadeIn
{
    imageBackView.transform = CGAffineTransformMakeScale(1.3, 1.3);
    imageBackView.alpha = 0;
    [UIView animateWithDuration:.55 animations:^{
        imageBackView.alpha = 1;
        imageBackView.transform = CGAffineTransformMakeScale(1, 1);
    }];
    
}

/*
 * fadeOut 图片逐渐消失动画
 */
- (void)fadeOut
{
    [UIView animateWithDuration:.35 animations:^{
        imageBackView.transform = CGAffineTransformMakeScale(1.3, 1.3);
        imageBackView.alpha = 0.0;
    } completion:^(BOOL finished) {
        if (finished) {
            [imageBackView removeFromSuperview];
        }
    }];
}

/*
 * closeImage 关闭弹出图片层
 */
-(void)closeImage:(id)sender
{
    [self fadeOut];
    imageBackView=nil;
    [maskView removeFromSuperview];
    maskView=nil;
}

@end
运行后的效果图:

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

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

原文链接:http://blog.csdn.net/toss156/article/details/7380241 #import #import @interface EnlargeIm...
  • zengraoli
  • zengraoli
  • 2013年10月17日 08:56
  • 2787

ios 图片拖拽,捏,双击放大缩小,以及保存到相册

图片拖拽,放大缩小原来是可以不用自己写算法的,直接用UIscrollView即可实现。 保存相册就比较简单了。 比较麻烦的地方: 捏,双击等动作形成的放大、缩小效果需要准确定位。 ...
  • u013756604
  • u013756604
  • 2016年11月15日 16:37
  • 778

相册图片浏览器(模仿path),效果类似微信朋友圈,效果有优化。

比较通用的图片浏览+动画 效果
  • orange_man
  • orange_man
  • 2015年02月02日 19:30
  • 1822

iOS开发中简单的图片浏览器

.m文件: // //  ImageBrowserView.m //  dipai // //  Created by 梁森 on 16/11/2. //  C...
  • u010105969
  • u010105969
  • 2016年11月02日 19:02
  • 797

IOS自定义图片浏览器,支持浏览多张图片,点击,双击,两手指缩放操作,并显示加载进度条

图片浏览器Controller的主要思路是:新建一个 JZAlbumViewController,在这个controller里主要显示一个UIScrollView,这个UIScrollView用来显示...
  • l863784757
  • l863784757
  • 2015年04月30日 17:36
  • 22173

点击图片弹出轮播图 -- 插件

轮播--点击图片弹出轮播图: 实现效果: 1.鼠标经过图片改变图片的透明度 2.点击图片,弹出遮罩层 3.点击遮罩层左右箭头,实现轮播; 4.点击遮罩层图片以外的部分,关闭遮罩层 html: ` `...
  • rainbow8590
  • rainbow8590
  • 2017年10月24日 15:56
  • 186

【菜鸟手打js】@弹出遮罩层显示大图之一

需求:页面上有图片列表,排列显示产品小图片,希望点击时像QQ空间查看相片一样出一个遮罩层,显示大图出来。 分析: 1.需要一个小图点击事件,触发遮罩层的显示。 2.遮罩层默认隐藏,用绝对定位,完...
  • z20905547
  • z20905547
  • 2016年03月17日 01:28
  • 1096

ios全景图片浏览App

前言后记由于缺乏合理的项目安排,目前该项目共计三个工程文件,每个工程文件也算是项目开展到一定程度的产物吧。该系列博客仅仅作为自己这几个月来的工作自我总结,一个人把这项目从无到有,从有到稍微能看的过程。...
  • u014629553
  • u014629553
  • 2016年01月29日 17:11
  • 2293

iOS点击图片全屏放大效果

// // EBImageBrowser.h // EBImageBrowser // // Created by yaoliangjun on 16/4/19. // Copyright ©...
  • yaoliangjun306
  • yaoliangjun306
  • 2016年04月19日 15:12
  • 1334

iOS 图片浏览器:PYPhotosView(支持原图和缩略图、多种手势、CocoaPods)

高仿QQ、微信效果的图片浏览器(支持原图和缩略图、多种手势、CocoaPods)
  • iphone5solo
  • iphone5solo
  • 2016年06月06日 10:58
  • 10902
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【IOS】图片浏览效果(双击图片,弹出层)
举报原因:
原因补充:

(最多只允许输入30个字)